RTCDataChannel 用于信令？

Question

我一直在阅读 this article 以获取信号解决方案。作者提到了在建立连接时使用 RTCDataChannel 发出信号。

使用 RTCDataChannel 发送信号

需要信令服务来启动 WebRTC 会话。

但是，一旦在两个对等方之间建立了连接，理论上 RTCDataChannel 就可以接管信号通道。这可能会减少信令的延迟——因为消息是直接传送的——并有助于减少信令服务器的带宽和处理成本。我们没有演示，但请注意这个空间！

既然已经建立了连接，为什么还需要信令？

Answer 1

每一方最初都声明它将发送哪些音频和/或视频轨道，以便可以打开正确数量的端口，并且可以确定适用于双方的分辨率和格式。需要一个信令通道将生成的 SDP 提议/答案以及每个端口的涓流 ICE 候选发送到另一端。

一旦连接，如果您不理会此设置 - 基本上永远不会在连接中添加轨道、删除任何轨道或​​显着更改轨道属性 - 那么您将不再需要信令服务器。

但是，如果您确实更改了其中任何一项，则需要重新协商，这就是听起来的样子：在信令通道上再进行一轮，就像第一轮一样。 p>

添加轨道的原因可能是第二个摄像头、另一个视频源（可能来自另一个参与者），或者可能是屏幕共享，诸如此类。

可以使用数据通道的文章是正确的。这是a demo！ （目前仅限火狐浏览器。）

这篇文章关于需要信号服务的说法是错误的——前提是你有另一种发现方式——正如这个演示所证明的那样。

初始连接仅限聊天，但任何一方都可以推送以将视频添加到组合中。对此的重新协商是通过数据通道完成的（因为没有信令服务器！）

小提琴使用说明：

1. 没有服务器（因为它是一个小提琴），所以按Offer 按钮并复制报价。
2. 将报价粘贴到另一个选项卡或另一台计算机上同一小提琴中的同一位置。
3. 按 ENTER，然后复制您得到的答案并将其粘贴回第一个小提琴中。
4. 再次按 ENTER（还不是 addTrack！）
5. 您现在连接到两个数据通道：一个用于聊天，另一个用于发信号。
6. 现在按下任一端的addTrack，视频应显示在另一端。
7. 在另一个方向按addTrack，您应该可以双向播放视频。

var dc = null, sc = null, pc = new mozRTCPeerConnection(), live = false;
pc.onaddstream = e => v2.mozSrcObject = e.stream;
pc.ondatachannel = e => dc? scInit(sc = e.channel) : dcInit(dc = e.channel);
v2.onloadedmetadata = e => { log("Face time!"); };

function addTrack() {
  navigator.mediaDevices.getUserMedia({video:true, audio:true})
  .then(stream => pc.addStream(v1.mozSrcObject = stream));
}

pc.onnegotiationneeded = e => {
  pc.createOffer().then(d => pc.setLocalDescription(d)).then(() => {
    if (live) sc.send(JSON.stringify({ "sdp": pc.localDescription }));
  }).catch(failed);
};

function scInit() {
  sc.onmessage = e => {
    var msg = JSON.parse(e.data);
    if (msg.sdp) {
      var desc = new mozRTCSessionDescription(JSON.parse(e.data).sdp);
      if (desc.type == "offer") {
        pc.setRemoteDescription(desc).then(() => pc.createAnswer())
        .then(answer => pc.setLocalDescription(answer)).then(() => {
          sc.send(JSON.stringify({ "sdp": pc.localDescription }));
        }).catch(failed);
      } else {
        pc.setRemoteDescription(desc).catch(failed);
      }
    } else if (msg.candidate) {
      pc.addIceCandidate(new mozRTCIceCandidate(msg.candidate)).catch(failed);
    }
  };
}

function dcInit() {
  dc.onopen = () => { live = true; log("Chat!"); };
  dc.onmessage = e => log(e.data);
}

function createOffer() {
  button.disabled = true;
  dcInit(dc = pc.createDataChannel("chat"));
  scInit(sc = pc.createDataChannel("signaling"));
  pc.createOffer().then(d => pc.setLocalDescription(d)).catch(failed);
  pc.onicecandidate = e => {
    if (e.candidate) return;
    if (!live) {
      offer.value = pc.localDescription.sdp;
      offer.select();
      answer.placeholder = "Paste answer here";
    } else {
      sc.send(JSON.stringify({ "candidate": e.candidate }));
    }
  };
};

offer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "stable") return;
  button.disabled = offer.disabled = true;
  var obj = { type:"offer", sdp:offer.value };
  pc.setRemoteDescription(new mozRTCSessionDescription(obj))
  .then(() => pc.createAnswer()).then(d => pc.setLocalDescription(d))
  .catch(failed);
  pc.onicecandidate = e => {
    if (e.candidate) return;
    if (!live) {
      answer.focus();
      answer.value = pc.localDescription.sdp;
      answer.select();
    } else {
      sc.send(JSON.stringify({ "candidate": e.candidate }));
    }
  };
};

answer.onkeypress = e => {
  if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
  answer.disabled = true;
  var obj = { type:"answer", sdp:answer.value };
  pc.setRemoteDescription(new mozRTCSessionDescription(obj)).catch(failed);
};

chat.onkeypress = e => {
  if (e.keyCode != 13) return;
  dc.send(chat.value);
  log(chat.value);
  chat.value = "";
};

var log = msg => div.innerHTML += "<p>" + msg + "</p>";
var failed = e => log(e.name + ": " + e.message + " line " + e.lineNumber);

<video id="v1" height="120" width="160" autoplay muted></video>
<video id="v2" height="120" width="160" autoplay></video><br>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br>
<button id="button" onclick="addTrack()">AddTrack</button>
<div id="div"></div><br>
Chat: <input id="chat"></input><br>