javascript - 为二进制 block 创建元数据以通过 WebRTC 数据通道发送

Question

我在两个浏览器之间有一个数据通道连接，并且想将文件分成多个 block 并将它们发送到客户端或从客户端发送它们。

我可以读取该文件并将其分解为多个 block 。但是我需要一种让接收客户端知道的方法

1. 数据 block 与哪个文件相关(唯一标识符)。

2. 重建时 block 适用于哪个位置(索引号)。

在浏览器中传输二进制数据时，似乎整个有效负载必须是二进制的。因此，例如，我无法创建具有上述属性的 JSON 对象，并具有具有实际二进制 block 的 data 属性。

我想我需要将文件 block 包装到包含标识符和索引的辅助二进制 blob 中。然后，接收客户端将解码第一个包装 block 以检查元数据，然后根据该信息处理实际文件 block 。

如何在浏览器中执行此操作？我已经进行了大量的谷歌搜索，但似乎找不到任何相关信息，所以想知道我是否忽略了一些可以帮助简化此过程的东西？

Answer 1

您必须创建自己的文件传输协议(protocol)。

1. 我假设您有一个 File/Blob 对象。您可能还使用 split()获取 block 的方法。

2. 您可以简单地使用 Uint8Array传输数据。

   1. 创建满足您需求的协议(protocol)，例如:

      • 1 个字节:封装类型(255 种可能的封装类型)
      • 2 字节:数据长度(2^16 字节 ~ 每个 block 64KB 数据)
      • n 个字节:<数据>

   2. 发送初始包(例如类型 0x01)

      • 数据包含一些信息(全部或部分):
        • blob/文件的总长度
        • 文件类型
        • block 大小
        • block 数
        • 文件名
        • ...

   3. 发送数据 block (例如类型 0x02)

      • 序列号应至少使用两个字节
      • 随后是数据(不需要长度，因为您知道总长度)

注意:如果传输多个文件，您应该添加 ID 或其他内容。

在接收端，您可以等待初始包并创建一个新的 Uint8Array ，其中包含总文件的长度。之后您可以使用set()在 block 位置添加接收到的数据(偏移量=0-based-chunk-number*chunk-size)。收到所有 block 后，您可以创建 Blob。