diff options
| author | Maxim Devaev <[email protected]> | 2024-12-25 09:16:59 +0200 |
|---|---|---|
| committer | Maxim Devaev <[email protected]> | 2024-12-25 09:16:59 +0200 |
| commit | ab08d823c4feeb58e37591adf1ac40a07362733b (patch) | |
| tree | ab2bb3c4aa35ae2efd72486e78d1a8a8d6c40be3 /web/kvm | |
| parent | eda7ab3a49efeee6a55546e2ec51364c8dc81307 (diff) | |
pikvm/pikvm#1440: Websocket-based transport and decoding for H.264
Diffstat (limited to 'web/kvm')
| -rw-r--r-- | web/kvm/index.html | 20 | ||||
| -rw-r--r-- | web/kvm/navbar-system.pug | 11 | ||||
| -rw-r--r-- | web/kvm/window-stream.pug | 1 |
3 files changed, 26 insertions, 6 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html index fbf9c5df..1db915ee 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -170,6 +170,17 @@ </div> <hr> </div> + <div class="hidden" id="stream-message-no-vd"> + <div class="text"> + <table> + <tr> + <td rowspan="2"><img class="sign " src="/share/svg/warning.svg"></td> + <td style="line-height:1.5"><b>Direct HTTP H.264 streaming is not supported</b></td> + </tr> + </table> + </div> + <hr> + </div> <div class="hidden" id="stream-message-no-h264"> <div class="text"> <table> @@ -220,10 +231,12 @@ <td>Video <a target="_blank" href="https://docs.pikvm.org/webrtc">mode</a>:</td> <td> <div class="radio-box"> - <input checked type="radio" id="stream-mode-radio-mjpeg" name="stream-mode-radio" value="mjpeg"> - <label for="stream-mode-radio-mjpeg">MJPEG / HTTP</label> <input type="radio" id="stream-mode-radio-janus" name="stream-mode-radio" value="janus"> - <label for="stream-mode-radio-janus">H.264 / WebRTC</label> + <label for="stream-mode-radio-janus">WebRTC</label> + <input type="radio" id="stream-mode-radio-media" name="stream-mode-radio" value="media"> + <label for="stream-mode-radio-media">H.264</label> + <input checked type="radio" id="stream-mode-radio-mjpeg" name="stream-mode-radio" value="mjpeg"> + <label for="stream-mode-radio-mjpeg">MJPEG</label> </div> </td> </tr> @@ -914,6 +927,7 @@ <button class="window-button-exit-full-tab">▼</button> <div class="stream-box-offline" id="stream-box"><img id="stream-image" src="/share/png/blank-stream.png"> <video class="hidden" id="stream-video" disablePictureInPicture="true" autoplay playsinline muted></video> + <canvas class="hidden" id="stream-canvas"></canvas> <div id="stream-fullscreen-active"></div> </div> <div class="keypad" id="stream-mouse-buttons" align="center"> diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug index 62cbda25..a3438486 100644 --- a/web/kvm/navbar-system.pug +++ b/web/kvm/navbar-system.pug @@ -19,6 +19,9 @@ li(id="system-dropdown" class="right") div(id="stream-message-no-webrtc" class="hidden") +menu_message("warning", "WebRTC is not supported by this browser") hr + div(id="stream-message-no-vd" class="hidden") + +menu_message("warning", "Direct HTTP H.264 streaming is not supported") + hr div(id="stream-message-no-h264" class="hidden") +menu_message("warning", "H.264 is not supported by this browser") hr @@ -46,10 +49,12 @@ li(id="system-dropdown" class="right") td Video #[a(target="_blank" href="https://docs.pikvm.org/webrtc") mode]: td div(class="radio-box") - input(checked type="radio" id="stream-mode-radio-mjpeg" name="stream-mode-radio" value="mjpeg") - label(for="stream-mode-radio-mjpeg") MJPEG / HTTP input(type="radio" id="stream-mode-radio-janus" name="stream-mode-radio" value="janus") - label(for="stream-mode-radio-janus") H.264 / WebRTC + label(for="stream-mode-radio-janus") WebRTC + input(type="radio" id="stream-mode-radio-media" name="stream-mode-radio" value="media") + label(for="stream-mode-radio-media") H.264 + input(checked type="radio" id="stream-mode-radio-mjpeg" name="stream-mode-radio" value="mjpeg") + label(for="stream-mode-radio-mjpeg") MJPEG tr(id="stream-orient" class="feature-disabled") td Orientation: td diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug index 5ac6e15c..cbe998e3 100644 --- a/web/kvm/window-stream.pug +++ b/web/kvm/window-stream.pug @@ -16,6 +16,7 @@ div(id="stream-window" class="window window-resizable") div(id="stream-box" class="stream-box-offline") img(id="stream-image" src=`${png_dir}/blank-stream.png`) video(id="stream-video" class="hidden" disablePictureInPicture="true" autoplay playsinline muted) + canvas(id="stream-canvas" class="hidden") div(id="stream-fullscreen-active") div(id="stream-mouse-buttons" class="keypad" align="center") |