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> <template>
<div class="media" style="width: 100%"> <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-if="micTracks.length == 0" @click="addMicrophone">Add microphone</button>
<button v-else @click="stopMicrophone">Stop 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 /> <br />
<audio v-show="micTracks.length > 0" ref="audio" controls /> <audio v-show="micTracks.length > 0" ref="audio" controls />
<hr /> <hr />
<button v-if="camTracks.length == 0" @click="addWebcam">Add webcam</button> <button v-if="camTracks.length == 0" @click="addWebcam">Add webcam</button>
<button v-else @click="stopWebcam">Stop 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 /> <br />
<video v-show="camTracks.length > 0" ref="video" controls /> <video v-show="camTracks.length > 0" ref="video" controls />
<br />
<p>Video must be enabled and supported by the server.</p>
</div> </div>
</template> </template>
@ -32,21 +52,40 @@
@Ref('audio') readonly _audio!: HTMLAudioElement @Ref('audio') readonly _audio!: HTMLAudioElement
@Ref('video') readonly _video!: HTMLVideoElement @Ref('video') readonly _video!: HTMLVideoElement
private audioDevice: string = ''
private audioDevices: MediaDeviceInfo[] = []
private micTracks: MediaStreamTrack[] = [] private micTracks: MediaStreamTrack[] = []
private micSenders: RTCRtpSender[] = [] private micSenders: RTCRtpSender[] = []
private videoDevice: string = ''
private videoDevices: MediaDeviceInfo[] = []
private camTracks: MediaStreamTrack[] = [] private camTracks: MediaStreamTrack[] = []
private camSenders: RTCRtpSender[] = [] 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() { async addMicrophone() {
this.micTracks = [] this.micTracks = []
this.micSenders = [] this.micSenders = []
try { 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 this._audio.srcObject = stream
console.log('Got MediaStream:', stream) console.log('Got MediaStream:', stream)
@ -85,19 +124,26 @@
this.micSenders = [] 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() { async addWebcam() {
this.camTracks = [] this.camTracks = []
this.camSenders = [] this.camSenders = []
try { try {
const stream = await navigator.mediaDevices.getUserMedia({ let video = {
video: { width: 1280,
width: 1280, height: 720,
height: 720, } as MediaTrackConstraints
}, if (this.videoDevice != '') {
audio: false, video.deviceId = this.videoDevice
}) }
const stream = await navigator.mediaDevices.getUserMedia({ video, audio: false })
this._video.srcObject = stream this._video.srcObject = stream
console.log('Got MediaStream:', stream) console.log('Got MediaStream:', stream)
@ -135,11 +181,5 @@
this.camTracks = [] this.camTracks = []
this.camSenders = [] 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> </script>