Attempt to show webcam devices before initial broadcast

Este commit está contenido en:
Noah 2023-08-17 19:15:26 -07:00
padre 664eeaa068
commit 802f4d744c
Se han modificado 2 ficheros con 50 adiciones y 2 borrados

Ver fichero

@ -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({

Ver fichero

@ -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"