From c65f778b5b01545cb2d656d28941e1d693708766 Mon Sep 17 00:00:00 2001
From: Markus Handell <handellm@google.com>
Date: Wed, 4 Sep 2024 17:14:39 +0200
Subject: [PATCH 1/2] Add camera selector.

---
 .../getusermedia/resolution/index.html        |  4 ++-
 .../getusermedia/resolution/js/main.js        | 26 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/content/getusermedia/resolution/index.html b/src/content/getusermedia/resolution/index.html
index e9f1d84bb..3ec2a8cf8 100644
--- 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
index 61be72060..82242649f 100644
--- 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(select.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 => {

From ae937a2ec6dab9e825bbef52dc65515acf530bc8 Mon Sep 17 00:00:00 2001
From: Markus Handell <handellm@google.com>
Date: Wed, 4 Sep 2024 17:17:10 +0200
Subject: [PATCH 2/2] fix

---
 src/content/getusermedia/resolution/js/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/getusermedia/resolution/js/main.js b/src/content/getusermedia/resolution/js/main.js
index 82242649f..9ab203688 100644
--- a/src/content/getusermedia/resolution/js/main.js
+++ b/src/content/getusermedia/resolution/js/main.js
@@ -119,7 +119,7 @@ const eightKConstraints = {
 function gotDevices(deviceInfos) {
   // Handles being called several times to update labels. Preserve values.
   while (videoSelect.firstChild) {
-    videoSelect.removeChild(select.firstChild);
+    videoSelect.removeChild(videoSelect.firstChild);
   }
   for (let i = 0; i !== deviceInfos.length; ++i) {
     const deviceInfo = deviceInfos[i];