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

Posted 2021-09-07 anyRTC

流程简介

• 通过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();
    const videoTracks = window.localStream.getVideoTracks();
    if (audioTracks.length > 0) {
        console.log(`Using audio device: ${audioTracks[0].label}`);
    }
    if (videoTracks.length > 0) {
        console.log(`Using video device: ${videoTracks[0].label}`);
    }
    const servers = null;
    pc1Local = new RTCPeerConnection(servers);
    pc1Remote = new RTCPeerConnection(servers);
    pc1Remote.ontrack = gotRemoteStream1;
    pc1Local.onicecandidate = iceCallback1Local;
    pc1Remote.onicecandidate = iceCallback1Remote;

    pc2Local = new RTCPeerConnection(servers);
    pc2Remote = new RTCPeerConnection(servers);
    pc2Remote.ontrack = gotRemoteStream2;
    pc2Local.onicecandidate = iceCallback2Local;
    pc2Remote.onicecandidate = iceCallback2Remote;

    window.localStream.getTracks().forEach(track => pc1Local.addTrack(track, window.localStream));
    pc1Local
        .createOffer(offerOptions)
        .then(gotDescription1Local, onCreateSessionDescriptionError);

    window.localStream.getTracks().forEach(track => pc2Local.addTrack(track, window.localStream));
    pc2Local.createOffer(offerOptions)
        .then(gotDescription2Local, onCreateSessionDescriptionError);
}

其他方法

RTCPeerConnection.setRemoteDescription() 方法改变与连接相关的描述，该描述主要是描述有些关于连接的属性，例如对端使用的解码器。 连接受此更改影响，并且必须能够支持旧的和新的描述。 方法带三个参数，RTCSessionDescription 对象用于设置，然后是更改成功的回调方法，一个是更改失败的回调方法。

该RTCPeerConnection方法 setLocalDescription()更改与连接关联的本地描述。此描述指定连接本地端的属性，包括媒体格式。该方法接受一个参数——会话描述——并且它返回一个Promise，一旦描述被改变，它就会异步地完成,如果setLocalDescription()在连接已经就位时调用，则表示正在进行重新协商（可能是为了适应不断变化的网络条件）。由于描述会在两个对等体就配置达成一致之前进行交换，因此通过调用提交的描述setLocalDescription()不会立即生效。相反，在协商完成之前，当前的连接配置将保持不变。只有这样，商定的配置才会生效。

function onCreateSessionDescriptionError(error) {
    console.log(`Failed to create session description: ${error.toString()}`);
}

function gotDescription1Local(desc) {
    pc1Local.setLocalDescription(desc);
    pc1Remote.setRemoteDescription(desc);
    pc1Remote.createAnswer().then(gotDescription1Remote, onCreateSessionDescriptionError);
}

function gotDescription1Remote(desc) {
    pc1Remote.setLocalDescription(desc);
    console.log(`Answer from pc1Remote\\n${desc.sdp}`);
    pc1Local.setRemoteDescription(desc);
}

function gotDescription2Local(desc) {
    pc2Local.setLocalDescription(desc);
    pc2Remote.setRemoteDescription(desc);
    pc2Remote.createAnswer().then(gotDescription2Remote, onCreateSessionDescriptionError);
}

function gotDescription2Remote(desc) {
    pc2Remote.setLocalDescription(desc);
    pc2Local.setRemoteDescription(desc);
}

function hangup() {
    console.log('Ending calls');
    pc1Local.close();
    pc1Remote.close();
    pc2Local.close();
    pc2Remote.close();
    pc1Local = pc1Remote = null;
    pc2Local = pc2Remote = null;
    hangupButton.disabled = true;
    callButton.disabled = false;
}

function gotRemoteStream1(e) {
    if (video2.srcObject !== e.streams[0]) {
        video2.srcObject = e.streams[0];
        console.log('pc1: received remote stream');
    }
}

function gotRemoteStream2(e) {
    if (video3.srcObject !== e.streams[0]) {
        video3.srcObject = e.streams[0];
    }
}

function iceCallback1Local(event) {
    handleCandidate(event.candidate, pc1Remote, 'pc1: ', 'local');
}

function iceCallback1Remote(event) {
    handleCandidate(event.candidate, pc1Local, 'pc1: ', 'remote');
}

function iceCallback2Local(event) {
    handleCandidate(event.candidate, pc2Remote, 'pc2: ', 'local');
}

function iceCallback2Remote(event) {
    handleCandidate(event.candidate, pc2Local, 'pc2: ', 'remote');
}

function handleCandidate(candidate, dest, prefix, type) {
    dest.addIceCandidate(candidate)
        .then(onAddIceCandidateSuccess, onAddIceCandidateError);
}

function onAddIceCandidateSuccess() {
    console.log('AddIceCandidate success.');
}

function onAddIceCandidateError(error) {
    console.log(`Failed to add ICE candidate: ${error.toString()}`);
}

html

<div id="container">
    <video id="video1" playsinline autoplay muted></video>
    <video id="video2" playsinline autoplay></video>
    <video id="video3" playsinline autoplay></video>
    
    <div>
        <button id="startButton">Start</button>
        <button id="callButton">Call</button>
        <button id="hangupButton">Hang Up</button>
    </div>
</div>

CSS

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 1em;
    word-break: break-word;
}
button {
    background-color: #d84a38;
    border: none;
    border-radius: 2px;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8em;
    margin: 0 0 1em 0;
    padding: 0.5em 0.7em 0.6em 0.7em;
}
button:active {
    background-color: #cf402f;
}
button:hover {
    background-color: #cf402f;
}
button[disabled] {
    color: #ccc;
}
button[disabled]:hover {
    background-color: #d84a38;
}

div#container {
    margin: 0 auto 0 auto;
    max-width: 60em;
    padding: 1em 1.5em 1.3em 1.5em;
}
video {
    background: #222;
    margin: 0 0 20px 0;
    --width: 100%;
    width: var(--width);
    height: calc(var(--width) * 0.75);
}
button {
    margin: 0 20px 0 0;
    width: 83px;
}
button#hangupButton {
    margin: 0;
}
video {
    margin: 0 0 20px 0;
    --width: 40%;
    width: var(--width);
    height: calc(var(--width) * 0.75);
}
#video1 {
    margin: 0 20px 20px 0;
}