Question

在docs中，我看到以下示例，用于通过WebRTC数据通道发送字符串：

var message = messageInputBox.value;
sendChannel.send(message);

我尝试发送图片和视频 - 所以我创建了ArrayBuffer：

var reader = new FileReader();
reader.addEventListener("loadend", function () {
     // reader.result contains the contents of blob as a typed array
     data.media = reader.result; // ArrayBuffer
     outboundMediaQueue.push(data);
});
reader.readAsArrayBuffer(data.media);

我可以传输这个ArrayBuffer，但我还试图发送一些元数据（媒体ID）。鉴于我不能JSON.serialize一个ArrayBuffer - 我如何使用相应的元数据传输这些数据？

更新

这有效：

sendChannel.send(data.media); // sending `ArrayBuffer` only

但这不起作用：

sendChannel.send(data); // arbitrary object with desired metadata

这也不起作用：

sendChannel.send(JSON.stringify(data));

更新2

我已经编写了以下似乎处理编码和解码的模块。它没有经过全面测试，也没有针对大文件运行;当我弄清楚什么有用时，我会保持更新：

define([], function () {
    // https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_2_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8
    // https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String

    const arrayBufferConverter = {};
    arrayBufferConverter.bufferToString = function (outboundBuffer) {
        const dataView = new DataView(outboundBuffer);
        const decoder = new TextDecoder('utf-8'); // base64?
        const decodedString = decoder.decode(dataView);
        return decodedString;
    }

    arrayBufferConverter.stringToBuffer = function (inboundString) {
        var encoded = new TextEncoderLite('utf-8').encode(inboundString);
        var b64Encoded = base64js.fromByteArray(encoded);
        return b64Encoded;
    }

    return arrayBufferConverter;
});

更新3

由于我这里唯一真正的需要是将元数据与ArrayBuffer配对，我将忘记编码/解码废话并在事务的两端生成摘要：

arrayBufferConverter.getDigestFromBuffer = function (buffer) {
    const view = new DataView(buffer);
    const numBytes = view.byteLength;
    const interval = Math.floor(numBytes / 32);
    var currentIndex = 0;
    var digest = "";
    while (currentIndex < numBytes) {
        digest += view.getInt8(currentIndex);
        currentIndex += interval;
    }
    return digest;
}

这样我就可以在两个单独的请求中发送ArrayBuffers和相应的元数据，并管理与一些基本队列逻辑的配对。这完全消除了持续的处理成本和编码/解码大型媒体文件所固有的风险，有利于配对逻辑的小固定成本。如果有人提出任何其他建议，我会将此保留。

使用元数据传输ArrayBuffer（通过webRTC数据连接）

0 个答案: