webRTC实时通信demo

参考文档：

https://www.jianshu.com/p/f439ce5cc0be
https://www.w3cschool.cn/socket

demo流程示意图（用户A向用户B推送视频）：

demo运行效果

由于CSDN限制了上传gif文件的大小，故整个操作流程拆分成以下几个步骤：

打开网页A获取本地视频：

点击呼叫交换网页的信令和ice信息并开始视频流推送：

点击挂断退出视频流推送：

为了方便展示完整的交互流程，网页A和网页B都是在同一台PC上打开，实际上演示效果和局域网内用两台PC分开打开网页A和网页B是一样的。

准备条件

网页A所在PC需要准备好外接USB摄像头；
启动https server所需的私钥和证书（可以用openSSL工具生成，如启动的是http server，则不需要）。

demo源码

创建前端工程

新建一个文件夹，然后在文件夹内执行以下命令创建前端工程：

npm init

下载依赖

参考以下package.json内容下载依赖库（参考文档中使用的socket.io为2.x版本，demo中的部分代码针对4.x版本有做适配调整，想要在本地一次运行成功，所有的依赖库版本务必与demo保持一致）：

{"name": "webrtc","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "liqing","license": "ISC","dependencies": {"express": "^4.17.3","socket.io": "^4.4.1"}}

服务端

在项目根目录创建index.js（本地运行时注意修改私钥、证书的地址以及server IP），代码如下：

/* * @Author: liqing * @Date: 2022-03-29 11:18:39 * @LastEditors: liqing * @LastEditTime: 2023-08-02 14:51:25 * @Description: description * DEMO参考文档：https://www.jianshu.com/p/f439ce5cc0be * 注意socket.io的版本： * 如果使用4.x版本，io.sockets.adapter.rooms[room]无法获得房间信息（3.x版本以后rooms返回的是Set，不再是对象了） * 如果使用2.0.3版本，navigator.mediaDevices.getUserMedia不可用（未验证需要如何修改） */'use strict'var express = require('express');var fs = require('fs');var app = express();const options = {key: fs.readFileSync('D:/my/cakey.pem'),cert: fs.readFileSync('D:/my/cacert.pem')};var http = require('https').createServer(options, app);// var http = require('http').createServer(app);// socket.io API地址：https://www.w3cschool.cn/socketvar io = require('socket.io')(http);// 静态资源代理app.use('/css', express.static('css'));app.use('/js', express.static('js'));app.use('/img', express.static('img'));app.use('/module', express.static('module'));// 路由配置// app.get('/', function (request, response) {// response.sendFile(__dirname + '/index.html');// });app.get('/userA', function (request, response) {response.sendFile(__dirname + "/userA.html")});app.get('/userB', function (request, response) {response.sendFile(__dirname + "/userB.html")});app.get('/userC', function (request, response) {response.sendFile(__dirname + "/userC.html")});app.get('/rtsp', function (request, response) {response.sendFile(__dirname + "/index.html")});io.on('connection', function (socket) {console.log(`有用户加入进来 and socket.id is ${socket.id}`);socket.on('signal', function (message) {socket.to('room').emit('signal', message);});socket.on('ice', function (message) {socket.to('room').emit('ice', message);});socket.on('create or join', function (room) {// 当前使用的socket.io版本为4.4.1，原代码中io.sockets.adapter.rooms返回的已经不是对象，而是一个Set，因此原来的io.sockets.adapter.rooms[room]必定返回undefinedvar clientsInRoom = io.sockets.adapter.rooms.get(room);if (typeof clientsInRoom === "undefined") {socket.join(room);socket.emit('create', room, socket.id);console.log('caller joined');} else {socket.join(room);socket.to(room).emit('call');console.log('callee joined');}});});/** * 注意：如果定义的是http server，则在访问页面时会禁止页面调用摄像头/麦克风设备 * 规避方案：访问chrome://flags/，找到Insecure origins treated as secure配置项，把http://192.168.0.106:8080加入例外清单 * 本地运行时需要把下面的IP替换成本地的IP */var server = http.listen(8080, '192.168.0.106', function () {var host = server.address().address;var port = server.address().port;console.log(`listening on:http://${host}:${port}`);});/** * 服务端代码不涉及任何webRTC内容，socket.io同步的消息不涉及音视频流 */

https server启动所需的私钥（cakey.pem），可以保存在本地任意路径，但要注意同步修改index.js中的引用地址：

https server启动所需的证书（cacert.pem），可以保存在本地任意路径，但要注意同步修改index.js中的引用地址：

客户端

在项目根目录创建userA.html，代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>userA</title></head><body><div class="container"><h1>userA</h1><hr><div class="video_container" align="center"><video id="local_video" controls="controls" autoplay muted></video></div><hr><button id="startButton">获取本地视频</button><button id="callButton">呼叫</button><button id="hangupButton">挂断</button><!--  --><script src="/socket.io/socket.io.js"></script><!--  --><script src="js/userA.js"></script></div></body></html>

在项目根目录创建js文件夹，在文件夹内创建userA.js，代码如下：

/* * @Author: liqing * @Date: 2022-03-29 11:17:08 * @LastEditors: liqing * @LastEditTime: 2023-06-08 10:21:12 * @Description: description */'use strict'var localVideo = document.getElementById('local_video');var startButton = document.getElementById('startButton');var callButton = document.getElementById('callButton');var hangupButton = document.getElementById('hangupButton');var pc;var localStream;var socket = io.connect();var config = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};const offerOptions = {offerToReceiveVideo: 1,offerToReceiveAudio: 1};callButton.disabled = false;hangupButton.disabled = true;startButton.addEventListener('click', startAction);callButton.addEventListener('click', callAction);hangupButton.addEventListener('click', hangupAction);function gotDevices(infos) {// document.getElementById("data").innerHTML = JSON.stringify(infos);}function startAction() {try {// 测试获取设备后置摄像头navigator.mediaDevices.enumerateDevices().then(gotDevices);// 关于navigator.mediaDevices.getUserMedia的定义可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedianavigator.mediaDevices.getUserMedia({ video: true, audio: false }).then(function (mediastream) {// 把音视频流放入变量localStream以及localVideo这个dom中localStream = mediastream;localVideo.srcObject = mediastream;startButton.disabled = true;}).catch(function (e) {// 如果获取本地音视频时无外接设备（摄像头/麦克风）则会提示exception is NotFoundError: Requested device not foundconsole.log(`exception is ${e}`);alert(`exception is ${e}`);});} catch (e) {alert(`startAction exception is ${e}`);}}function callAction() {callButton.disabled = true;hangupButton.disabled = false;// pc = new RTCPeerConnection(config);// 创建一个本地到远端的webRTC对象pc = new RTCPeerConnection();// 获取媒体流中的轨道信息let tracks = localStream.getTracks();// 向上面生成的webRTC对象注入轨道信息tracks.forEach(track => pc.addTrack(track, localStream));// 作为源端创建offer对象（包含源端的媒体信息和编解码信息）pc.createOffer(offerOptions).then(function (offer) {// 在webRTC对象中记录offer信息（注意记录本端信息调用的是setLocalDescription，记录对端信息调用的是setRemoteDescription）console.log(`offer is ${JSON.stringify(offer)}`);pc.setLocalDescription(offer);// 同步offer信息给目的端（offer对象中的SDP参数含义可以参考https://blog.csdn.net/m370809968/article/details/88195181,SDP即为信令）socket.emit('signal', offer);});// 当webRTC对象调用setLocalDescription方法时会抛出icecandidate事件（即触发以下监听的回调）// 问题：为什么调用setLocalDescription方法会抛出icecandidate事件两次（两次信息不完全相同，如端口）pc.addEventListener('icecandidate', function (event) {var iceCandidate = event.candidate;console.log(`iceCandidate is ${JSON.stringify(iceCandidate)}`);if (iceCandidate) {// 同步补充描述信息给目的端（通过SDP协商结果进行信息交换），描述信息包括协议、IP、端口、优先级等等信息// 问题：为什么这些描述信息不可以放在信令中socket.emit('ice', iceCandidate);}});// 当信令和补充信息双方同步完成后即可开始会商}function hangupAction() {localStream.getTracks().forEach(track => track.stop());pc.close();pc = null;hangupButton.disabled = true;callButton.disabled = true;startButton.disabled = false;}socket.on('create', function (room, id) {console.log('userA创建聊天房间');console.log(room + id);});socket.on('call', function () {console.log('enter call');callButton.disabled = false;});// 监听目的端同步的offer信息socket.on('signal', function (message) {if (pc !== 'undefined') {// 在webRTC对象中记录目的端offer信息（注意记录本端信息调用的是setLocalDescription，记录对端信息调用的是setRemoteDescription）pc.setRemoteDescription(new RTCSessionDescription(message));setTimeout(function () {console.log(`remote answer is ${JSON.stringify(pc.remoteDescription)}`);}, 1000);}});socket.on('ice', function (message) {if (pc !== 'undefined') {pc.addIceCandidate(new RTCIceCandidate(message));console.log('become candidate');}});socket.emit('create or join', 'room');

在项目根目录创建userB.html，代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>对方的视频</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div class="container"><h1>对方的视频</h1><hr><div class="video_container" align="center"><video id="remote_video" controls autoplay></video></div><hr><script src="/socket.io/socket.io.js"></script><!--  --><script src="js/userB.js"></script></div></body></html>

在js文件夹内创建userB.js，代码如下：

/* * @Author: liqing * @Date: 2022-03-29 11:17:53 * @LastEditors: liqing * @LastEditTime: 2022-07-06 15:45:34 * @Description: description */'use strict'var remoteVideo = document.getElementById('remote_video');var socket = io.connect();var config = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};var pc;socket.emit('create or join', 'room');socket.on('join', function (room, id) {console.log('userB加入房间');});// 监听源端同步的offer信息socket.on('signal', function (message) {console.log(`enter signal userB`);// pc = new RTCPeerConnection(config);// 创建一个本地到远端的webRTC对象，因为目的端是被动接收方，故在源端同步消息后才创建pc = new RTCPeerConnection();// 在webRTC对象中记录源端offer信息（注意记录本端信息调用的是setLocalDescription，记录对端信息调用的是setRemoteDescription）pc.setRemoteDescription(new RTCSessionDescription(message));// 作为目的端创建offer对象（包含目的端的媒体信息和编解码信息）pc.createAnswer().then(function (answer) {// 在webRTC对象中记录目的端offer信息（注意记录本端信息调用的是setLocalDescription，记录对端信息调用的是setRemoteDescription）pc.setLocalDescription(answer);// 同步offer信息给源端socket.emit('signal', answer);});pc.addEventListener('icecandidate', function (event) {var iceCandidate = event.candidate;if (iceCandidate) {console.log(`iceCandidate is ${JSON.stringify(iceCandidate)}`);socket.emit('ice', iceCandidate);}});pc.addEventListener('addstream', function (event) {remoteVideo.srcObject = event.stream;});});socket.on('ice', function (message) {console.log(`get ice message`);pc.addIceCandidate(new RTCIceCandidate(message));});

运行项目

在根目录下执行以下命令启动服务端：

node index.js

服务端运行成功如下图：

在浏览器（chrome）中分别打开以下两个地址模拟用户A访问和用户B访问（注意本地运行时需要切换为本机IP）：

https://192.168.0.106:8080/userAhttps://192.168.0.106:8080/userB

在userA页面点击获取本地视频按钮，此时如果浏览器是初次调用摄像头设备，则会有如下安全提示：

点击允许后userA页面就可以在网页中获取到自己的视频：

然后在userA页面点击呼叫，在userB页面就可以播放userA的视频：

在userA页面点击挂断即可终止视频推送，此时userB页面会停留在userA页面推送视频的最后一帧。

注意点

服务端存在的意义仅仅是帮助两个客户端完成信令及ice信息的交换：当网页A和网页B开始视频流推送时即使停掉nodejs服务，也不会影响视频通信；
demo只能让局域网内的两台PC完成视频通信，如果希望在公网的两台PC可以视频通信，则需要配置iceServers（demo中有相关代码，但在构造RTCPeerConnection对象时未使用相应的配置）。

备注

启动服务端成功，页面访问时服务端报错：

原因：这是由于node版本过低导致的，出现问题的node版本是8.11.1，切换为20.10.0后问题修复。

webRTC实时通信demo

参考文档：

demo流程示意图（用户A向用户B推送视频）：

demo运行效果

准备条件

demo源码

创建前端工程

下载依赖

服务端

客户端

运行项目

注意点

备注

最新关注

热文推荐

2023年软件测试就业现状分析，到底是卷还是润？

C语言用指针方法对10个整数由大到小顺序排序

期货开户的身份识别验证

反思之前工作时的一些问题

使用Blazor框架实现在前端浏览器中导入和导出Excel

2023，大前端技术趋势及小程序未来分析

webRTC实时通信demo

参考文档：

demo流程示意图（用户A向用户B推送视频）：

demo运行效果

准备条件

demo源码

创建前端工程

下载依赖

服务端

客户端

运行项目

注意点

备注

相关文章

最新关注

热文推荐