关于 webrtc 中使用 socket,io 的套接字连接答案

【问题标题】：about socket connection in webrtc using socket,io关于 webrtc 中使用 socket,io 的套接字连接
【发布时间】：2018-05-24 16:33:14
【问题描述】：

我正在研究点对点视频聊天，我关注谷歌 Codelab 进行学习。我只是从 html 5 Rocks 网站阅读了关于 webrtc 的理论部分，所以我不太了解套接字连接的编码部分.

代码实验室的链接是 https://codelabs.developers.google.com/codelabs/webrtc-web/#2 请访问步骤 05。

我不明白“main.js”文件中的以下部分。

socket.on('message', function(message) {
  console.log('Client received message:', message);
  if (message === 'got user media') {
    maybeStart();
  } else if (message.type === 'offer') {
    if (!isInitiator && !isStarted) {
      maybeStart();
    }
    pc.setRemoteDescription(new RTCSessionDescription(message));
    doAnswer();
  } else if (message.type === 'answer' && isStarted) {
    pc.setRemoteDescription(new RTCSessionDescription(message));
  } else if (message.type === 'candidate' && isStarted) {
    var candidate = new RTCIceCandidate({
      sdpMLineIndex: message.label,
      candidate: message.candidate
    });
    pc.addIceCandidate(candidate);
  } else if (message === 'bye' && isStarted) {
    handleRemoteHangup();
  }
});

所以我的问题是

1)什么是message.type === 'offer' 什么是offer 它是什么类型的字符串？ 'answer' 和 'candidate' 也一样。

你能告诉我这段代码是如何工作的吗？

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

WebRTC 使用信令来创建连接。信令基本上是通过 websocket 在对等点之间来回发送的消息。您可以为此使用 sockets.io 之类的东西。

信令有助于建立和维护连接。信令来回发送会话描述协议信息。

用于建立连接的信令或套接字消息由提议和回答组成。

看起来像这样：

参与者 1 (P1) 加入并让人们知道他们在那里插座
参与者 2 (P2) 响应通过套接字发送的提议
P1 收到报价并将 P2 的详细信息存储为远程描述
P1 发回包含其详细信息的答案 P2 收到此信息回答并将 P1 的详细信息存储为远程描述
已连接！

该信息称为会话描述协议 (SDP)。它包含如下信息：

多媒体类型（音频、视频、屏幕共享）
媒体功能
运输地址
元数据

如果你有兴趣，我的博客上有详细的解释。

https://blog.videorooms.io/2018/05/mesh-architecture.html

套接字只是在两个试图相互连接的人之间来回发送 JSON。

希望对您有所帮助。

【讨论】：

嗯...你的意思是推荐socket.io而不是“sockets.io”吗？此外，您的答案似乎可以通过解决 OP 关于message.type 的问题以及一些特定于语法的解释来改进——您的答案可能有点过于笼统和抽象。此外，您在博客上公开您与网络服务的从属关系似乎是谨慎的......

【解决方案2】：

WebRTC 在两个端点（例如：浏览器）之间创建对等 (P2P) 连接。为此，它需要一个信号过程来连接对等点，然后它们之间就可以直接进行通信（媒体或数据）。

之所以需要信令，是因为 Internet 上的客户端应用程序之间的直接通信由于网络地址转换器 (NAT)、防火墙和其他网络障碍而非常棘手。

回答您的问题（信号）：

信令用于交换会话控制消息（offer、answer），称为 SDP（会话描述协议格式），网络配置为 ICE 候选 em> 和媒体功能使用相同的会话控制消息。

More details about the signaling process

Anatomy of a WebRTC SDP

示例 SDP：

v=0
o=- 7614219274584779017 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
c=IN IP4 0.0.0.0
a=rtcp:1 IN IP4 0.0.0.0
a=ice-ufrag:W2TGCZw2NZHuwlnf
a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=mid:audio
a=rtcp-mux
a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe
a=rtpmap:111 opus/48000/2
…

SDP testing tool.

此图向您展示了整个 WebRTC 信令过程：

【讨论】：