前端修仙路 - WebRTC之设备管理

WebRTC-设备管理

WebRTC（Web Real-Time Communications）是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。

本文主要介绍关于摄像头、麦克风，扬声器、屏幕共享相关控制和调用。

申请权限与设备开启

// getUserMedia获取设备流的同时，浏览器会发起权限申请。
navigator.mediaDevices.getUserMedia({
   audio:true,video:true}).then((stream)=>{
   
    // 通过流，获取所有轨道，并终止监听，因为此处仅是为了提前获取权限，所以不需要一开始就监听音视频流
    stream.getTracks().forEach((track)=>{
   
        track.stop()
    })
}).catch(function (err) {
   
    /* 处理 error */
  })

• 火狐浏览器终止流后无法获取设备列表具体信息，如果需要获取设备列表的，enumerateDevices获取完后再调用track.stop()终止监听。
• https站点，或localhost才支持摄像头麦克风的获取，也可以通过配置浏览器设置，跳过校验。

获取设备列表

// 枚举获取所有设备列表，包含扬声器，
navigator.mediaDevices
    .enumerateDevices()
    .then((devices) => {
   
        devices.forEach((device) => {
   
        // kind 设备类型，"videoinput" 摄像头  "audioinput" 麦克风  "audiooutput" 扬声器
        // label 设备名
        // deviceId 设备id
        console.log(`${
     device.kind}: ${
     device.label} id = ${
     device.deviceId}`);
        });
    })
    .catch((err) => {
   
        console.error(`${
     err.name}: ${
     err.message}`);
    });
// output:
// videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
// audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
// audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=

• 注意，获取设备列表需要先调navigator.mediaDevices.getUserMedia申请权限，否则有可能拿不到设备label名字。

设备开启（监听音视频流）

// getUserMedia获取设备流的同时，浏览器会发起权限申请。
navigator.mediaDevices.getUserMedia({
   audio:true,video:true}).then((stream)=>{
   
   console.log(stream)
}).catch(function (err) {
   
    /* 处理 error */
  })

• getUserMedia(constraints:MediaStreamConstraints):Promise
  • MediaStreamConstraints 媒体约束对象，指定了请求的媒体类型和相对应的参数，可以调navigator.mediaDevices.getSupportedConstraints()` 查看支持的属性。
    • 常见用法如下：

        // audio 开启麦克风  video 开启摄像头
        getUserMedia({
           audio:true,video:true})
    

    • 也可以传对象，属性为MediaStreamConstraints支持的属性

        // audio 开启麦克风  video 开启摄像头
        getUserMedia({
           
            audio: {
           
                // deviceId:'',
                echoCancellation: true, //音频开启回音消除
                // noiseSuppression: true, // 开启降噪
                // autoGainControl: true // 开启自动增益功能
                },
            video: {
           
                // deviceId:'' // 如果有多个设备，可以指定开启哪个设备
                width: 1280,  // 获取的视频流宽度
                height: 720,  // 获取的视频流高度
                // facingMode:'user'  // 移动端调用前置摄像头
                // facingMode: { exact: "environment" } 移动端调用后置摄像头 
            }
        })
    

设备关闭

// getUserMedia获取设备流的同时，浏览器会发起权限申请。
// navigator.mediaDevices.getUserMedia({audio:true,video:true}).then((stream)=>{
   
    // 获取所有轨道，包含视频轨道和音频轨道
   stream.getTracks().forEach((track)=>{
   
        track.stop()
    })
    // stream.getAudioTracks()  仅获取所有音频轨道
    // stream.getVideoTracks()  仅获取所有视频轨道
    // stream.addTrack(track) 添加轨道
    // stream.removeTrack(track) 移除轨道
// }).catch(function (err) {
   
    /* 处理 error */
//   })

• stream:MediaStream 媒体流对象，通过getUserMedia获取，相关api和属性点击查看
• 流对象也可以给video标签进行预览

const video = document.querySelector('video')
video.srcObject =