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

Attempt to show webcam devices before initial broadcast

Browse Source
This commit is contained in:
Noah 2023-08-17 19:15:26 -07:00
parent 664eeaa068
commit 802f4d744c
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1413,6 +1413,16 @@ const app = Vue.createApp({
startVideo({force=false, changeCamera=false}) { startVideo({force=false, changeCamera=false}) {
if (this.webcam.busy) return; 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 we are running in PermitNSFW mode, show the user the modal.
if (this.config.permitNSFW && !force) { if (this.config.permitNSFW && !force) {
this.nsfwModalCast.visible = true; 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 }; mediaParams.video.deviceId = { exact: this.webcam.videoDeviceID };
}
if (this.webcam.audioDeviceID) {
mediaParams.audio = { mediaParams.audio = {
deviceId: { exact: this.webcam.audioDeviceID }, deviceId: { exact: this.webcam.audioDeviceID },
}; };
@ -1496,6 +1508,10 @@ const app = Vue.createApp({
this.webcam.videoDevices = []; this.webcam.videoDevices = [];
this.webcam.audioDevices = []; this.webcam.audioDevices = [];
devices.forEach(device => { 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') { if (device.kind === 'videoinput') {
// console.log(`Video device ${device.deviceId} ${device.label}`); // console.log(`Video device ${device.deviceId} ${device.label}`);
this.webcam.videoDevices.push({ this.webcam.videoDevices.push({

32
web/templates/chat.html
View File

@ -402,6 +402,38 @@
</label> </label>
</div> </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="field">
<div class="control has-text-centered"> <div class="control has-text-centered">
<button type="button" <button type="button"