8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话

Posted 2022-05-18 autofelix

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了8┃音视频直播系统之 WebRTC 信令系统实现以及通讯核心并实现视频通话相关的知识，希望对你有一定的参考价值。

〝古人学问遗无力，少壮功夫老始成〞

随着5G技术的发展，音视频直播领域发生了翻天覆地的变化，尤其是 2011 年 Google 推出 WebRTC 技术后，大大降低了音视频技术的门槛，你再也不必自己去实现回音消除算法了，也不用自己去实现各种音视频的编解码器了，更不必去考虑跨平台的问题了。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、信令系统

二、RTCPeerConnection

三、实现视频通话

四、视频通话流程详解

一、信令系统

信令系统主要用来进行信令的交换
在通信双方彼此连接、传输媒体数据之前，它们要通过信令服务器交换一些信息，如规范协商
若 A 与 B 要进行音视频通信，那么 A 要知道 B 已经上线了，同样，B 也要知道 A 在等着与它通信呢
只有双方都知道彼此存在，才能由一方向另一方发起音视频通信请求，并最终实现音视频通话
客户端代码如下：
第一步：首先弹出一个输入框，要求用户写入要加入的房间
第二步：通过 io.connect() 建立与服务端的连接
第三步：再根据 socket 返回的消息做不同的处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信令系统</title>
</head>

<body>

</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    var isInitiator;

    // 弹出一个输入窗口
    room = prompt('Enter room name:');

    // 与服务端建立 socket 连接
    const socket = io.connect();

    // 如果房间不空，则发送 "create or join" 消息
    if (room !== '') 
        console.log('Joining room ' + room);
        socket.emit('create or join', room);
    

    // 如果从服务端收到 "full" 消息
    socket.on('full', (room) => 
        console.log('Room ' + room + ' is full');
    );

    // 如果从服务端收到 "empty" 消息
    socket.on('empty', (room) => 
        isInitiator = true;
        console.log('Room ' + room + ' is empty');
    );

    // 如果从服务端收到 “join" 消息
    socket.on('join', (room) => 
        console.log('Making request to join room ' + room);
        console.log('You are the initiator!');
    );

    // 如果从服务端收到 “log" 消息
    socket.on('log', (array) => 
        console.log.apply(console, array);
    );
</script>

</html>

服务端代码如下：
需要通过 npm install socket.io 安装socket模块
需要通过 npm install node-static 安装socket模块，使服务器具有发布静态文件的功能
服务端侦听 2022 这个端口，对不同的消息做相应的处理

const static = require('node-static');
const http = require('http');
const file = new (static.Server)();

const app = http.createServer(function (req, res) 
    file.serve(req, res);
).listen(2022);

// 侦听 2022
const io = require('socket.io').listen(app);

io.sockets.on('connection', (socket) => 
    // convenience function to log server messages to the client
    function log() 
        const array = ['>>> Message from server: '];
        for (var i = 0; i < arguments.length; i++) 
            array.push(arguments[i]);
        
        socket.emit('log', array);
    

    socket.on('message', (message) => 
        // 收到 message 时，进行广播
        log('Got message:', message);
        // for a real app, would be room only (not broadcast)
        socket.broadcast.emit('message', message); // 在真实的应用中，应该只在房间内广播
    );

    socket.on('create or join', (room) => 
        // 收到 “create or join” 消息
        var clientsInRoom = io.sockets.adapter.rooms[room];
        var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;

        log('Room ' + room + ' has ' + numClients + ' client(s)');
        log('Request to create or join room ' + room);

        if (numClients === 0) 
            // 如果房间里没人
            socket.join(room);
            // 发送 "created" 消息
            socket.emit('created', room);
         else if (numClients === 1) 
            // 如果房间里有一个人
            io.sockets.in(room).emit('join', room);
            socket.join(room);
            // 发送 “joined”消息
            socket.emit('joined', room);
         else 
            // max two clients
            // 发送 "full" 消息
            socket.emit('full', room);
        

        socket.emit('emit(): client ' + socket.id + ' joined room ' + room);
        socket.broadcast.emit('broadcast(): client ' + socket.id + ' joined room ' + room);
    );
);

二、RTCPeerConnection

RTCPeerConnection 类是在浏览器下使用 WebRTC 实现 1 对 1 实时互动音视频系统最核心的类
它是WebRTC传输音视频和交换数据的API
RTCPeerConnection 就与普通的 socket 一样，在通话的每一端都至少有一个RTCPeerConnection 对象。在 WebRTC 中它负责与各端建立连接，接收、发送音视频数据，并保障音视频的服务质量

三、实现视频通话

为连接的每个端创建一个 RTCPeerConnection 对象，并且给 RTCPeerConnection 对象添加一个本地流，该流是从 getUserMedia() 获取的
获取本地媒体描述信息，即 SDP 信息，并与对端进行交换
获得网络信息，即 Candidate（IP 地址和端口），并与远端进行交换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现视频通话</title>
</head>

<body>
    <video id="localVideo" playsinline autoplay muted></video>
    <video id="remoteVideo" playsinline autoplay></video>

    <div class="box">
        <button onclick="start()">Start</button>
        <button onclick="call()">Call</button>
        <button onclick="hangup()">Hang Up</button>
    </div>
</body>
<script>
    // 获取元素
    var localVideo = document.getElementById('localVideo');
    var remoteVideo = document.getElementById('remoteVideo');

    // 定义全局变量
    var localStream;
    var pc1;
    var pc2;

    function start() 
        console.log('Requesting local stream');

        // 开始采集音视频
        navigator.mediaDevices.getUserMedia( audio: true, video: true )
            .then(function (stream) 
                // 这个全局localStream是为了后面我们去添加流用的
                localStream = stream;

                // 兼容性监测
                if (window.URL) 
                    // 挂在数据在本地播放
                    localVideo.src = window.URL.createObjectURL(stream)
                 else 
                    localVideo.srcObject = stream
                
            )
            .catch(function (e) 
                // 如果获取视频失败,在这里进行错误处理 
                console.dir(e);
                alert(`getUserMedia() error: $e.message`);
            );
    

    function call() 
        // 创建offerOption, 指定创建本地的媒体的时候，都包括哪些信息
        // 可以有视频流和音频流，因为我们这里没有采集音频所以offerToReceiveAudio是0
        var offerOptions = 
            offerToReceiveAudio: 0,
            offerToReceiveVideo: 1
        

        // 这里的 RTCPeerConnection 可以有可选参数, 进行一些网络传输的配置
        // 由于是我们在本机内进行传输，所以在这里我们就不需要设置参数, 所以它这里就会使用本机host类型的candidate
        pc1 = new RTCPeerConnection();
        pc1.onicecandidate = (e) => 
            console.log('pc1 ICE candidate:', e.candidate);

            // 我们A调用者收到candidate之后，它会将这个candidate发送给这个信令服务器
            // 那么信令服务器会中转到这个B端，那么这个B端会调用这个AddIceCandidate这个方法，将它存到对端的candidate List里去
            // 所以整个过程就是A拿到它所有的可行的通路然后都交给B，B形成一个列表
            // 那么B所以可行的通路又交给A，A拿到它的可行列表，然后双方进行这个连通性检测
            // 那么如果通过之后那就可以传数据了，就是这样一个过程
            // 所以我们收到这个candidate之后就要交给对方去处理，所以pc1要调用pc2的这个
            // 因为是本机这里就没有信令了，假设信令被传回来了，这时候就给了pc2
            // pc2收到这个candidate之后就调用addIceCandidate方法，传入的参数就是e.candidate
            pc2.addIceCandidate(e.candidate)
                .catch(function (e) 
                    console.log("Failed to call getUserMedia", e);
                );
        

        pc1.iceconnectionstatechange = (e) => 
            console.log(`pc1 ICE state: $pc.iceConnectionState`);
            console.log('ICE state change event: ', e);
        

        // 创建一个pc2这样我们就创建了两个连接
        pc2 = new RTCPeerConnection();

        // 对于pc2也是同样道理，那它就交给p1
        pc2.onicecandidate = (e) => 
            console.log('pc2 ICE candidate:', e.candidate);

            // 所以它就调用pc1.addIceCandidate
            pc1.addIceCandidate(e.candidate)
                .catch(function (e) 
                    console.log("Failed to call getUserMedia", e);
                );
        

        pc2.iceconnectionstatechange = (e) => 
            console.log(`pc2 ICE state: $pc.iceConnectionState`);
            console.log('ICE state change event: ', e);
        

        // pc2是被调用方，被调用方是接收数据的，所以对于pc2它还有个ontrack事件
        // 当双方通讯连接之后，当有流从对端过来的时候，会触发这个onTrack事件
        pc2.ontrack = gotRemoteStream;

        // 将本地采集的数据添加到第一添加到第一个pc1 = new RTCPeerConnection()中去
        // 这样在创建媒体协商的时候才知道我们有哪些媒体数据，这个顺序不能乱，必须要先添加媒体数据再做后面的逻辑
        // 另外不能先做媒体协商然后在添加数据，因为你先做媒体协商的时候它知道你这里没有数据那么在媒体协商的时候它就没有媒体流
        // 就是说在协商的时候它知道你是没有的，那么它在底层就不设置这些接收信息发收器，那么这个时候即使你后面设置了媒体流传给这个PeerConnection,它也不会进行传输的，所以我们要先添加流
        // 添加流也比较简单，通过localStream调用getTracks就能调用到所有的轨道(音频轨/视频轨)
        // 那对于每个轨道我们添加进去就完了，也就是forEach遍历进去，每次循环都能拿到一个track
        // 当我们拿到这个track之后直接调用pc1.addTrack添加就好了，第一个参数就是track，第二个参数就是这个track所在的流localStream
        // 这样就将本地所采集的音视频流添加到了pc1 这个PeerConnection
        localStream.getTracks().forEach((track) => 
            pc1.addTrack(track, localStream);
        );

        // 那么这个时候我们就可以去创建这个pc1去媒体协商了
        // 媒体协商第一步就是创建createOffer
        pc1.createOffer(offerOptions)
            .then(function (desc) 
                // 当我们拿到这个描述信息之后呢，还是回到我们当时协商的逻辑
                // 对于A来说它首先创建Offer,创建Offer之后它会调用setLocalDescription
                // 将它设置到这个PeerConnection当中去，那么这个时候它会触发底层的ICE的收集candidate的这个动作
                // 所以这里要调用pc1.setLocalDescription这个时候处理完了它就会收集candidate
                // 这个处理完了之后按照正常逻辑它应该send desc to signal到信令服务器
                pc1.setLocalDescription(desc);

                // 到了信令服务器之后，信令服务器会发给第二个人
                // 所以第二个人就会receive
                // 所以第二个人收到desc之后呢首先pc2要调用setRemoteDescription，这时候将desc设置成它的远端
                pc2.setRemoteDescription(desc);

                // 设成远端之后, pc2就要调用createAnswer
                pc2.createAnswer().then(function (desc) 
                    // 当远端它得到这个Answer之后，它也要设置它的setLocalDescription
                    // 当它调用了setLocalDescription之后它也开始收集candidate了
                    pc2.setLocalDescription(desc);

                    // 完了之后它去进行send desc to signal与pc1进行交换，pc1会接收recieve desc from signal
                    // 那么收到之后他就会设置这个pc1的setRemoteDescription
                    // 那么经过这样一个步骤整个协商就完成了
                    // 当所有协商完成之后，这些底层对candidate就收集完成了
                    // 收集完了进行交换形成对方的列表然后进行连接检测
                    // 连接检测完了之后就开始真正的数据发送过来了
                    pc1.setRemoteDescription(desc);
                )
                    .catch(function (e) 
                        console.log("Failed to call getUserMedia", e);
                    );
            )
            .catch(function (e) 
                console.log("Failed to call getUserMedia", e);
            );

    

    // 当发送ontrack的时候也就是数据通过的时候, 将远端的音视频流传给了remoteVideo
    function gotRemoteStream(e) 
        if (remoteVideo.srcObject !== e.streams[0]) 
            remoteVideo.srcObject = e.streams[0];
        
    

    // 挂断，将pc1和pc2分别关闭
    function hangup() 
        console.log('Ending call');
        pc1.close();
        pc2.close();
        pc1 = null;
        pc2 = null;
    
</script>

</html>