javascript - 将属性附加到通过 DataChannel 发送的 ArrayBuffer

Question

我目前正在接收视频流中的 block ，我通过 DataChannel 将这些 block 发送给对等方，然后由对等方在另一端重建视频。

我让这部分工作得很好，但我想添加接收到的 block #，这样即使它们碰巧以与预期不同的顺序到达也没有关系。

最初我认为添加参数 chunkId 会起作用，但是当我在接收方执行 .data.chunkId 时，它是未定义的。

然后我尝试使用 JSON.stringify({ "chunkId": chunkId, "data": chunk }) 将 ArrayBuffer 与 chunkId 一起进行字符串化，但它导致当我在另一端解析它时出现问题(Unexpected end of JSON input and Unexpected token , in JSON at position #)

DataChannels 也接受 blob，所以我想我会尝试一下，但发件人使用的是 node.js，显然无法做到这一点。我不太清楚如何解决这个问题。

我尝试的最后一件事是简单地将 chunkId 附加到 ArrayBuffer 本身的开头/结尾但是当我尝试创建一个新数组时我得到错误 source is too large 当尝试添加 block 本身时。

实现此目标的正确方法是什么？

Answer 1

您应该能够混合发送文本和 ArrayBuffers，并在接收时检查它们:

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(e => log(e));

var dc1 = pc1.createDataChannel("chat", {negotiated: true, id: 0});
var dc2 = pc2.createDataChannel("chat", {negotiated: true, id: 0});

dc2.binaryType = "arraybuffer";
dc2.onmessage = e => {
  if (e.data instanceof ArrayBuffer) {
    log("Got ArrayBuffer!");
  } else if (e.data instanceof Blob) {
    log("Got Blob!");
  } else {
    log("> " + e.data);
  }
}

button.onclick = e => dc1.send(new ArrayBuffer(8));
chat.onkeypress = e => {
  if (e.keyCode != 13) return;
  dc1.send(chat.value);
  chat.value = "";
};

var log = msg => div.innerHTML += "<br>" + msg;

Chat: <input id="chat"><button id="button">Send ArrayBuffer</button><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

那么为什么不在每个 ArrayBuffer 之前发送 block ID？