enumerate audio/video inputs, allow detailed/simple selection

openbroadcaster · May 20, 2024 · 168a51b · 168a51b
1 parent 39550c3
commit 168a51b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/html/main.html b/html/main.html
@@ -2,7 +2,7 @@
   <h1>OpenBroadcaster</h1>
   <div id="main_page_content"></div>
   <h2>Test audio input device</h2>
-  <ob-field-input-device></ob-field-input-device>
+  <ob-field-input-device data-edit></ob-field-input-device>
   <h2>Test tags and multi-select</h2>
   <div class="fieldrow">
     <label>Multi-select</label>

diff --git a/ui/fields/inputdevice.js b/ui/fields/inputdevice.js
@@ -4,20 +4,64 @@ import { OBField } from '../base/field.js';
 class OBFieldInputDevice extends OBField {
 
     #init;
+    #audioDevices;
+    #videoDevices;
 
-    connectedCallback() {
+    #showDetailed;
+    #showVideo;
+
+    async connectedCallback() {
         if (this.#init) {
             return;
         }
 
         this.#init = true;
+        this.#audioDevices = [];
+        this.#videoDevices = [];
+
+        this.#showDetailed = "simple";
+        if (this.dataset.hasOwnProperty('detailed')) {
+            this.#showDetailed = "details";
+        }
+
+        if (this.dataset.hasOwnProperty('video')) {
+            this.#showVideo = true;
+        }
+
+        await navigator.mediaDevices.getUserMedia({audio: true});
+        let devices = await navigator.mediaDevices.enumerateDevices();
+
+        devices.forEach((device) => {
+            if (device.kind === "audioinput") {
+                this.#audioDevices.push(device);
+            } else if (device.kind === "videoinput") {
+                this.#videoDevices.push(device);
+            }
+        });
 
         this.renderComponent();
     }
 
     renderEdit() {
         render(html`
-            <div>todo</div>
+            <div id="audio-input" class="${this.#showDetailed}">
+                <span>Audio Input</span>
+                <select>
+                    ${this.#audioDevices.map(device => html`
+                        <option value=${device.deviceId}>${device.label}</option>
+                    `)}
+                </select>
+            </div>
+            ${this.#showVideo && html`
+                <div id="video-input" class="${this.#showDetailed}">
+                    <span>Video Input</span>
+                    <select>
+                        ${this.#videoDevices.map(device => html`
+                            <option value=${device.deviceId}>${device.label}</option>
+                        `)}
+                    </select>
+                </div>
+            `}
         `, this.root);
     }
 
@@ -30,6 +74,13 @@ class OBFieldInputDevice extends OBField {
     scss() {
         return `
             :host {
+                #audio-input, #video-input {
+                    &.simple {
+                        span {
+                            display: none;
+                        }
+                    }
+                }
             }
         `;
     }