# 一百行实现音视频通话

（1）第一步

首先创建一个信令服务器

需要安装

express
socket.io

npm i express socket.io

在根目录下创建 index.js 信令服务器

index.js:

var express = require('express'); // web 框架
const fs = require('fs'); // 文件读取

var app = express(); // 站点
app.use("/", express.static("public")); // 开放 public 目录

// 证书配置，web 调起摄像头需要 https
let options = {
    key: fs.readFileSync('./ssl/privatekey.pem'), // 证书文件的存放目录
    cert: fs.readFileSync('./ssl/certificate.pem')
}

const https = require('https').Server(options, app); // 创建 https 服务器
const io = require('socket.io')(https);

io.on('connection', (socket) => {

    // 新连接
    socket.on('conn', function (userName) {
        socket.join('room'); // 加入房间
        socket.emit('conn', userName);
        console.log('新用户：' + userName);
    });

    // 接收 Offer 信令并发送给其他连接
    socket.on('signalOffer', function (message) {
        socket.to('room').emit('signalOffer', message);
    });

    // 接收 Answer 信令
    socket.on('signalAnswer', function (message) {
        socket.to('room').emit('signalAnswer', message);
    });

    // 接收 iceOffer
    socket.on('iceOffer', function (message) {
        socket.to('room').emit('iceOffer', message);
    });

    // 接收 iceAnswer
    socket.on('iceAnswer', function (message) {
        socket.to('room').emit('iceAnswer', message);
    });
});

const config = {
    port: 8101 // 启用端口
};
https.listen(config.port); // 启动服务
console.log('https listening on ' + config.port);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

启动服务器：node index.js

（2）第二步

在 /public 目录下创建 index.html 通话页面

/public/index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>音视频通话</title>
</head>

<body>
    <div class="container">
        <h1>音视频通话</h1>
        <hr>
        <div class="video_container" align="center">
            <!-- 本地视频流 -->
            <video id="local_video" controls autoplay muted webkit-playsinline></video>
            <!-- 远端视频流 -->
            <video id="remote_video" controls autoplay muted webkit-playsinline></video>
        </div>
        <hr>
        <button id="startButton">加入房间</button>
        <button id="hangupButton">挂断</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.min.js"></script>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="main.js"></script>
    </div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

（3）第三步

创建 main.js （WebRTC关键代码）

/public/main.js：

'use strict'

var localVideo = document.getElementById('local_video'); // 本地视频 Video
var remoteVideo = document.getElementById('remote_video'); // 远端视频 Video

var startButton = document.getElementById('startButton'); // 加入房间按钮
var hangupButton = document.getElementById('hangupButton'); // 挂断按钮

var pc; // RTCPeerConnection 实例（WebRTC 连接实例）
var localStream; // 本地视频流
var socket = io.connect(); // 创建 socket 连接

// ice 打洞服务器
var config = {
    'iceServers': [{
        'urls': 'stun:stun.l.google.com:19302'
    }]
};

// offer 配置
const offerOptions = {
    offerToReceiveVideo: 1,
    offerToReceiveAudio: 1
};

hangupButton.disabled = true;

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

// 点击加入房间
function startAction () {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (mediastream) {
        localStream = mediastream; // 本地视频流
        localVideo.srcObject = mediastream; // 播放本地视频流
        startButton.disabled = true;
        socket.emit('conn', 'room'); // 连接 socket
    }).catch(function (e) {
        console.log(JSON.stringify(e));
    });
}

// socket 连接成功
socket.on('conn', function (room, id) {
    hangupButton.disabled = false;
    pc = new RTCPeerConnection(config); // 创建 RTC 连接
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream)); // 添加本地视频流 track
    // 创建 Offer 请求
    pc.createOffer(offerOptions).then(function (offer) {
        pc.setLocalDescription(offer); // 设置本地 Offer 描述，（设置描述之后会触发ice事件）
        socket.emit('signalOffer', offer); // 发送 Offer 请求信令
    });
    // 监听 ice
    pc.addEventListener('icecandidate', function (event) {
        var iceCandidate = event.candidate;
        if (iceCandidate) {
            // 发送 iceOffer 请求
            socket.emit('iceOffer', iceCandidate);
        }
    });
});

// 接收 Offer 请求信令
socket.on('signalOffer', function (message) {
    pc.setRemoteDescription(new RTCSessionDescription(message)); // 设置远端描述
    // 创建 Answer 请求
    pc.createAnswer().then(function (answer) {
        pc.setLocalDescription(answer); // 设置本地 Answer 描述
        socket.emit('signalAnswer', answer); // 发送 Answer 请求信令
    })

    // 监听远端视频流
    pc.addEventListener('addstream', function (event) {
        remoteVideo.srcObject = event.stream; // 播放远端视频流
    });
});

// 接收 Answer 请求信令
socket.on('signalAnswer', function (message) {
    pc.setRemoteDescription(new RTCSessionDescription(message)); // 设置远端描述
    console.log('remote answer');

    // 监听远端视频流
    pc.addEventListener('addstream', function (event) {
        remoteVideo.srcObject = event.stream;
    });
});

// 接收 iceOffer
socket.on('iceOffer', function (message) {
    addIceCandidates(message)
});

// 接收 iceAnswer
socket.on('iceAnswer', function (message) {
    addIceCandidates(message)
});

// 添加 IceCandidate
function addIceCandidates (message) {
    if (pc !== 'undefined') {
        pc.addIceCandidate(new RTCIceCandidate(message));
    }
}

// 挂断
function hangupAction () {
    localStream.getTracks().forEach(track => track.stop());
    pc.close();
    pc = null;
    hangupButton.disabled = true;
    startButton.disabled = false;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

（4）在局域网内开启音视频通话

在浏览器输入地址 https://192.168.0.100:8101

本机可以输入 https://localhost:8101

如遇提示 您的连接不是私密连接 请继续点击 高级 => 继续前往192.168.0.100（不安全）