refactor: use webcomponents video size select

binbat · Jan 19, 2024 · 8130fe3 · 8130fe3
1 parent a70f911
commit 8130fe3
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 19 deletions.
diff --git a/assets/components.js b/assets/components.js
@@ -0,0 +1,75 @@
+export default class VideoSizeSelectElement extends HTMLElement {
+    constructor() {
+        super()
+        this.width = "320"
+        this.height = "240"
+
+        // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints
+        this.params = {}
+    }
+
+    connectedCallback() {
+        const shadow = this.attachShadow({ mode: "closed" })
+
+        const sectionWidth = document.createElement("section")
+        const labelWidth = document.createElement("label")
+        const enabledWidth = document.createElement("input")
+        const selectWidthValue = document.createElement("select")
+
+        const sectionHeight = document.createElement("section")
+        const labelHeight = document.createElement("label")
+        const enabledHeight = document.createElement("input")
+        const selectHeightValue = document.createElement("select")
+
+        labelWidth.innerText = "Width: "
+        selectWidthValue.disabled = true
+        enabledWidth.type = "checkbox"
+        enabledWidth.onclick = (ev) => {
+            if (ev.target.checked) {
+                selectWidthValue.disabled = false
+                this.params.width = this.width
+            } else {
+                selectWidthValue.disabled = true
+                this.width = this.params.width
+                delete this.params.width
+            }
+        }
+
+        labelHeight.innerText = "Height: "
+        selectHeightValue.disabled = true
+        enabledHeight.type = "checkbox"
+        enabledHeight.onclick = (ev) => {
+            if (ev.target.checked) {
+                selectHeightValue.disabled = false
+                this.params.height = this.height
+            } else {
+                selectHeightValue.disabled = true
+                this.height = this.params.height
+                delete this.params.height
+            }
+        }
+
+        const addSelectOptions = (arr, root) => arr.map(i => {
+            const option = document.createElement("option")
+            option.value = i
+            option.innerText = i
+            root.append(option)
+        })
+
+        selectWidthValue.onchange = ev => this.params.width = ev.target.value
+        selectHeightValue.onchange = ev => this.params.height = ev.target.value
+
+        addSelectOptions(["320", "480", "600", "1280", "1920", "3480"], selectWidthValue)
+        addSelectOptions(["240", "320", "480", "720", "1080", "2160"], selectHeightValue)
+
+        shadow.append(sectionWidth)
+        sectionWidth.append(enabledWidth)
+        sectionWidth.append(labelWidth)
+        sectionWidth.append(selectWidthValue)
+
+        shadow.append(sectionHeight)
+        sectionHeight.append(enabledHeight)
+        sectionHeight.append(labelHeight)
+        sectionHeight.append(selectHeightValue)
+    }
+}
diff --git a/assets/index.html b/assets/index.html
@@ -47,15 +47,7 @@
                         <option value="h264/90000">H264</option>
                     </select>
                 </section>
-
-                <section>Max Width: <select id="whip-video-width-max">
-                    <option value="" selected>Max</option>
-                    <option value="3840">3840px</option>
-                    <option value="1080">1080px</option>
-                    <option value="720">720px</option>
-                    <option value="480">480px</option>
-                    <option value="240">240px</option>
-                </select></section>
+                <section><video-size-select id="whip-video-size" ></video-size-select></section>
                 <section>SVC Layer: <select id="whip-layer-select"></select></section>
                 <section>
                     <button onclick="startWhip()">Start</button>
@@ -83,6 +75,9 @@
         import { WHIPClient } from "./whip.js"
         import { WHEPClient } from "./whep.js"
 
+        import VideoSizeSelectElement from "./components.js"
+        customElements.define("video-size-select", VideoSizeSelectElement)
+
         // Common
         const idResourceId = "resource"
         const idBearerToken = "token"
@@ -142,7 +137,7 @@
         const idWhipVideoCodec = "whip-video-codec"
         const idWhipAudioDevice = "whip-audio-device"
         const idWhipVideoDevice = "whip-video-device"
-        const idWhipVideoWidthMax = "whip-video-width-max"
+        const idWhipVideoSize = "whip-video-size"
         const idWhipButtonStop = "whip-button-stop"
 
         initLayerSelect(idWhipLayerSelect, [
@@ -172,24 +167,19 @@
                 return
             }
             logWhip("started")
-            const videoMaxWidth = getElementValue(idWhipVideoWidthMax)
-            document.getElementById(idWhipVideoWidthMax).disabled = true
-            logWhip(`video width max: ${!videoMaxWidth ? "default" : videoMaxWidth}`)
+            const videoSize = document.getElementById(idWhipVideoSize).params
+            logWhip(`video width: ${!videoSize.width ? "default" : videoSize.width}, height: ${!videoSize.height ? "default" : videoSize.height}`)
 
-            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints
-            const videoConstraints = !videoMaxWidth ? true : {
-                width: { max: videoMaxWidth },
-            }
             const audioDevice = getElementValue(idWhipAudioDevice)
             const videoDevice = getElementValue(idWhipVideoDevice)
             logWhip(`audio device: ${!audioDevice ? "none" : audioDevice}`)
             logWhip(`video device: ${!videoDevice ? "none" : videoDevice}`)
 
             let stream
             if (!audioDevice && !videoDevice) {
-                stream = await navigator.mediaDevices.getDisplayMedia({ audio: false, video: videoConstraints })
+                stream = await navigator.mediaDevices.getDisplayMedia({ audio: false, video: videoSize })
             } else {
-                stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: audioDevice }, video: { deviceId: videoDevice } })
+                stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: audioDevice }, video: { deviceId: videoDevice, ...videoSize } })
             }
 
             const el = document.getElementById("whip-video-player")