[examples] Make it possible to choose audio / video input devices

aiortc · Jan 25, 2024 · 954f215 · 954f215
1 parent 00e4cbd
commit 954f215
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/examples/server/client.js b/examples/server/client.js
@@ -48,6 +48,32 @@ function createPeerConnection() {
     return pc;
 }
 
+function enumerateInputDevices() {
+    const populateSelect = (select, devices) => {
+        let counter = 1;
+        devices.forEach((device) => {
+            const option = document.createElement('option');
+            option.value = device.deviceId;
+            option.text = device.label || ('Device #' + counter);
+            select.appendChild(option);
+            counter += 1;
+        });
+    };
+
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+        populateSelect(
+            document.getElementById('audio-input'),
+            devices.filter((device) => device.kind == 'audioinput')
+        );
+        populateSelect(
+            document.getElementById('video-input'),
+            devices.filter((device) => device.kind == 'videoinput')
+        );
+    }).catch((e) => {
+        alert(e);
+    });
+}
+
 function negotiate() {
     return pc.createOffer().then((offer) => {
         return pc.setLocalDescription(offer);
@@ -144,24 +170,44 @@ function start() {
         });
     }
 
-    var constraints = {
-        audio: document.getElementById('use-audio').checked,
+    // Build media constraints.
+
+    const constraints = {
+        audio: false,
         video: false
     };
 
+    if (document.getElementById('use-audio').checked) {
+        const audioConstraints = {};
+
+        const device = document.getElementById('audio-input').value;
+        if (device) {
+            audioConstraints.deviceId = { exact: device };
+        }
+
+        constraints.audio = Object.keys(audioConstraints).length ? audioConstraints : true;
+    }
+
     if (document.getElementById('use-video').checked) {
-        var resolution = document.getElementById('video-resolution').value;
+        const videoConstraints = {};
+
+        const device = document.getElementById('video-input').value;
+        if (device) {
+            videoConstraints.deviceId = { exact: device };
+        }
+
+        const resolution = document.getElementById('video-resolution').value;
         if (resolution) {
-            resolution = resolution.split('x');
-            constraints.video = {
-                width: parseInt(resolution[0], 0),
-                height: parseInt(resolution[1], 0)
-            };
-        } else {
-            constraints.video = true;
+            const dimensions = resolution.split('x');
+            videoConstraints.width = parseInt(dimensions[0], 0);
+            videoConstraints.height = parseInt(dimensions[1], 0);
         }
+
+        constraints.video = Object.keys(videoConstraints).length ? videoConstraints : true;
     }
 
+    // Acquire media and start negociation.
+
     if (constraints.audio || constraints.video) {
         if (constraints.video) {
             document.getElementById('media').style.display = 'block';
@@ -269,3 +315,5 @@ function sdpFilterCodec(kind, codec, realSdp) {
 function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
+
+enumerateInputDevices();
diff --git a/examples/server/index.html b/examples/server/index.html
@@ -42,6 +42,9 @@ <h2>Options</h2>
 <div class="option">
     <input id="use-audio" checked="checked" type="checkbox"/>
     <label for="use-audio">Use audio</label>
+    <select id="audio-input">
+        <option value="" selected>Default device</option>
+    </select>
     <select id="audio-codec">
         <option value="default" selected>Default codecs</option>
         <option value="opus/48000/2">Opus</option>
@@ -52,6 +55,9 @@ <h2>Options</h2>
 <div class="option">
     <input id="use-video" type="checkbox"/>
     <label for="use-video">Use video</label>
+    <select id="video-input">
+        <option value="" selected>Default device</option>
+    </select>
     <select id="video-resolution">
         <option value="" selected>Default resolution</option>
         <option value="320x240">320x240</option>