如何在不等待整个文件的情况下将可读流传输到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。