audio & video devices select.

This commit is contained in:
Miroslav Šedivý 2023-04-30 23:57:39 +02:00
parent b14ade4f36
commit 2ee592baf3

View File

@ -1,20 +1,40 @@
<template>
<div class="media" style="width: 100%">
<!--
<button @click="getDevices">List available devices</button>
<button v-for="d in devices" :key="d.deviceId">
{{ d.kind }} : {{ d.label }} id = {{ d.deviceId }}
</button>
-->
<button v-if="micTracks.length == 0" @click="addMicrophone">Add microphone</button>
<button v-else @click="stopMicrophone">Stop microphone</button>
<select v-model="audioDevice">
<option value="">Default microphone</option>
<option v-for="device in audioDevices" :key="device.deviceId" :value="device.deviceId">
{{ device.label || 'Unnamed input' }}
</option>
</select>
<i
style="margin: 0 5px; cursor: pointer"
class="fa fa-refresh"
title="Reload audio devices"
@click="loadAudioDevices"
></i>
<br />
<audio v-show="micTracks.length > 0" ref="audio" controls />
<hr />
<button v-if="camTracks.length == 0" @click="addWebcam">Add webcam</button>
<button v-else @click="stopWebcam">Stop webcam</button>
<select v-model="videoDevice">
<option value="">Default webcam</option>
<option v-for="device in videoDevices" :key="device.deviceId" :value="device.deviceId">
{{ device.label || 'Unnamed input' }}
</option>
</select>
<i
style="margin: 0 5px; cursor: pointer"
class="fa fa-refresh"
title="Reload video devices"
@click="loadVideoDevices"
></i>
<br />
<video v-show="camTracks.length > 0" ref="video" controls />
<br />
<p>Video must be enabled and supported by the server.</p>
</div>
</template>
@ -32,21 +52,40 @@
@Ref('audio') readonly _audio!: HTMLAudioElement
@Ref('video') readonly _video!: HTMLVideoElement
private audioDevice: string = ''
private audioDevices: MediaDeviceInfo[] = []
private micTracks: MediaStreamTrack[] = []
private micSenders: RTCRtpSender[] = []
private videoDevice: string = ''
private videoDevices: MediaDeviceInfo[] = []
private camTracks: MediaStreamTrack[] = []
private camSenders: RTCRtpSender[] = []
//private devices: any[] = []
mounted() {
this.loadAudioDevices()
this.loadVideoDevices()
}
async loadAudioDevices() {
let devices = await navigator.mediaDevices.enumerateDevices()
this.audioDevices = devices.filter((device) => device.kind === 'audioinput')
console.log('audioDevices', this.audioDevices)
}
async addMicrophone() {
this.micTracks = []
this.micSenders = []
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true })
let audio = { echoCancellation: true } as MediaTrackConstraints
if (this.audioDevice != '') {
audio.deviceId = this.audioDevice
}
const stream = await navigator.mediaDevices.getUserMedia({ video: false, audio })
this._audio.srcObject = stream
console.log('Got MediaStream:', stream)
@ -85,19 +124,26 @@
this.micSenders = []
}
async loadVideoDevices() {
let devices = await navigator.mediaDevices.enumerateDevices()
this.videoDevices = devices.filter((device) => device.kind === 'videoinput')
console.log('videoDevices', this.videoDevices)
}
async addWebcam() {
this.camTracks = []
this.camSenders = []
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
width: 1280,
height: 720,
},
audio: false,
})
let video = {
width: 1280,
height: 720,
} as MediaTrackConstraints
if (this.videoDevice != '') {
video.deviceId = this.videoDevice
}
const stream = await navigator.mediaDevices.getUserMedia({ video, audio: false })
this._video.srcObject = stream
console.log('Got MediaStream:', stream)
@ -135,11 +181,5 @@
this.camTracks = []
this.camSenders = []
}
/*async getDevices() {
const devices = await navigator.mediaDevices.enumerateDevices();
this.devices = devices.map(({ kind, label, deviceId }) => ({ kind, label, deviceId }))
console.log(this.devices)
}*/
}
</script>