Refresh video devices on demand

web/static/js/BareRTC.js

@@ -150,6 +150,7 @@ const app = Vue.createApp({
                 ],
 
                 // Available cameras and microphones for the Settings modal.
+                gettingDevices: false, // busy indicator for refreshing devices
                 videoDevices: [],
                 videoDeviceID: null,
                 audioDevices: [],
@@ -1488,6 +1489,9 @@ const app = Vue.createApp({
                 return;
             }
 
+            if (this.webcam.gettingDevices) return;
+            this.webcam.gettingDevices = true;
+
             navigator.mediaDevices.enumerateDevices().then(devices => {
                 this.webcam.videoDevices = [];
                 this.webcam.audioDevices = [];
@@ -1508,6 +1512,11 @@ const app = Vue.createApp({
                 })
             }).catch(err => {
                 this.ChatClient(`Error listing your cameras and microphones: ${err.name}: ${err.message}`);
+            }).finally(() => {
+                // In the settings modal, let the spinner spin for a moment.
+                setTimeout(() => {
+                    this.webcam.gettingDevices = false;
+                }, 500);
             })
         },
 

web/templates/chat.html

@@ -296,6 +296,13 @@
 
                         <h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
                             Webcam Devices
+                            <button type="button" class="button is-primary is-small is-outlined ml-2"
+                                @click="getDevices()"
+                                title="Refresh list of devices">
+                                <i class="fa fa-arrows-rotate"
+                                    :class="{'fa-spin': webcam.gettingDevices}">
+                                </i>
+                            </button>
                         </h3>
                         <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">