Attempt to show webcam devices before initial broadcast

web/static/js/BareRTC.js

@@ -1413,6 +1413,16 @@ const app = Vue.createApp({
         startVideo({force=false, changeCamera=false}) {
             if (this.webcam.busy) return;
 
+            // Before they go on cam the first time, ATTEMPT to get their device names.
+            // - If they had never granted permission, we won't get the names of
+            //   the devices and no big deal.
+            // - If they had given permission before, we can present a nicer experience
+            //   for them and enumerate their devices before they go on originally.
+            if (!changeCamera) {
+                // Initial broadcast: did they select device IDs?
+                this.getDevices();
+            }
+
             // If we are running in PermitNSFW mode, show the user the modal.
             if (this.config.permitNSFW && !force) {
                 this.nsfwModalCast.visible = true;
@@ -1427,9 +1437,11 @@ const app = Vue.createApp({
                 },
             };
 
-            if (changeCamera) {
+            // Name the specific devices chosen by the user.
-                // Name the specific devices chosen by the user.
+            if (this.webcam.videoDeviceID) {
                 mediaParams.video.deviceId = { exact: this.webcam.videoDeviceID };
+            }
+            if (this.webcam.audioDeviceID) {
                 mediaParams.audio = {
                     deviceId: { exact: this.webcam.audioDeviceID },
                 };
@@ -1496,6 +1508,10 @@ const app = Vue.createApp({
                 this.webcam.videoDevices = [];
                 this.webcam.audioDevices = [];
                 devices.forEach(device => {
+                    // If we can't get the device label, disregard it.
+                    // It can happen if the user has not yet granted permission.
+                    if (!device.label) return;
+
                     if (device.kind === 'videoinput') {
                         // console.log(`Video device ${device.deviceId} ${device.label}`);
                         this.webcam.videoDevices.push({

web/templates/chat.html

@@ -402,6 +402,38 @@
                         </label>
                     </div>
 
+                    <!-- Device Pickers: just in case the user had granted video permission in the past,
+                         and we are able to enumerate their device names, we can show them here before they
+                         go on this time.-->
+                    <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
+
+                        <div class="column">
+                            <label class="label">Video source</label>
+                            <div class="select is-fullwidth">
+                                <select v-model="webcam.videoDeviceID">
+                                    <option :value="null" disabled selected>Select default camera</option>
+                                    <option v-for="(d, i) in webcam.videoDevices"
+                                        :value="d.id">
+                                        [[ d.label || `Camera ${i}` ]]
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="column">
+                            <label class="label">Audio source</label>
+                            <div class="select is-fullwidth">
+                                <select v-model="webcam.audioDeviceID">
+                                    <option :value="null" disabled selected>Select default microphone</option>
+                                    <option v-for="(d, i) in webcam.audioDevices"
+                                        :value="d.id">
+                                        [[ d.label || `Microphone ${i}` ]]
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="field">
                         <div class="control has-text-centered">
                             <button type="button"