web技术分享| 实现WebRTC多个对等连接

流程简介

• 通过MediaDevices.getUserMedia()获取音频和视频轨道。

• 通过createOffer()启动与远程对等方的新 WebRTC 连接。

• 用信令通信上传错误并控制启动或关闭会话。

• 互换媒体和客户端信息

初始化操作元素

const startButton = document.getElementById('startButton');
const callButton = document.getElementById('callButton');
const hangupButton = document.getElementById('hangupButton');
const video1 = document.querySelector('video#video1');
const video2 = document.querySelector('video#video2');
const video3 = document.querySelector('video#video3');
callButton.disabled = true;
hangupButton.disabled = true;
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;
let pc1Local;
let pc1Remote;
let pc2Local;
let pc2Remote;
const offerOptions = {
   
    offerToReceiveAudio: 1,
    offerToReceiveVideo: 1
};

开始采集音视频

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

function start() {
   
    startButton.disabled = true;
    navigator.mediaDevices
        .getUserMedia({
   
            audio: true,
            video: true
        })
        .then(stream => {
   
            video1.srcObject = stream;
            window.localStream = stream;
            callButton.disabled = false;
        })
        .catch(e => console.log(e));
}

远端播放视频

RTCPeerConnection()构造函数，返回一个新建的 RTCPeerConnection实例，它代表了本地端机器与远端机器的一条连接，接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建，保持，监控，关闭连接的方法的实现。

该接口的createOffer() 方法RTCPeerConnection启动SDP报价的创建，目的是启动与远程对等方的新 WebRTC 连接。SDP 报价包括有关MediaStreamTrack已附加到 WebRTC 会话、编解码器和浏览器支持的选项的任何对象的信息，以及ICE代理已收集的任何候选对象的信息，目的是通过信令通道发送给潜在的对等方以进行请求连接或更新现有连接的配置，返回值是 Promise，在创建报价后，将使用RTCSessionDescription包含新创建的报价的对象解析该值。

function call() {
   
    callButton.disabled = true;
    hangupButton.disabled = false;
    const audioTracks = window.localStream.getAudioTracks(