apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Refresh video devices on demand

Browse Source
This commit is contained in:
Noah 2023-08-17 18:45:43 -07:00
parent 0a4fa00087
commit 664eeaa068
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/static/js/BareRTC.js
View File

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

7
web/templates/chat.html
View File

@ -296,6 +296,13 @@
<h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0"> <h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
Webcam Devices 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> </h3>
<div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0"> <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">