一对一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://新添1
            handleOffer(jsonMsg);
            break;
        case SIGNAL_TYPE_ANSWER://新添2
            handleAnswer(jsonMsg);
            break;                 
        case SIGNAL_TYPE_CANDIDATE://新添3
            handleCandidate(jsonMsg);
        break;
    }
});

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

  1. 获取房间ID和用户ID。
  2. 获取房间Map。
  3. 检查用户ID是否存在于房间Map中。
  4. 如果远程用户存在，将消息发送给远程用户。
  5. 如果不存在，输出错误信息。
function handleOffer(message){
    // 获取房间ID和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    var remoteUid = message.remoteUid;
    console.info("handleOffer uid:" + uid + " send offer to remoteUid: " + remoteUid);

    // 获取房间Map
    var 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和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    var remoteUid = message.remoteUid;
    console.info("handleAnswer uid:" + uid + " send answer to remoteUid: " + remoteUid);

    // 获取房间Map
    var 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和用户ID
    var roomId = message.roomId;
    var uid = message.uid;
    var remoteUid = message.remoteUid;
    console.info("handleCandidate uid:" + uid + " send Candidate to remoteUid: " + remoteUid);

    // 获取房间Map
    var 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.mfbz.cn/a/593996.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Cocos2d，一个能实现梦想的 Python 库

Cocos2d，一个能实现梦想的 Python 库

大家好！我是爱摸鱼的小鸿，关注我，收看每期的编程干货。 一个简单的库，也许能够开启我们的智慧之门， 一个普通的方法，也许能在危急时刻挽救我们于水深火热， 一个新颖的思维方式，也许能…
阅读更多...
神经网络之防止过拟合

神经网络之防止过拟合

今天我们来看一下神经网络中防止模型过拟合的方法 在机器学习和深度学习中，过拟合是指模型在训练数据上表现得非常好，但在新的、未见过的数据上表现不佳的现象。这是因为模型过于复杂，以至于它学习了训练数据中的噪声和细节，而不…
阅读更多...
保研面试408复习 2——操作系统、计网

保研面试408复习 2——操作系统、计网

文章目录 1、操作系统一、进程、线程的概念以及区别？二、进程间的通信方式？ 2、计算机网络一、香农准则二、协议的三要素1. 语法2. 语义3. 时序 标记文字记忆，加粗文字注意，普通文字理解。 1、操作系统 一、进程、线程的概念以及…
阅读更多...
揭秘大模型应用如何成为当红顶流？

揭秘大模型应用如何成为当红顶流？

Kimi广告神话背后的关键词战略 如果你生活在中国，你可能不认识ChatGPT，但你一定知道Kimi。无论是学生党还是打工人，都无法避开Kimi的广告。 刘同学在B站上搜教学视频时，弹出了一则软广，上面写着：“作业有…
阅读更多...
python学习笔记B-16：序列结构之字典--字典的遍历与访问

python学习笔记B-16：序列结构之字典--字典的遍历与访问

下面是字典的访问和遍历方法： d {10:"hello",20:"python",30:"world"} print(d[10],"--",d[20],"--",d[30]) print(d.get(10)) print("以上两种访问方式的区别是，d[key]若键是空值&#xff0c…
阅读更多...
代码随想录算法训练营Day12 | 239.滑动窗口最大值、347.前K个高频元素

代码随想录算法训练营Day12 | 239.滑动窗口最大值、347.前K个高频元素

239.滑动窗口最大值 题目：给你一个整数数组 nums，有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1： 输入&#xff1…
阅读更多...
创造价值与回报：创业者的思维格局与商业智慧

创造价值与回报：创业者的思维格局与商业智慧

在纷繁复杂的商业世界中，有一种信念始终贯穿于无数创业者的心中——那就是创造价值。张磊的这句“只要不断地创造价值，迟早会有回报”道出了创业者的核心思维格局和商业智慧。本文将从创业者的角度，探讨创造价值的重要性，以及如何…
阅读更多...
动态炫酷的新年烟花网页代码

动态炫酷的新年烟花网页代码

烟花效果的实现可以采用前端技术，如HTML、CSS和JavaScript。通过结合动画、粒子效果等技术手段，可以创建出独特而炫目的烟花效果。同时，考虑到性能和兼容性，需要确保效果在各种设备上都能够良好运行。 效果显示http://www.bokequ.…
阅读更多...
【分布式系统的金线】——Base理论深度解析与实战指南

【分布式系统的金线】——Base理论深度解析与实战指南

关注微信公众号 “程序员小胖” 每日技术干货，第一时间送达！ 引言 在当今这个数据密集、服务分布的数字时代，设计高效且可靠的分布式系统成为了技术领域的核心挑战之一。提及分布式系统设计的理论基石，CAP理论——即一致性(Cons…
阅读更多...
[HNOI2003]激光炸弹

[HNOI2003]激光炸弹

原题链接：登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二维前缀和板题。 注意从（1,1）开始存即可，所以每次输入x,y之后，要x,y。 因为m的范围最大为…
阅读更多...
uniapp+vue基于移动端的药品进销存系统r275i

uniapp+vue基于移动端的药品进销存系统r275i

最后我们通过需求分析、测试调整，与药品进销存管理系统管理系统的实际需求相结合，设计实现了药品进销存管理系统管理系统。 系统功能需求包含业务需求、功能需求用户需求，系统功能需求分析是在了解用户习惯、开发人员技术和实力等各个因素的前…
阅读更多...
美易官方：2024美联储降息，该如何布局

美易官方：2024美联储降息，该如何布局

2024美联储降息，该如何布局 #热点引擎计划# 随着2024年美联储降息预期的逐渐升温，全球投资者开始重新考虑其资产配置策略。中金公司认为，面对这一重要的经济事件，投资者需要密切关注市场动态，灵活调整投资策略&#xf…
阅读更多...
线性数据结构-手写队列-哈希(散列)Hash

线性数据结构-手写队列-哈希(散列)Hash

什么是hash散列？ 哈希表的存在是为了解决能通过O(1)时间复杂度直接索引到指定元素。这是什么意思呢？通过我们使用数组存放元素，都是按照顺序存放的，当需要获取某个元素的时候，则需要对数组进行遍历，获取到指…
阅读更多...
SWMM排水管网水力、水质建模及在海绵与水环境中的应用

SWMM排水管网水力、水质建模及在海绵与水环境中的应用

随着计算机的广泛应用和各类模型软件的发展，将排水系统模型作为城市洪灾评价与防治的技术手段已经成为防洪防灾的重要技术途径。美国环保局的雨水管理模型（SWMM），是当今世界最为著名的排水系统模型。SWMM能模拟降雨和污染物质经过…
阅读更多...
触动精灵纯本地离线文字识别插件

触动精灵纯本地离线文字识别插件

目的 触动精灵是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务，节省大量人工操作的时间。但触动精灵的图色功能比较单一，无法识别屏幕上的图像，根据图像的变化自动执行相应的操作。本篇文章主要讲解…
阅读更多...
利用大语言模型（KIMI）构建智能产品的信息模型

利用大语言模型（KIMI）构建智能产品的信息模型

数字化的核心是数字化建模，为一个事物构建数字模型是一件非常繁杂和耗费人工的事情。利用大语言模型，能够轻松地生成设备的信息模型，我们的初步实验表明，只要提供足够的模板，就能够准确地生成设备的数字化模型。 我们尝…
阅读更多...
python数据分析——在数据分析中有关概率论的知识

python数据分析——在数据分析中有关概率论的知识

参数和统计量 前言一、总体二、样本三、统计抽样四、随机抽样4.1. 抽签法4.2. 随机数法 五、分层抽样六、整群抽样七、系统抽样八、统计参数九、样本统计量十、样本均值和样本方差十一、描述样本集中位置的统计量11.1. 样本均值11.2. 样本中位数11.3. 样本众数 十二、描述样本分…
阅读更多...
电脑怎样才能每天定时自动打开指定文件？定时打开指定文件的方法

电脑怎样才能每天定时自动打开指定文件？定时打开指定文件的方法

要实现电脑每天定时自动打开指定文件，你可以采用多种方法，其中最常见和可靠 的是使用汇帮定时精灵和操作系统的任务计划程序。下面我将为你详细介绍这两种方 法。 方法一，使用汇帮定时精灵【汇帮定时精灵】提供了更多的选项和功能&#xff0c…
阅读更多...
Git常用（持续更新）

Git常用（持续更新）

常用场景： 初始化： git config --global user.name "codelabs" git config --global user.email mycodelabs.com git init git remote add origin https://github.com/username/repository.git git pull origin master 提交： gi…
阅读更多...
开源版本管理系统的搭建二：SVN部署及使用

开源版本管理系统的搭建二：SVN部署及使用

作者：私语茶馆 1. Visual SVN Server部署 SVN Server部署包括： 创建版本仓库创建用户 这些部署是通过VisualSVN Server Manager实现的，如下图： VisualSVN Server Manager（安装后自带） 1.1.SVN 初始化配…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站