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

最新推荐文章于 2025-04-21 15:28:24 发布
最新推荐文章于 2025-04-21 15:28:24 发布
阅读量2.6k 收藏 35
点赞数 56
分类专栏： webrtc 文章标签： webrtc 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45087381/article/details/138339572
版权
本文详细描述了WebRTC一对一视频通话中的offer、answer和candidate信令流程，包括客户端和服务端的交互，以及如何在RTCPeerConnection上设置和转发SDP。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

offer、answer、candidate信令实现

整体实现思路

整体实现思路(红色部分为客户端，蓝色为服务端)：
（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);
    }
}
WebRTC实现一个简单的视频通话
天涯学馆
10-23 171
基本原理是通过WebSocket或其他机制，发送和接收上述的offer、answer和ICE候选信息，并在两端正确处理这些信息。RTCPeerConnection是WebRTC的核心组件，负责建立和维护两个浏览器之间的点对点连接。首先，需要请求用户的媒体设备权限，通常是摄像头和麦克风，以便捕获视频和音频流。监听RTCPeerConnection的状态变化，以及远程媒体流的添加。当需要改变媒体流（如切换摄像头或改变分辨率）时，需要重新协商媒体会话。来监测音频流的活动水平，从而决定是否暂停音频发送。
WebRTC offer - answer交换sdp流程分析
云上听风的博客
05-16 6861
被WebRTC自带oc版本的例子恶心到了，不做笔记还真不行。 两端开启音视频通讯时，一方做为offer主动发出邀请，另一方做为answer被动等待offer的邀请做出反应。 代码中的流程： Offer: 1. offerForConstraints，得到sdp后回调 <第1.1步>。 1.1. didCreateSessionDescription，如果有错直接返回...
WebRTC核心之SDP详解 十一、第三节 WebRTC中Offer_AnswerSDP
xyphf的博客
08-02 1635
在我们之前的课程中我们已经介绍了SDP的规范是什么，非常简单它分为两层，一层是会话层一层是媒体层， 会话层呢，主要包括了一些这个会话的这个名字啊，目的还有这个时间呢，媒体层呢，就是一个媒体音频视频。那么在媒体层呢，又可以通过attribute属性来去对媒体作进一步的说明，这个呢就是这个SDP的规范，那么紧接着呢，我们又介绍了WebRTC中如何使用SDP的，不知道大家还记怎么记得他一共是五大项，包括了会话、网络、服务质量、加密，还有一个是这个媒体就是流相关的，对吧，一共是五项，那大家对这一块儿一定要好好看一
什么是SDP Offer？
最新发布
u010162632的博客
04-21 427
SDP Offer（Session Description Protocol Offer） 是VoLTE/IMS通话建立过程中，由主叫方（Caller）在SIP信令（如INVITE）中发送的媒体协商参数，用于向被叫方（Callee）提议本次会话的媒体类型（如语音、视频）、编解码格式、IP地址、端口号以及QoS（服务质量）要求等。| `NV_IMS_SDP_QOS_MANDATORY` | 是否强制本地QoS预留 | `1`（强制） |
WebRTC源码研究（32）获取offer answer创建的SDP
kyl282889543的博客
06-18 828
文章目录WebRTC源码研究（32）获取offer answer创建的SDP WebRTC源码研究（32）获取offer answer创建的SDP
在 WebRTC 中，Offer/Answer 模型是协商 WebRTC 连接参数的关键部分
dualvencsdn的博客
12-20 1007
在 WebRTC 中，Offer/Answer 模型是协商 WebRTC 连接参数的关键部分。在实际调试中，通常需要对网络和信令进行详细的日志记录，以便更好地理解问题所在。如果问题仍然存在，请提供更多关于具体错误、浏览器和代码的信息，以便能够提供更具体的帮助。检查浏览器控制台的错误信息，以获取有关 Offer/Answer 交换失败的更多详细信息。确保网络状况良好，特别是在进行 SDP 交换的关键时刻。确保双方支持的媒体参数是一致的。确保使用最新版本的浏览器，并检查是否有特定于浏览器的问题。
基于SDP的提议/应答（offer/answer）模型简介
学习是为了探索这个世界的本质
08-29 1646
1、引入 在松耦合会议中，会话参数完全由会议创建者来确定，参与者能做的仅仅是根据这些会话参数来加入会议（当然也可以选择不加入）。这种情况下，主要要做的就是会话描述，在这里SDP本身就足够了。 但是在更为普遍的两方会话的情况下，由于用户终端能力的差异，任何一方不能假设对方一定支持某种会话参数，所以必须双方协商来最终就会话的参数达成一致。显然，SDP能做到准确的描述会话的参数，但是它缺少双发如何根
webRTC信令服务器实现音视频聊天
04-23
在本文中，我们将探讨如何使用Node.js和Socket.IO构建一个WebRTC信令服务器，实现局域网内的音视频聊天功能。 首先，**信令**是WebRTC通信过程中的关键部分，用于协商和控制音视频通话的建立、管理和结束。在本Demo...
vue项目基于WebRTC实现一对一音视频通话
m0_74823595的博客
12-10 576
1、在 chrome 中 输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure。完整代码gitee地址： https://gitee.com/wade-nian/wdn-webrtc.git。3、添加你服务器的地址 例如：http://192.168.1.10:8080。2、找到Insecure origins treated as secure。5、点击右下角的Relaunch即可。4、选择Enabled属性。
WebRTC项目一对一视频
weixin_50873490的博客
11-08 1156
信令服务器设计，主要是转发客户端发来的消息到对端，根据类型进行转发。学习资料分享。
webrtc_windows_CreateOffer
09-14
windows平台，vs2013，源码时间2015-5月，创建Webrtc CreateOffer步骤
SDP的offer/answer模型
08-12
转载网络上的，由于http://blog.csdn.net/liaoxinmeng/article/details/6949351 无图不方便，找齐图片版的（但仍然感谢）。还有 http://blog.sina.com.cn/s/blog_6b10255301012kqs.html 感谢以上博客，还有其他相关博客。在此借花献佛了。
vue3实现WebRTC实战1v1通话-后端代码(nestjs)
01-09
3. **信令流程**：在1v1视频通话中，前端需要通过信令服务器交换offer、answer和candidate信息。Vue组件可以通过HTTP请求或WebSocket与后端NestJS服务器交互，发送和接收这些信令数据，以建立和维护RTC连接。 4. **...
【Javascript】【WebRTC】WebRTC从原理到实现（六）：信令设计
天天向上 Up Up Up (*^▽^*)
01-11 653
两个设备之间建立RTC连接，需要知道彼此的地址，设备信息，媒体信息等 信令服务器帮助两个设备交换这些信息，只要这些消息交换完成了，就可以建立连接 具体信令设计是可以变通的，也不一定要用Socket，这里提供一种实现方案 （网络上有很多现成的ICE服务器，按教程搭建即可，这里不再介绍） ...
webRTC（八）：查看offer/answer 的 SDP
黄孝果的博客
03-03 2882
创建媒体 function getStream(){ var constraints = { audio:true, video:true } navigator.mediaDevices.getUserMedia(constraints) .then(getMediaStream) .catch(handError); } ...
WebRtc学习资料整理
fishmai的专栏
12-13 1228
很久没有写了，尤其是技术文章，总感觉很难受。这里总结一下最近的学习内容。 官网永远是最重要，但同时也是最容易忽略的学习途径。So you should look official websites firtsly.。 先看一看基础概念的解释 WebRTC 相關縮寫名詞簡介 推荐一种方式，打开官方给的例子，然后通过浏览器调试，定位到控制到就能够看到这个流程了。We
WebRTC：生成Offer
IdcEditor的博客
09-24 237
在上面的代码中，我们创建了一个RTCPeerConnection对象，并传入了ICE服务器的配置。通过使用WebRTC的RTCPeerConnection接口，我们可以轻松地生成SDP offer并建立对等连接。以上是生成SDP offer的基本步骤，开发人员可以根据具体需求进行进一步的定制和扩展。最后，我们可以对本地的SDP offer进行处理，可以将其发送给远程对等端，以便建立对等连接。注意：上述代码为简化示例，实际应用中可能需要处理错误和添加更多的功能，如ICE候选人收集和协商等。
WebRTC源码分析——记一次Offer && Answer SDP备用
ice_ly000的博客
05-10 1233
1. 引言 这两个sdp是进行1v1会话时获取的，这个会话中有：双向传递音视频 + 单向传递1路白板视频(抓取桌面) + 双向数据通道。此处记录下来，用于后续分析 2. Offer SDP v=0 o=- 6577481781483453854 2 IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE 0 1 2 3 a=msid-semantic: WMS audio_label video_label m=audio 9 UDP/TLS/RTP/SAVPF 111 103
udp和webrtc实现视频聊天
01-03
### 使用 UDP 和 WebRTC 实现视频聊天 #### 创建 RTCPeerConnection 对象并配置 ICE 代理 为了使两个浏览器之间可以互相发送和接收音视频数据，需要创建 `RTCPeerConnection` 对象。此对象负责管理整个通信过程中的交互细节。 ```javascript const configuration = { iceServers: [ { urls: 'stun:stun.l.google.com:19302' } ] }; let pc = new RTCPeerConnection(configuration); ``` 上述代码片段展示了如何初始化一个带有 STUN 服务器设置的 Peer Connection[^4]。 #### 添加本地媒体轨道到连接中 获取用户的摄像头权限并将捕获的数据流添加至已建立好的 peer connection 中： ```javascript async function start() { let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false }); document.querySelector('video').srcObject = stream; stream.getTracks().forEach(track => { pc.addTrack(track, stream); }); } start(); ``` 这段脚本实现了请求访问用户设备上的摄像机资源，并将其关联到 HTML 页面内的 `<video>` 元素上显示出来；同时也把每一条 track 注册到了之前定义过的 PC 实例里去。 #### 处理候选地址 (ICE Candidates) 当发现新的网络接口时，PeerConnection 将触发 `icecandidate` 事件来通知开发者有可用的新路径可用于两方之间的直接联系。这些信息对于穿越 NAT 或防火墙至关重要。 ```javascript pc.onicecandidate = event => { if (!event.candidate) return; console.log(`New candidate found:\n${JSON.stringify(event.candidate.toJSON())}`); // Send this information to the remote party via signaling channel. }; ``` 每当检测到一个新的 ICE 候选者时就会执行上面指定的日志记录逻辑并向远端传递该消息以便于它能更新自己的路由表。 #### 发送 Offer 并等待 Answer 发起呼叫的一侧应当构建 SDP offer 来提议本次会话所使用的编解码器及其他参数组合。之后通过信令通道传送给接听者的应用层程序处理。 ```javascript async function doCall() { try { const offer = await pc.createOffer(); await pc.setLocalDescription(offer); console.log(`Offer from local\n${pc.localDescription.sdp}`); // The offer needs to be sent through a signaling server or another out-of-band mechanism. } catch(err){ console.error("Error creating offer:", err); } } // Call when ready... doCall(); ``` 一旦设置了本地描述符后就可以准备向另一终端发出邀请了。注意这里并没有具体说明怎样完成实际的消息传送工作——这取决于应用程序的设计需求以及选用的具体协议栈（比如 WebSocket、HTTP Long Polling 等）。同样地，在接收到响应 answer 后也需要调用相应方法来进行确认。 #### 接收远程 Answer 并继续协商 被叫方在接收到 offer 后应该解析其中的内容并与自身的硬件条件相匹配从而给出最合适的回应方案即所谓的 "answer" 。随后再次经过相同的流程返回给原作者以达成最终一致意见。 ```javascript function handleAnswer(answerSdp) { var desc = new RTCSessionDescription({ type: 'answer', sdp: answerSdp, }); pc.setRemoteDescription(desc).then(() => { console.log("Successfully set remote description."); }).catch((error) => { console.error(error.name + ": " + error.message); }); } ``` 以上步骤完成后即可建立起稳定的双向实时多媒体传输链路。值得注意的是在整个过程中涉及到大量异步操作所以建议采用现代 JavaScript 特性如 async/await 结构化错误捕捉机制提高可读性和健壮性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

君莫笑lucky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值