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

Posted 2021-08-24 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
};

开始采集音视频

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));
}

远端播放视频

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);
}

其他方法

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;
}