5-1 【基础铺垫，学前有概念】WebRTC获取音视频设备

图片.png
图片.png

5-2 【实战】在页面中显示获取到的设备

public下面新建目录device，新建文件
图片.png

代码
index.html

  1. <html>
  2.     <head>
  3.         <title> WebRTC get audio and video devices</title>
  4.     </head>
  5.     <body>
  6.         <div>
  7.             <label>audio input device:</label>
  8.             <select id="audioSource"></select>
  9.         </div>
  10.         <div>
  11.             <label>audio output device:</label>
  12.             <select id="audioOutput"></select>
  13.         </div>
  14.         <div>
  15.             <label>video input device:</label>
  16.             <select id="videoSource"></select>
  17.         </div>
  19.         <script src="./js/client.js"></script>
  20.     </body>
  21. </html>

client.js

  1. 'use strict'
  2. var audioSource  = document.querySelector("select#audioSource");
  3. var audioOutput  = document.querySelector("select#audioOutput");
  4. var videoSource  = document.querySelector("select#videoSource");
  6. if(!navigator.mediaDevices ||
  7.     !navigator.mediaDevices.enumerateDevices){
  8.     console.log('enumerateDevices is not supported!');
  9. }else {
  10.     navigator.mediaDevices.enumerateDevices()
  11.         .then(gotDevices)
  12.         .catch(handleError);
  13. }
  15. function gotDevices(deviceInfos){
  16.     deviceInfos.forEach( function(deviceInfo){
  17.         console.log(deviceInfo.kind + ": label = " 
  18.                 + deviceInfo.label + ": id = "
  19.                 + deviceInfo.deviceId + ": groupId = "
  20.                 + deviceInfo.groupId);    
  21.         var option = document.createElement('option');
  22.         option.text = deviceInfo.label;
  23.         option.value = deviceInfo.deviceId;
  24.         if(deviceInfo.kind === 'audioinput'){
  25.             audioSource.appendChild(option);
  26.         }else if(deviceInfo.kind === 'audiooutput'){
  27.             audioOutput.appendChild(option);
  28.         }else if(deviceInfo.kind === 'videoinput'){
  29.             videoSource.appendChild(option);
  30.         }
  31.     });
  33. }
  35. function handleError(err){
  36.     console.log(err.name + " : " + err.message);
  37. }

http查看
图片.png

需要使用https才能查看
图片.png
图片.png