audio & video devices select.

src/page/components/media.vue

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