javascript - 通过 RTC 数据通道发送图像数据

Question

我正在尝试通过 Data Channel 发送图像数据，但它不起作用。当刚从 ctx.getImageData 获取数据时，我在另一端收到一个字符串 "[Object ImageData]" 。仅将数据片段转换为 blob 会导致错误:Uncaught NetworkError: Failed to execute 'send on 'RTCDataChannel': Could not send data。尝试将其转换为 ArrayBuffer 时出现同样的错误。我应该怎么做？

Answer 1

这是我刚刚写的一个演示:http://richard.to/projects/datachannel-demo/

请注意，我使用的是本地 channel ，只是显示图像而不是渲染到 Canvas 上。这应该很容易做到。在实际与远程设备通信时，您可能会遇到问题。我还没有测试过。它也只适用于 Chrome。但在 Firefox 中工作应该很简单。

---

这有点棘手，因为 WebRTC 的东西在不断变化。更不用说 Firefox 和 Chrome 的工作方式略有不同。

我将重点关注 Chrome，因为您收到的错误消息似乎与 Chrome 有关，特别是 Uncaught NetworkError: Failed to execute 'send on 'RTCDataChannel': Could not send data。此处描述了此问题:https://groups.google.com/forum/#!topic/discuss-webrtc/U927CZaCdKU

这是由于 RTP 数据通道 受到速率限制。我给你的链接提到了 3 KB/sec，在我的测试中这听起来不错。

好消息是，在 Chrome 31 之后，您可以使用基于 SCTP 的数据通道。看这里:https://groups.google.com/forum/#!topic/discuss-webrtc/y2A97iCByTU .

这意味着代替这个:

window.localPeerConnection = new webkitRTCPeerConnection(servers,
    {optional: [{RtpDataChannels: true}]});

你可以这样做(可能可以删除第二个参数):

window.localPeerConnection = new webkitRTCPeerConnection(servers,
    {optional: []});

我相信您仍然会受到速率限制，但现在是 64kbps。我可能对这个数字有误。找不到我阅读它的链接。

SCTP channel 的一个好处是您可以使用可靠的数据连接 (TCP) 而不是不可靠的 (UDP) 并且数据按顺序发送。我对此并不乐观。又一次找不到链接。

现在，正因为如此，您似乎仍必须对数据进行分块。您无法在 Chrome 中同时发送所有内容。不过，您可以在 Firefox 中执行此操作。

您需要知道的第二件事是 Chrome 当前不支持 blob 数据。至少在常规 Chrome 32 中是这样。这意味着如果我们想使用 Chrome，我们必须以文本形式发送数据。

所以我们可以做的是将我们的图像数据转换为 base64，因为 canvas.toDataURL()。这是一个如何工作的例子:

var canvas = document.createElement('canvas');
canvas.width = startimage.width;
canvas.height = startimage.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(startimage, 0, 0, startimage.width, startimage.height);
var data = canvas.toDataURL("image/jpeg");

现在我们有了数据，我们只需要分解 bas64 字符串:

这是我在上面的演示中使用的分块数据的实现:

function sendData() {
  trace("Sending data");
  sendButton.disabled = true;
  var canvas = document.createElement('canvas');
  canvas.width = startimage.width;
  canvas.height = startimage.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(startimage, 0, 0, startimage.width, startimage.height);

  var delay = 10;
  var charSlice = 10000;
  var terminator = "\n";
  var data = canvas.toDataURL("image/jpeg");
  var dataSent = 0;
  var intervalID = 0;

  intervalID = setInterval(function(){
    var slideEndIndex = dataSent + charSlice;
    if (slideEndIndex > data.length) {
      slideEndIndex = data.length;
    }
    sendChannel.send(data.slice(dataSent, slideEndIndex));
    dataSent = slideEndIndex;
    if (dataSent + 1 >= data.length) {
      trace("All data chunks sent.");
      sendChannel.send("\n");
      clearInterval(intervalID);
    }
  }, delay);
}

实现非常简单，基本上只需使用 setInterval。您可以乱用切片大小和延迟参数。我们还需要设置一个终止符来知道消息何时结束。我只是使用了一个 \n 字符。

下面是接收器的实现方式。基本上一直跟踪数据，直到它收到终止符，我刚刚使用了换行符。

function handleMessage(event) {
  if (event.data == "\n") {
    endimage.src = imageData;
    trace("Received all data. Setting image.");
  } else {
    imageData += event.data;
    //trace("Data chunk received");
  }
}

希望对您有所帮助。研究它很有趣。不确定这是否是通过 WebRTC 发送图像的理想解决方案。有一些演示可以进行 P2P 文件传输和其他操作。我想这取决于您的目的。