前言

WebRTC由一家叫GIPS的公司创立，提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。

单机版视频呼叫

前端代码

1、新建node.js项目，在项目文件夹下新建index.html打开，编写如下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>webrtc案例</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <h1>单机版视频呼叫</h1>
        <hr>
        <div class="video_container" align="center">
            <video id="local_video" autoplay playsinline muted></video>
            <video id="remote_video" autoplay></video>
        </div>
        <hr>
        <div class="button_container">
            <button id="startButton">采集视频</button>
            <button id="callButton">呼叫</button>
            <button id="hangupButton">关闭</button>
        </div>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="js/main.js"></script>
    </div>
</body>
</html>

新建js文件夹，在其文件夹下创建main.js 文件，编写如下代码：

'use strict'

var startButton = document.getElementById('startButton');
var callButton = document.getElementById('callButton');
var hangupButton = document.getElementById('hangupButton');
callButton.disabled = true;
hangupButton.disabled = true;

startButton.addEventListener('click', startAction);
callButton.addEventListener('click', callAction);
hangupButton.addEventListener('click', hangupAction);

var localVideo = document.getElementById('local_video');
var remoteVideo = document.getElementById('remote_video');
var localStream;
var pc1;
var pc2;

const offerOptions = {
    offerToReceiveVideo: 1,
    offerToReceiveAudio:1
};

function startAction() {
    //采集摄像头视频
    navigator.mediaDevices.getUserMedia({ video: true,audio:true })
        .then(function(mediaStream){
            localStream = mediaStream;
            localVideo.srcObject = mediaStream;
            startButton.disabled = true;
            callButton.disabled = false;
        }).catch(function(error){
            console.log(JSON.stringify(error));
        });
}

function callAction() {

    hangupButton.disabled = false;
    callButton.disabled = true;

    pc1 = new RTCPeerConnection();
    pc1.addEventListener('icecandidate', function (event) {
        var iceCandidate = event.candidate;
        if (iceCandidate) {
            pc2.addIceCandidate(iceCandidate);
        }
    });
    localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));

    pc2 = new RTCPeerConnection();
    pc2.addEventListener('addstream', function (event) {
        remoteVideo.srcObject = event.stream;
    });

    pc1.createOffer(offerOptions).then(function (offer) {
        pc1.setLocalDescription(offer);
        pc2.setRemoteDescription(offer);

        pc2.createAnswer().then(function (description) {
            pc2.setLocalDescription(description);
            pc1.setRemoteDescription(description);
        });
    });
}

function hangupAction() {
    localStream.getTracks().forEach(track => track.stop());
    pc1.close();
    pc2.close();
    pc1 = null;
    pc2 = null;
    hangupButton.disabled = true;
    callButton.disabled = true;
    startButton.disabled = false;
}

这里要详细看信令转发流程

服务端代码

和上篇一样，至此代码编写完成。

测试结果

启动node.js服务

node index.js

地址栏输入localhost:8080,效果如下图所示：

js4.png

js5.png

js6.png

总结

信令转发
A（成B的候选者）呼叫B
1、A 创建RTCPeerConnection，并添"icecandidate"事件,添加本地视频流；B创建RTCPeerConnection，并添加"addstream"事件
2、A createOffer(), A将本地通话（例：音视频编解码）相关信息发送给B，B设置根据A发来的信息处理音视频播放,下面请看第三步
3、B createAnswer() ，B会把本地信息发给A（A根据收到B发来的信息处理音视频播放），
4、"icecandidate"对应的函数会被调用，B 添加候选者发来候选消息
5、B端回调"addstrem"对应函数，播放视频（这一步会先于第4步执行，但是没有第四步，B端将不会播放视频）