一对一WebRTC视频通话系列（二）——websocket和join信令实现

2024-05-04 06:44
文章标签 视频 实现 系列 websocket join 通话 webrtc 信令 一对一

本文主要是介绍一对一WebRTC视频通话系列（二）——websocket和join信令实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本系列博客主要记录WebRtc实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。

一对一WebRTC视频通话系列往期博客：

一对一WebRTC视频通话系列（一）—— 创建页面并显示摄像头画面

websocket和join信令实现

    • 一、websocket实现
      • 1.1客户端
      • 1.2服务端
    • 二、join信令实现
      • 2.1 客户端
      • 2.2 服务端

一、websocket实现

1.1客户端

在main.js文件中，定义了一个名为ZeroRTCEngine的类，该类使用WebSocket进行通信。ZeroRTCEngine类的实例化过程如下：

  1. 首先，声明并定义一个名为zeroRTCEngine的类，接受一个wsUrl参数。
  2. 在ZeroRTCEngine类中，定义一个init方法，用于初始化WebSocket地址。
  3. 定义ZeroRTCEngine类的方法createWebsocket，用于创建WebSocket对象。
  4. 在createWebsocket方法中，定义多种WebSocket事件处理函数.
  5. 定义onopen、onmessage、onclose和onerror方法，用于处理WebSocket连接状态和接收到的消息。

在实际使用中，通过调用ZeroRTCEngine类的createWebsocket方法来创建一个WebSocket实例，并监听各种事件（如打开、消息传递、关闭和错误）。

	//定义 ZeroRTCEngine 的 init 方法//参数 wsUrl：WebSocket 的地址ZeroRTCEngine.prototype.init = function(wsUrl) {//设置 WebSocket urlthis.wsUrl = wsUrl;this.signaling =null;}//定义 ZeroRTCEngine 的 createWebsocket 方法ZeroRTCEngine.prototype.createWebsocket = function() {//创建 WebSocket 对象zeroRTCEngine = this;zeroRTCEngine.signaling = new WebSocket(this.wsUrl);//设置打开函数zeroRTCEngine.signaling.onopen = function () {zeroRTCEngine.onopen();}//设置关闭函数zeroRTCEngine.signaling.onclose = function (event) {zeroRTCEngine.onclose(event);}//设置错误函数zeroRTCEngine.signaling.onerror = function (event) {zeroRTCEngine.onerror(event);}//设置消息传递函数zeroRTCEngine.signaling.onmessage = function (event) {zeroRTCEngine.onmessage(event);}}ZeroRTCEngine.prototype.onopen = function() {console.log("WebSocket connection established.");}ZeroRTCEngine.prototype.onmessage = function(event) {console.log("Received message:" + event.data);//解析收到的消息var message = JSON.parse(event.data);}ZeroRTCEngine.prototype.onclose = function(event) {console.log("WebSocket connection closed." + event.data + ", reason" + EventCounts.reason);}ZeroRTCEngine.prototype.onerror = function(event) {console.log("WebSocket connection error:" + event.data);  }zeroRTCEngine = new ZeroRTCEngine("ws://192.168.3.181:8099");zeroRTCEngine.createWebsocket();

1.2服务端

创建一个名为signal_server.js的js新文件，搭建简单的WebSocket服务器，用于处理客户端连接、消息发送和接收、连接关闭等基本操作。在实际应用中，可能需要根据需求对代码进行修改和扩展。

  1. 使用ws.createServer()方法创建一个WebSocket服务器。这个方法接受一个回调函数作为参数，该回调函数在客户端连接到服务器时被调用。
  2. 在回调函数中，使用console.log()输出一条connection established的消息，表示连接已建立。然后，向客户端发送一条消息，例如"我收到你的连接了"。
  3. 使用conn.on("text", function (str) {...})监听客户端发送的消息。
    当客户端发送消息时，会触发这个回调函数。使用console.info()输出一条消息，表示收到的消息。
  4. 在连接关闭时，使用conn.on("close", function (code, reason) {...})监听连接关闭。
    当客户端关闭连接时，会触发这个回调函数。使用console.log()输出一条消息，表示连接已关闭。
  5. 使用了conn.on("error", function (err) {...})来监听连接错误。当发生错误时，会触发这个回调函数，输出错误信息。
  6. 使用server.listen()方法将服务器绑定到一个指定的端口。在实际应用中，通常需要根据不同的需求来修改这个端口。
	// 引入ws模块var ws = require("nodejs-websocket");// 定义端口号var port =8099;// 创建一个WebSocket服务器var server = ws.createServer(function (conn) {// 连接建立时的输出console.log("New connection");// 向客户端发送消息conn.sendText("我收到你的连接了")// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);});// 连接关闭时的输出conn.on("close", function (code, reason) {console.log("Connection closed,code:" + code + " reason:" + reason);});// 监听连接错误conn.on("error", function (error) {console.error("发生错误:", error);})}).listen(port);

在ubuntu中使用下列指令开启服务端：

	node signal_server.js

在这之前切记先用以下两行命令初始化：

	sudo npm init -ysudo npm install nodejs-websocket

在这里插入图片描述
在这里插入图片描述

二、join信令实现

2.1 客户端

修改按钮点击事件

document.getElementById('joinBtn').onclick = function () {roomId = document.getElementById('roomId').value;if(roomId == '' || roomId == "Please enter the room ID"){alert('Please enter the room ID');return;}console.log("joinBtn clicked,roomId: " + roomId);//初始化本地码流initLocalStream();
}

首先创建一个JSON对象，包含命令（cmd）、房间ID（roomId）和用户ID（uid），然后将这个JSON对象转换为字符串。接着，调用zeroRTCEngine.sendMessage方法将这个字符串发送给服务器，表示用户要加入房间。最后，在控制台输出一条消息，表明用户已经成功加入房间。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";var localUserId = Math.random().toString(36).substr(2);//本地ID   
var remoteUserId = -1; //对方用户ID
var roomId = -1; //房间IDZeroRTCEngine.prototype.sendMessage = function(message) {this.signaling.send(message);
}function doJoin(roomId) {var jsonMsg = {'cmd': 'join','roomId': roomId,'uid': localUserId,}; var message = JSON.stringify(jsonMsg); //将json对象转换为字符串zeroRTCEngine.sendMessage(message);   //设计方法：用实现方法而不是直接用变量    console.info("doJoin message: " + message);
}

运行效果：
在这里插入图片描述

2.2 服务端

修改signal_server.js
1.添加相关宏定义，以及WebRTC所需要用到的Map类。

// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";/** ----- ZeroRTCMap ----- */
var ZeroRTCMap = function () {this._entrys = new Array();this.put = function (key, value) {if (key == null || key == undefined) {return;}var index = this._getIndex(key);if (index == -1) {var entry = new Object();entry.key = key;entry.value = value;this._entrys[this._entrys.length] = entry;} else {this._entrys[index].value = value;}};this.get = function (key) {var index = this._getIndex(key);return (index != -1) ? this._entrys[index].value : null;};this.remove = function (key) {var index = this._getIndex(key);if (index != -1) {this._entrys.splice(index, 1);}};this.clear = function () {this._entrys.length = 0;};this.contains = function (key) {var index = this._getIndex(key);return (index != -1) ? true : false;};this.size = function () {return this._entrys.length;};this.getEntrys = function () {return this._entrys;};this._getIndex = function (key) {if (key == null || key == undefined) {return -1;}var _length = this._entrys.length;for (var i = 0; i < _length; i++) {var entry = this._entrys[i];if (entry == null || entry == undefined) {continue;}if (entry.key === key) {// equalreturn i;}}return -1;};
}

2.定义Client函数，用于初始化用户信息

function Client(uid, conn, roomId) {this.uid = uid;     // 用户所属的idthis.conn = conn;   // uid对应的websocket连接this.roomId = roomId;
}

3.处理加入房间请求
监听客户端发送的消息，如果时加入房间的，利用handleJoin()函数进行处理

// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);var jsonMsg = JSON.parse(str);switch(jsonMsg.cmd){case SIGNAL_TYPE_JOIN:handleJoin(jsonMsg, conn); break;}});

定义handleJoin()函数,处理加入房间请求。它首先获取房间ID和用户ID，然后获取房间Map。如果房间不存在，则创建一个新的房间。如果房间已满，给出提示并拒绝加入请求。如果房间未满，创建一个新的客户端并将其添加到房间。如果房间中用户数大于1，则通知房间中的其他用户有新人加入。

实现原理：
1.从传入的message和conn参数中获取房间ID和用户ID。
2.尝试获取roomId对应的房间Map。如果房间Map不存在，则创建一个新的房间Map。
3.检查房间是否已满。如果已满，给出提示并返回；否则，创建一个新的客户端并将其添加到房间。
4.如果房间中用户数大于1，则遍历房间中的所有用户，通知他们有新人加入。同时，通知自己房间中有新人加入。

function handleJoin(message, conn){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;console.log(" uid:"+uid + "try to join room: "+roomId);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);// 如果房间不存在，则创建一个新的房间if(roomMap == null){roomMap = new ZeroRTCMap();roomTableMap.put(roomId, roomMap);}// 如果房间已满,给出提示if(roomMap.size() >= 1){console.error("roomId:" + roomId + " is full");conn.sendText('roomId:' + roomId + ' is full');return;}// 创建一个新的客户端var client = new Client(uid, conn, roomId);// 将用户添加到房间roomMap.put(uid, client);// 如果房间中的用户数大于1，则通知房间中的其他用户if(roomMap.size() > 1){// 获取房间中的所有用户var clients = roomMap.getEntrys();for(var i in clients){var remoteUid = clients[i].key;if(remoteUid != uid){// 通知已经在房间的人，有新人加入var jsonMsg = {'cmd':SIGNAL_TYPE_NEW_PEER,'remoteUid':uid};var msg = JSON.stringify(jsonMsg);// 通知自己，房间里有的人jsonMsg = {'cmd':SIGNAL_TYPE_RESP_JOIN,'remoteUid':remoteUid};msg = JSON.stringify(jsonMsg);console.info("resp-join"+msg);conn.sendText(msg);}}}
}

整体代码：

// 引入ws模块
var ws = require("nodejs-websocket");
// 定义端口号
var port =8099;// join 主动加入房间
// leave 主动离开房间
// new-peer 有人加入房间，通知已经在房间的人
// peer-leave 有人离开房间，通知已经在房间的人
// offer 发送offer给对端peer
// answer发送offer给对端peer
// candidate 发送candidate给对端peer
const SIGNAL_TYPE_JOIN = "join";
const SIGNAL_TYPE_RESP_JOIN = "resp-join";  // 告知加入者对方是谁
const SIGNAL_TYPE_LEAVE = "leave";
const SIGNAL_TYPE_NEW_PEER = "new-peer";
const SIGNAL_TYPE_PEER_LEAVE = "peer-leave";
const SIGNAL_TYPE_OFFER = "offer";
const SIGNAL_TYPE_ANSWER = "answer";
const SIGNAL_TYPE_CANDIDATE = "candidate";/** ----- ZeroRTCMap ----- */
var ZeroRTCMap = function () {this._entrys = new Array();this.put = function (key, value) {if (key == null || key == undefined) {return;}var index = this._getIndex(key);if (index == -1) {var entry = new Object();entry.key = key;entry.value = value;this._entrys[this._entrys.length] = entry;} else {this._entrys[index].value = value;}};this.get = function (key) {var index = this._getIndex(key);return (index != -1) ? this._entrys[index].value : null;};this.remove = function (key) {var index = this._getIndex(key);if (index != -1) {this._entrys.splice(index, 1);}};this.clear = function () {this._entrys.length = 0;};this.contains = function (key) {var index = this._getIndex(key);return (index != -1) ? true : false;};this.size = function () {return this._entrys.length;};this.getEntrys = function () {return this._entrys;};this._getIndex = function (key) {if (key == null || key == undefined) {return -1;}var _length = this._entrys.length;for (var i = 0; i < _length; i++) {var entry = this._entrys[i];if (entry == null || entry == undefined) {continue;}if (entry.key === key) {// equalreturn i;}}return -1;};
}var roomTableMap = new ZeroRTCMap();function Client(uid, conn, roomId) {this.uid = uid;     // 用户所属的idthis.conn = conn;   // uid对应的websocket连接this.roomId = roomId;
}// 处理加入房间请求
function handleJoin(message, conn){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;console.log(" uid:"+uid + "try to join room: "+roomId);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);// 如果房间不存在，则创建一个新的房间if(roomMap == null){roomMap = new ZeroRTCMap();roomTableMap.put(roomId, roomMap);}// 如果房间已满,给出提示if(roomMap.size() >= 1){console.error("roomId:" + roomId + " is full");conn.sendText('roomId:' + roomId + ' is full');return;}// 创建一个新的客户端var client = new Client(uid, conn, roomId);// 将用户添加到房间roomMap.put(uid, client);// 如果房间中的用户数大于1，则通知房间中的其他用户if(roomMap.size() > 1){// 获取房间中的所有用户var clients = roomMap.getEntrys();for(var i in clients){var remoteUid = clients[i].key;if(remoteUid != uid){// 通知已经在房间的人，有新人加入var jsonMsg = {'cmd':SIGNAL_TYPE_NEW_PEER,'remoteUid':uid};var msg = JSON.stringify(jsonMsg);// 通知自己，房间里有的人jsonMsg = {'cmd':SIGNAL_TYPE_RESP_JOIN,'remoteUid':remoteUid};msg = JSON.stringify(jsonMsg);console.info("resp-join"+msg);conn.sendText(msg);}}}
}// 创建一个WebSocket服务器
var server = ws.createServer(function (conn) {// 连接建立时的输出console.log("New connection");// 向客户端发送消息conn.sendText('我收到你的连接了')// 监听客户端发送的消息conn.on("text", function (str) {console.info("Received msg:"+str);var jsonMsg = JSON.parse(str);switch(jsonMsg.cmd){case SIGNAL_TYPE_JOIN:handleJoin(jsonMsg, conn); break;}});// 连接关闭时的输出conn.on("close", function (code, reason) {console.log("Connection closed,code:" + code + " reason:" + reason); });// 监听连接错误conn.on("error", function (error) {console.error("发生错误:", error);})
}).listen(port);

运行效果：

客户1：
第一个创建，刚开始没有红框的内容。在客户2新加入后，收到服务端发来的信令。
在这里插入图片描述

客户2：
创建后，会收到服务端发来的，房间内已有的客户1的信息。
在这里插入图片描述
客户3：
房间内已经有2个客户了，会提示房间已满，无法加入房间。
在这里插入图片描述
服务端：
在这里插入图片描述

这篇关于一对一WebRTC视频通话系列（二）——websocket和join信令实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/958561。

相关文章

Java的栈与队列实现代码解析

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念（Stack）栈的实现代码队列（Queue）模拟实现队列(双链表实现)循环队列（循环数组
阅读更多...
C++如何通过Qt反射机制实现数据类序列化

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类，并对数据类进行存储、打印、调试等操作。由于数据类
阅读更多...
Python实现图片分割的多种方法总结

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)
阅读更多...
Android实现在线预览office文档的示例详解

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档（如Word、Excel、PPT）是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一：WebView + Office Onl
阅读更多...
C# foreach 循环中获取索引的实现方式

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》：本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代
阅读更多...
Spring Security+JWT如何实现前后端分离权限控制

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT？二、JWT 基本结构
阅读更多...
Java实现优雅日期处理的方案详解

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2
阅读更多...
Android实现两台手机屏幕共享和远程控制功能

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络
阅读更多...
使用Python实现图像LBP特征提取的操作方法

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB
阅读更多...
Redis消息队列实现异步秒杀功能

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2