Merge pull request #1677 from handellm/add_cam_sel

Add camera selector.
webrtc · Sep 5, 2024 · b938fa9 · b938fa9
2 parents 91eebf4 + ae937a2
commit b938fa9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/src/content/getusermedia/resolution/index.html b/src/content/getusermedia/resolution/index.html
@@ -79,7 +79,9 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
                             title="W3C getusermedia specification - constraints section">constraints</a>.</p>
 
     <p>Click a button to call <code>getUserMedia()</code> with appropriate resolution.</p>
-
+    <div class="select">
+        <label for="videoSource">Video source: </label><select id="videoSource"></select>
+    </div>
     <div id="buttons">
         <button id="p180">180p (320x180)</button>
         <button id="qvga">QVGA (320x240)</button>

diff --git a/src/content/getusermedia/resolution/js/main.js b/src/content/getusermedia/resolution/js/main.js
@@ -31,6 +31,8 @@ const aspectLock = document.querySelector('#aspectlock');
 const sizeLock = document.querySelector('#sizelock');
 const pauseVideo = document.querySelector('#pausevideo');
 
+const videoSelect = document.querySelector('select#videoSource');
+
 let currentWidth = 0;
 let currentHeight = 0;
 
@@ -114,6 +116,28 @@ const eightKConstraints = {
   video: {width: {exact: 7680}, height: {exact: 4320}}
 };
 
+function gotDevices(deviceInfos) {
+  // Handles being called several times to update labels. Preserve values.
+  while (videoSelect.firstChild) {
+    videoSelect.removeChild(videoSelect.firstChild);
+  }
+  for (let i = 0; i !== deviceInfos.length; ++i) {
+    const deviceInfo = deviceInfos[i];
+    const option = document.createElement('option');
+    option.value = deviceInfo.deviceId;
+    if (deviceInfo.kind === 'videoinput') {
+      option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
+      videoSelect.appendChild(option);
+    }
+  }
+}
+
+function handleError(error) {
+  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
+}
+
+navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
+
 function gotStream(mediaStream) {
   stream = window.stream = mediaStream; // stream available to console
   video.srcObject = mediaStream;
@@ -212,6 +236,8 @@ function getMedia(constraints) {
 
   clearErrorMessage();
   videoblock.style.display = 'none';
+  constraints.video.deviceId = {exact: videoSelect.value};
+  console.log('getUserMedia constraints: ' + JSON.stringify(constraints));
   navigator.mediaDevices.getUserMedia(constraints)
       .then(gotStream)
       .catch(e => {