单机版视频呼叫

前端代码

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信令转发步骤

1、A createOffer()，生成sdp A 调用setLocalDescription(sdpA）并将sdpA发送给B；
2、B收到sdpA后调用 setRemoteDescription(sdpA),然后createAnswer，生成自己的sdpB,然后setLocalDescription(sdpB）并将sdpB发送给A；
3、A收B的sdpB后，setRemoteDescription(sdpB)；
4、交换ice信息，A将自己生成iceA信息发送给B,B调用addIceCandidate(iceA),然后B将自己生成iceB信息发送给A，A调用addIceCandidate(iceB)；
5、经过以上步骤就建立了p2p链接。

webrtc实现局域网通话（二）