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

在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;
}

arrayBufferConverter.getDigestFromBuffer=函数（缓冲区）{
常量视图=新数据视图（缓冲区）；
const numBytes=视图。按长度；
常数间隔=数学楼层（单位/32）；
var currentIndex=0；
var digest=“”；
while（当前索引

---

通过这种方式，我将在两个单独的请求中发送

ArrayBuffers

和相应的元数据，并使用一些基本的队列逻辑管理配对。这完全消除了正在进行的处理成本以及编码/解码大型媒体文件时固有的风险，有利于降低配对逻辑的固定成本。如果有人有其他建议，我会把这个打开。

哦，我还以为你以前是说喜欢图像元数据呢。您可以向

数据
对象添加更多属性，不是吗？还是我弄错了？@PatrickRoberts-刚刚更新了一些我要说的例子，好吧。非常感谢。我以后再调查。我不想这么说，但你要么需要一个第三方库，要么需要学习图像/jpeg二进制格式（至少要了解头字节的组织方式，不一定是压缩格式）。我发现了一个库，可能与@SB2055重复。不管它们是否使用，您仍然可以使用它，只需在base64编码字符串或二进制字符串中进行操作，然后使用文件读取器API将其转换为TypeDarray进行传输。不幸的是，除非库支持TypedArrays，否则应用程序的内存消耗将相当大。哦，我想你以前是指图像元数据。您可以向
数据
对象添加更多属性，不是吗？还是我弄错了？@PatrickRoberts-刚刚更新了一些我要说的例子，好吧。非常感谢。我以后再调查。我不想这么说，但你要么需要一个第三方库，要么需要学习图像/jpeg二进制格式（至少要了解头字节的组织方式，不一定是压缩格式）。我发现了一个库，可能与@SB2055重复。不管它们是否使用，您仍然可以使用它，只需在base64编码字符串或二进制字符串中进行操作，然后使用文件读取器API将其转换为TypeDarray进行传输。不幸的是，在库支持TypedArrays之前，应用程序的内存消耗将非常巨大。