Day25 [实作] 一对一视讯通话(5): 切换设备

如果我们的电脑有两个摄影机，就会有切换装置的需求，今天我们就来加入这个功能

1. 在 index.html 增加两个 select 用来选择设备

   <div>
     <label>切换麦克风:</label>
     <select id="audioSource"></select>
   </div>
   
   <div>
     <label>切换摄影机:</label>
     <select id="videoSource"></select>
   </div>
   

2. 在 main.js 增加切换设备会使用到的标签

   // 切换设备
   const audioInputSelect = document.querySelector('select#audioSource')
   const videoSelect = document.querySelector('select#videoSource')
   const selectors = [audioInputSelect, videoSelect]
   

3. 读取设备并将设备加入 select 的选项中

   // 将读取到的设备加入到 select 标签中
   function gotDevices(deviceInfos) {
     // Handles being called several times to update labels. Preserve values.
     const values = selectors.map((select) => select.value)
     selectors.forEach((select) => {
       while (select.firstChild) {
         select.removeChild(select.firstChild)
       }
     })
     for (let i = 0; i !== deviceInfos.length; ++i) {
       const deviceInfo = deviceInfos[i]
       const option = document.createElement('option')
       option.value = deviceInfo.deviceId
       if (deviceInfo.kind === 'audioinput') {
         option.text =
           deviceInfo.label || `microphone ${audioInputSelect.length + 1}`
         audioInputSelect.appendChild(option)
       }else if (deviceInfo.kind === 'videoinput') {
         option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`
         videoSelect.appendChild(option)
       } else {
         console.log('Some other kind of source/device: ', deviceInfo)
       }
     }
     selectors.forEach((select, selectorIndex) => {
       if (
         Array.prototype.slice
           .call(select.childNodes)
           .some((n) => n.value === values[selectorIndex])
       ) {
         select.value = values[selectorIndex]
       }
     })
   }
   
   // 读取设备
   navigator.mediaDevices
     .enumerateDevices()
     .then(gotDevices)
     .catch((err) => {
       console.error('Error happens:', err)
     })
   

4. 选取设备後切换标签并将切换後的媒体传送给对方，这边使用 replaceTrack 去替换 track 不需要重新做协商

   audioInputSelect.onchange = () => {
     switchDevice(true)
   }
   videoSelect.onchange = () => {
     switchDevice(false)
   }
   
   async function switchDevice(isAudio) {
     if (!peerConn) return
     const audioSource = audioInputSelect.value
     const videoSource = videoSelect.value
     const constraints = {
       audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
       video: { deviceId: videoSource ? { exact: videoSource } : undefined },
     }
     const stream = await navigator.mediaDevices.getUserMedia(constraints)
     let track = stream[isAudio ? 'getAudioTracks' : 'getVideoTracks']()[0]
     let sender = peerConn.getSenders().find(function (s) {
       return s.track.kind == track.kind
     })
     console.log('found sender:', sender)
     sender.replaceTrack(track)
   
     localStream = stream
     localVideo.srcObject = stream
   }