DataChannelに送信されたArrayBufferにプロパティを追加する

Question

現在、ビデオチャットをDataChannel経由でピアに送信しています。このチャンクは、相手側のビデオを再構築します。

私はこの部分をうまく動作させていますが、受信したチャンク＃を追加して、意図した順序とは異なる順序で到着しても問題ではないことを追加したいと思います。

最初にパラメータchunkIdを追加すると機能すると思っていましたが、受信側で.data.chunkIdを実行すると、定義されていません。

は、その後、私はJSON.stringify({ "chunkId": chunkId, "data": chunk })を使用してchunkIdとともにArrayBufferを文字列化しようとしたが、私はもう一方の端（Unexpected end of JSON inputとUnexpected token , in JSON at position #）にそれを解析する際には、問題が発生し、私はそれをしようと思ったので

DataChannelsもブロブを受け入れますが、送信者はnode.jsを使用していますが、明らかにそれを行うことはできません。私はそれを回避する方法を理解することはできませんでした。

最後に、chunkIdをArrayBuffer自体の先頭/末尾に追加するだけでしたが、新しい配列を作成しようとすると、チャンク自体を追加しようとするとエラーsource is too largeが返されます。

これを達成する正しい方法は何ですか？

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のチャンクIDを送信しませんか？