javascript - 如何在不等待整个文件的情况下将可读流通过管道传输到 URL.createObjectURL？

Question

我知道使用 mediaSource 是可行的，但媒体源不支持所有视频格式(例如片段 mp4)。这是一个问题，因为我的应用程序没有可以修复文件的服务器。它只是一个客户端应用程序。

const blob = await ipfs.getBlobFromStream(hash)

const url = URL.createObjectURL(blob)

this.setState({...this.state, videoSrc: url})

const getBlobFromStream = async (hash) => {

  return new Promise(async resolve => {

    let entireBuffer

    const s = await stream(hash)
    s.on('data', buffer => {

      console.log(buffer)

      if (!entireBuffer) {
        entireBuffer = buffer
      }
      else {
        entireBuffer = concatTypedArrays(entireBuffer, buffer)
      }

    })

    s.on('end', () => {

      const arrayBuffer = typedArrayToArrayBuffer(entireBuffer)
      const blob = new Blob(arrayBuffer)
      resolve(blob)
    })

  })

}

这是我现在正在使用的代码，它基本上等待整个文件并将其放入一个数组中，然后放入一个 blob 中，然后放入 URL.createObjectURL

Answer 1

您可以在重构代码的过程中做到这一点:

await ipfs.startBlobStreaming(hash);
this.setState({...this.state, videoComplete: true});

const startBlobStreaming = async (hash) => {
  return new Promise(async (resolve) => {

    let entireBuffer;
    const s = await stream(hash);
    s.on('data', buffer => {
      if (!entireBuffer) {
        entireBuffer = buffer;
      } else {
        entireBuffer = concatTypedArrays(entireBuffer, buffer);
      }
      const arrayBuffer = typedArrayToArrayBuffer(entireBuffer);
      const blob = new Blob(arrayBuffer);
      const url = URL.createObjectURL(blob);
      this.setState({...this.state, videoSrc: url});

    });
    s.on('end', _ => resolve())
  });
}

我不知道 s.on 中的缓冲区有多密集，但您也可以在特定时间(例如 1000 毫秒)内收集一定量的缓冲区，然后创建 blob url。