一对一WebRTC视频通话系列（四）——offer、answer、candidate信令实现

本篇博客主要讲解offer、answer、candidate信令实现，涵盖了媒体协商和网络协商相关实现。
本系列博客主要记录一对一WebRTC视频通话实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。

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

一对一WebRTC视频通话系列（一）—— 创建页面并显示摄像头画面
一对一WebRTC视频通话系列（二）——websocket和join信令实现
一对一WebRTC视频通话系列（三）——leave和peer-leave信令实现

offer、answer、candidate信令实现

  • 整体实现思路
    • 1. 客户端
    • 2. 服务端

整体实现思路

整体实现思路(红色部分为客户端，蓝色为服务端)：
（1）收到new­peer （handleRemoteNewPeer处理），作为发起者创建RTCPeerConnection，绑定事件响应函数，加入本地流；
（2）创建offer sdp，设置本地sdp，并将offer sdp发送到服务器；
（3）服务器收到offer sdp 转发给指定的remoteClient；
（4）接收者收到offer，也创建RTCPeerConnection，绑定事件响应函数，加入本地流；
（5）接收者设置远程sdp，并创建answer sdp，然后设置本地sdp并将answer sdp发送到服务器；
（6）服务器收到answer sdp 转发给指定的remoteClient；
（7）发起者收到answer sdp，则设置远程sdp；
（8）发起者和接收者都收到ontrack回调事件，获取到对方码流的对象句柄；
（9）发起者和接收者都开始请求打洞，通过onIceCandidate获取到打洞信息（candidate）并发送给对方
（10）如果P2P能成功则进行P2P通话，如果P2P不成功则进行中继转发通话。

1. 客户端

（1）创建RTCPeerConnection，绑定事件响应函数，加入本地流
handleRemoteNewPeer->doOffer->ceratePeerConnection()

function doOffer() {//创建RTCPeerConnection对象if(pc == null)ceratePeerConnection();pc.createOffer().then(createOfferAndSendMessage).catch(handleCreateOfferError);
}

function ceratePeerConnection() {//创建RTCPeerConnection对象pc = new RTCPeerConnection(null);pc.onicecandidate = handleIceCandidate;pc.ontrack = handleRemoteStreamAdd;localStream.getTracks().forEach(track => {pc.addTrack(track, localStream);});
}

（2）创建offer sdp，设置本地sdp，并将offer sdp发送到服务器
handleRemoteNewPeer->doOffer->
pc.createOffer().then(createOfferAndSendMessage).catch(handleCreateOfferError);

function createOfferAndSendMessage(session){pc.setLocalDescription(session).then(function(){var jsonMsg = {'cmd': 'offer','roomId': roomId,'uid': localUserId,'remoteUid':remoteUserId,'msg': JSON.stringify(session)};var message = JSON.stringify(jsonMsg); //将json对象转换为字符串zeroRTCEngine.sendMessage(message);   //设计方法：用实现方法而不是直接用变量console.info("send offer message: " + message);}).catch(function(error){console.error('offer setLocalDiscription failed: ' + error.toString());});
}

（4）接收者收到offer，也创建RTCPeerConnection，绑定事件响应函数，加入本地流
ZeroRTCEngine.prototype.onmessage()解析收到信息。
当信令为SIGNAL_TYPE_OFFER时，调用handleRemoteOffer()进行处理。

	function handleRemoteOffer(message) {console.info("handleRemoteOffer");if(pc == null){ceratePeerConnection();}var desc = JSON.parse(message.msg);pc.setRemoteDescription(desc);doAnswer();}

（5）接收者设置远程sdp，并创建answer sdp，然后设置本地sdp并将answer sdp发送到服务器；
在（4）完成后，调用doAnswer()函数实现。

function doAnswer() {pc.createAnswer().then(createAnswerAndSendMessage).catch(handleCreateAnswerError);
}

function createAnswerAndSendMessage(session){pc.setLocalDescription(session).then(function(){var jsonMsg = {'cmd': 'answer','roomId': roomId,'uid': localUserId,'remoteUid':remoteUserId,'msg': JSON.stringify(session)};var message = JSON.stringify(jsonMsg); //将json对象转换为字符串zeroRTCEngine.sendMessage(message);   //设计方法：用实现方法而不是直接用变量console.info("send answer message: " + message);}).catch(function(error){console.error('answer setLocalDiscription failed: ' + error.toString());});
}

（7）发起者收到answer sdp，则设置远程sdp；
ZeroRTCEngine.prototype.onmessage()解析收到信息。
当信令为SIGNAL_TYPE_ANSWER时，调用handleRemoteAnswer()进行处理。

function handleRemoteAnswer(message) {console.info("handleRemoteAnswer");var desc = JSON.parse(message.msg);pc.setRemoteDescription(desc);
}

（8）发起者和接收者都收到ontrack回调事件，获取到对方码流的对象句柄； ???

（9）发起者和接收者都开始请求打洞，通过onIceCandidate获取到打洞信息（candidate）并发送给对方

function createPeerConnection() {pc = new RTCPeerConnection(null);pc.onicecandidate = handleIceCandidate;pc.ontrack = handleRemoteStreamAdd;localStream.getTracks().forEach((track) => pc.addTrack(track, localStream));
}

function handleIceCandidate(event) {console.info("handleIceCandidate");if (event.candidate) {var jsonMsg = {'cmd': 'candidate','roomId': roomId,'uid': localUserId,'remoteUid': remoteUserId,'msg': JSON.stringify(event.candidate)};var message = JSON.stringify(jsonMsg);zeroRTCEngine.sendMessage(message);console.info("send candidate message");} else {console.warn("End of candidates");}
}

function handleRemoteCandidate(message) {console.info("handleRemoteCandidate");var candidate = JSON.parse(message.msg);pc.addIceCandidate(candidate).catch(e => {console.error("addIceCandidate failed:" + e.name);});
}

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

2. 服务端

主要完成以下两点：
（3）服务器收到offer sdp 转发给指定的remoteClient；
（6）服务器收到answer sdp 转发给指定的remoteClient；
应从消息监听函数入手，完成对offer、answer、candidate这3种情况的处理。

// 监听客户端发送的消息
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;case SIGNAL_TYPE_LEAVE:handleLeave(jsonMsg);break;case SIGNAL_TYPE_OFFER://新添1handleOffer(jsonMsg);break;case SIGNAL_TYPE_ANSWER://新添2handleAnswer(jsonMsg);break;                 case SIGNAL_TYPE_CANDIDATE://新添3handleCandidate(jsonMsg);break;}
});

首先完成offer信令处理函数：
当收到视频流 offer 消息时，它会提取房间ID、用户ID和远程用户ID，然后检查房间Map中是否存在该用户ID。如果存在用户ID，它会将消息发送给远程用户。
实现原理如下：

  1. 获取房间ID和用户ID。
  2. 获取房间Map。
  3. 检查用户ID是否存在于房间Map中。
  4. 如果远程用户存在，将消息发送给远程用户。
  5. 如果不存在，输出错误信息。
function handleOffer(message){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;var remoteUid = message.remoteUid;console.info("handleOffer uid:" + uid + " send offer to remoteUid: " + remoteUid);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);if(roomMap == null){console.error("roomId:" + roomId + " is not exist");return;}if(roomMap.get(uid) == null){console.error("uid:" + uid + " is not exist in roomId:" + roomId);return;}var remoteClient = roomMap.get(remoteUid);if(remoteClient){var msg = JSON.stringify(message);remoteClient.conn.sendText(msg);}else{console.error("remoteUid:" + remoteUid + " is not exist in roomId:" + roomId);}
}

answer和candidate信令处理函数逻辑与offer几乎一样，简单修改函数名称和打印信息即可：

function handleAnswer(message){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;var remoteUid = message.remoteUid;console.info("handleAnswer uid:" + uid + " send answer to remoteUid: " + remoteUid);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);if(roomMap == null){console.error("roomId:" + roomId + " is not exist");return;}if(roomMap.get(uid) == null){console.error("uid:" + uid + " is not exist in roomId:" + roomId);return;}var remoteClient = roomMap.get(remoteUid);if(remoteClient){var msg = JSON.stringify(message);remoteClient.conn.sendText(msg);}else{console.error("remoteUid:" + remoteUid + " is not exist in roomId:" + roomId);}
}function handleCandidate(message){// 获取房间ID和用户IDvar roomId = message.roomId;var uid = message.uid;var remoteUid = message.remoteUid;console.info("handleCandidate uid:" + uid + " send Candidate to remoteUid: " + remoteUid);// 获取房间Mapvar roomMap = roomTableMap.get(roomId);if(roomMap == null){console.error("roomId:" + roomId + " is not exist");return;}if(roomMap.get(uid) == null){console.error("uid:" + uid + " is not exist in roomId:" + roomId);return;}var remoteClient = roomMap.get(remoteUid);if(remoteClient){var msg = JSON.stringify(message);remoteClient.conn.sendText(msg);}else{console.error("remoteUid:" + remoteUid + " is not exist in roomId:" + roomId);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/7164.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue3引入element-plus完整步骤

vue3引入element-plus完整步骤

在Vue 3项目中引入Element Plus的完整步骤如下： 安装Element Plus： 使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。在项目的根目录下，打开命令行工具并执行以下命令&#x…
阅读更多...
Python深度学习：【模型系列】强化学习简介及优质学习资源

Python深度学习：【模型系列】强化学习简介及优质学习资源

文章目录 1.强化学习概述基本组成主要算法类别应用领域2.优质在线学习资源1.强化学习概述 强化学习（Reinforcement Learning, RL）是机器学习的一个子领域，它涉及智能体（agent）通过与环境的交互来学习如何在给定的任务中最大化某种累积奖励。 强化学习不同于监督学习，它…
阅读更多...
自动驾驶主流芯片及平台架构（二）特斯拉自动驾驶芯片平台介绍

自动驾驶主流芯片及平台架构（二）特斯拉自动驾驶芯片平台介绍

早期 对外采购mobileye EyeQ3 芯片摄像头半集成方案，主要是为了满足快速量产需求，且受制于研发资金不足限制； 中期 采用高算力NVIDIA 芯片平台其他摄像头供应商的特斯拉内部集成方案，mobileye开发节奏无法紧跟特斯拉需求&#xff…
阅读更多...
如何取消xhr / fetch / axios请求

如何取消xhr / fetch / axios请求

如何取消xhr请求 setTimeout(() > { xhr.abort() }, 1000)如何取消fetch请求 fetch()请求发送以后，如果中途想要取消，需要使用AbortController对象。 let controller new AbortController(); let signal controller.signal;fetch(url, {signal:…
阅读更多...
论生命价值

论生命价值

我们该如何定义一个人的生命价值，这是一个十分值得我们深思的问题，而谈论到生命的价值，我们先从非人的东西去谈论它的价值，从我们作为人的角度去思考价值，一个东西对我们有用，这个东西能够让我们的主观上的…
阅读更多...
【简单介绍下Debian常用命令】

【简单介绍下Debian常用命令】

🎥博主：程序员不想YY啊 💫CSDN优质创作者，CSDN实力新星，CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出…
阅读更多...
基于51单片机的手动数字时钟设计

基于51单片机的手动数字时钟设计

基于51单片机的手动数字时钟 （仿真＋程序） 功能介绍 具体功能： 1.八位数码管显示时分秒，格式为XX-XX-XX； 2.六个按键控制时、分、秒的加减； 3.复位按键重新计时； ​演示视频&am…
阅读更多...
代码随想录-算法训练营day27【回溯算法03：组合总和、分割回文串】

代码随想录-算法训练营day27【回溯算法03：组合总和、分割回文串】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第七章 回溯算法part03● 39. 组合总和 ● 40.组合总和II ● 131.分割回文串详细布置 39. 组合总和 本题是 集合里元素可以用无数次，那么和组合问题的差别 其实仅在于 startIndex上的控制题目链接/文章讲解：https://…
阅读更多...
ESG视角下的多期DID构建（2009-2022年）4.5万+数据

ESG视角下的多期DID构建（2009-2022年）4.5万+数据

随着ESG信息越来越受到重视，一些第三方评级机构开始推出ESG评级产品，目前在第三方数据库能够查到华证、富时罗素、商道融绿、社会价值投资联盟以及Wind自有的ESG评级数据等。其中，商道融绿是中国最早发布ESG评级数据的机构，也是国…
阅读更多...
代码随想录-算法训练营day29【回溯算法05：递增子序列、全排列】

代码随想录-算法训练营day29【回溯算法05：递增子序列、全排列】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第七章 回溯算法part05* 491.递增子序列 * 46.全排列 * 47.全排列 II详细布置 491.递增子序列 本题和大家刚做过的 90.子集II 非常像，但又很不一样，很容易掉坑里。 https://programmercarl.com/0491.%E9%80%92%E5%A…
阅读更多...
独孤思维：做副业吵架互怼后，该赚钱继续赚钱

独孤思维：做副业吵架互怼后，该赚钱继续赚钱

01 我从来都没有觉得别人指出我的问题，甚至骂我是不应该的。 每个人，都有表达自己观点的权利。 更何况，人家如果指出的问题，正好是我应该提升的地方。 我当然要虚心接受。 这没有什么丢人的，也没有什么好抗拒的。…
阅读更多...
产业空间集聚DO指数计算

产业空间集聚DO指数计算

1.前言 创始人 :Duranton and Overman（2005） 目前应用较多的产业集聚度量指数主要基于两类，一是根据不同空间地理单元中产业经济规模的均衡性进行构造，如空间基尼系数与EG指数；二是基于微观企业地理位置信息形成的产业…
阅读更多...
商城数据库88张表结构完整示意图41~50（十二）

商城数据库88张表结构完整示意图41~50（十二）

四十一： 四十二： 四十三： 四十四： 四十五： 四十六： 四十七： 四十八： 四十九： 五十：
阅读更多...
论文速递｜Management Science 三月文章精选（下）

论文速递｜Management Science 三月文章精选（下）

编者按 在本月 MS 文章精选中，我们梳理了顶刊 Management Science 三月份发布有关OR/OM/FE以及相关应用的文章基本信息，旨在帮助读者快速洞察行业/学界最新动态。本文为第二部分（2/2）。 推荐文章1 ● 题目：How Much C…
阅读更多...
08_其他因素

08_其他因素

对象终止、软引用、弱引用、虚引用 应用程序有时会使用 finalization 和弱引用、软引用或虚引用与垃圾收集进行交互。 然而，不鼓励使用 finalization。它可能会导致安全、性能和可靠性问题。例如，依赖 finalization 来关闭文件描述符会使外部资源&…
阅读更多...
CTF_RE周报（三）

CTF_RE周报（三）

主要是复现XY的题目，嗯，这周刷题也感觉到了一点问题：不能太依赖wp了，但是后面的题目额也确实不看wp都不知道怎么下手有的，还是需要控制好那个度。 一，16位DOS程序 这类题目好像已经不好运行了&#xff0c…
阅读更多...
【GameFi】链游 | Seraph | 区块链上的动作角色扮演 NFT 装备收集和掠夺游戏

【GameFi】链游 | Seraph | 区块链上的动作角色扮演 NFT 装备收集和掠夺游戏

官网下载 新赛季公告：https://www.seraph.game/#/news/357 开始时间：2024年4月19日 11:00 (UTC8） discard会有人发送一些激活码，或者有一些活动，只需要填表格关注账号，参与了就会将激活码发到你的邮箱 …
阅读更多...
AI不只是技术，更是一种思维方式

AI不只是技术，更是一种思维方式

一、AI思维 1.个人：提升自己的综合能力，成为一名懂技术、懂设计、懂硬件、懂市场运营等知识的综合型人才 2.数据：从全局视角看数据流向，挖掘数据价值 3.产品：运用新技术，发掘新需求点，探索产…
阅读更多...
在线编辑、预览、基于wps web office，v3版 强势来袭

在线编辑、预览、基于wps web office，v3版 强势来袭

说明 v1 版本已经不再更新了，官方也只是提供以前申请下来的账号能继续使用，新申请，需要用到v3了v3 版本sdk参考 wps-weboffice-sdk-v3, 里面有很详细的注释v3 集成方法，后端请参考wps-weboffice-v3-demo, 实现你需要对接的接口即…
阅读更多...
io (fscanf fprintf)

io (fscanf fprintf)

20 #include <sys/un.h>21 typedef struct stu22 {23 char name[16];24 int age;25 double score;26 }stu;27 int main(int argc, const char *argv[])28 {29 /* 有如下结构体30 31 申请该结构体数组&#xff0c;容量为5&#xff0c;初始化5个学生的信息32 …
阅读更多...
最新文章

Copyright @ 2022~2023