ui网页设计字体_电商自建站_中国营销策划第一人_湖南网站营销seo多少费用

2024-9-19
梳理信令处理的函数嵌套及实现思路

一对一视频通话

New_peer信令处理

ZeroRTCEngine.prototype.onMessage = function (event) {console.log("onMessage: " + event.data);var jsonMsg = null;try {jsonMsg = JSON.parse(event.data);//解序列化} catch(e) {console.warn("onMessage parse Json failed:" + e);return;}switch (jsonMsg.cmd) {//解析信令（图中橙色框）case SIGNAL_TYPE_NEW_PEER:handleRemoteNewPeer(jsonMsg);break;case SIGNAL_TYPE_RESP_JOIN:handleResponseJoin(jsonMsg);break;case SIGNAL_TYPE_PEER_LEAVE:handleRemotePeerLeave(jsonMsg);break;case SIGNAL_TYPE_OFFER:handleRemoteOffer(jsonMsg);break;case SIGNAL_TYPE_ANSWER:handleRemoteAnswer(jsonMsg);break;case SIGNAL_TYPE_CANDIDATE:handleRemoteCandidate(jsonMsg);break;}
}           function handleRemoteNewPeer(message) {console.info("handleRemoteNewPeer, remoteUid: " + message.remoteUid);remoteUserId = message.remoteUid;doOffer();
}function doOffer() {// 创建RTCPeerConnectionif (pc == null) {createPeerConnection();}pc.createOffer().then(createOfferAndSendMessage).catch(handleCreateOfferError);
}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("handleIceCandidate message: " + message);console.info("send candidate message");} else {console.warn("End of candidates");}
}function handleRemoteStreamAdd(event) {console.info("handleRemoteStreamAdd");remoteStream = event.streams[0];remoteVideo.srcObject = remoteStream;
}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);zeroRTCEngine.sendMessage(message);// console.info("send offer message: " + message);console.info("send offer message");}).catch(function (error) {console.error("offer setLocalDescription failed: " + error);});}function handleCreateOfferError(error) {console.error("handleCreateOfferError: " + error);
}

当执行信令 handleRemoteNewPeer 时，表示有一个新的远程对等体加入了房间，并且这个信息已经通过 WebSocket 接收并被解析为 JSON 对象 message。
handleRemoteNewPeer 信令的详细执行流程：

1. 记录日志：

   • console.info("handleRemoteNewPeer, remoteUid: " + message.remoteUid);：在控制台输出一条信息，表明一个新的远程对等体已经加入，同时显示这个对等体的用户 ID。

2. 保存远程用户 ID：

   • remoteUserId = message.remoteUid;：将消息中的 remoteUid 保存到全局变量 remoteUserId 中。这个 ID 用于标识远程对等体，后续的 WebRTC 操作（如发送 offer）会使用这个 ID 来指定目标用户。

3. 创建 WebRTC 连接：

   • doOffer();：调用 doOffer 函数，开始创建 WebRTC 连接并发送 offer。这个函数的作用是初始化 RTCPeerConnection 对象（如果尚未创建），并创建一个 offer 来开始协商过程。

4. 创建 RTCPeerConnection 对象：

   • 如果 pc（RTCPeerConnection 对象）为 null，则调用 createPeerConnection 函数来创建一个新的 RTCPeerConnection 对象。这个对象负责管理 WebRTC 连接的协商和维护。

5. 设置 ICE 候选者和远程媒体流事件处理：

   • 在 createPeerConnection 函数中，为 RTCPeerConnection 对象设置了 onicecandidate 和 ontrack 事件处理函数。onicecandidate 处理本地 ICE 候选者的生成，而 ontrack 处理远程媒体流的添加。
     在 WebRTC 中，ICE（Interactive Connectivity Establishment）协议用于在对等体之间建立连接。这个过程需要通过一系列的步骤来发现并验证不同的网络路径，以找到可以用于媒体传输的最佳路径。以下是设置 ICE 候选者和远程媒体流事件处理的详细解析：

---

1. ICE 候选者（ICE Candidates）：

   • ICE 候选者是网络接口的描述，可以用来在对等体之间传输媒体流。每个候选者包括一个网络地址和一个端口号，以及可能的其他元数据，如传输协议类型（如 UDP 或 TCP）。

2. 收集 ICE 候选者：

   • RTCPeerConnection 对象在创建时会开始 ICE 候选者的收集过程。这个过程是异步的，会在不同的时间点生成多个候选者。

3. 设置 onicecandidate 事件处理函数：

   • pc.onicecandidate = handleIceCandidate;：为 RTCPeerConnection 对象设置 onicecandidate 事件处理函数。每当有新的 ICE 候选者生成时，这个事件处理函数会被调用。

4. 处理 ICE 候选者事件：

   • handleIceCandidate(event)：这个函数会在 onicecandidate 事件触发时执行。它检查事件对象 event 是否包含 candidate 属性。

5. 发送 ICE 候选者：

   • 如果 event.candidate 存在，表示有一个可用的 ICE 候选者。这个候选者会被序列化为 JSON 格式，并封装在一个信令消息中，然后通过 WebSocket 发送给远程对等体。
   • var jsonMsg = { 'cmd': 'candidate', ... };：创建一个包含信令类型、房间 ID、用户 ID 和候选者数据的 JSON 对象。
   • var message = JSON.stringify(jsonMsg);：将 JSON 对象转换为字符串，以便通过网络发送。
   • zeroRTCEngine.sendMessage(message);：调用 ZeroRTCEngine 实例的 sendMessage 方法，将消息发送给远程对等体。

6. 结束候选者收集：

   • 如果 event.candidate 不存在，表示候选者收集过程已经结束。这时，可以发送一个特殊的信令消息，告知远程对等体没有更多的候选者。

7. 远程媒体流事件处理：

   • pc.ontrack = handleRemoteStreamAdd;：为 RTCPeerConnection 对象设置 ontrack 事件处理函数。每当远程媒体流的第一帧数据到达时，这个事件处理函数会被调用。

8. 处理远程媒体流：

   • handleRemoteStreamAdd(event)：这个函数会在 ontrack 事件触发时执行。它获取事件对象 event 中的远程媒体流，并将其绑定到远程视频元素上，以便在网页上显示远程视频。

9. 显示远程视频：

   • remoteVideo.srcObject = remoteStream;：将远程媒体流 remoteStream 绑定到远程视频元素 remoteVideo 上。这样，远程视频流就会在视频元素中播放。

---

6. 添加本地媒体流到 RTCPeerConnection：

   • localStream.getTracks().forEach((track) => pc.addTrack(track, localStream));：将本地媒体流 localStream 的轨道添加到 RTCPeerConnection 对象中。这样，当连接建立后，本地媒体流可以被远程对等体接收。

7. 创建并发送 offer：

   • pc.createOffer().then(createOfferAndSendMessage).catch(handleCreateOfferError);：调用 RTCPeerConnection 对象的 createOffer 方法来创建一个新的 offer。创建成功后，通过 createOfferAndSendMessage 函数将 offer 封装为 JSON 消息并通过 WebSocket 发送给远程对等体。

8. 处理创建 offer 错误：

   • 如果在创建 offer 过程中出现错误，catch 块会捕获这个错误，并调用 handleCreateOfferError 函数来记录错误信息。

总结来说，当执行 handleRemoteNewPeer 信令时，应用程序会为新加入的远程对等体创建一个 WebRTC 连接，并开始协商过程，以便进行音频和视频通信。这个过程包括创建 RTCPeerConnection 对象、添加本地媒体流、创建 offer 并发送给远程对等体。