将Uint8Array流转换为blob会返回空的blob。 MediaRecorder Node.js WebSockets

Question

我会尽量简化。

概述

使用MediaRecorder，我正在将流的Blob发送到节点服务器。从节点服务器，我将Uint8Arrays发送回客户端。然后，将blob设置为从节点服务器检索的Uint8Array，类型为 video / webm； codecs = vp9 。

以下是有关我的概述的代码：

客户端启动流时：

  successCallback(stream) {
    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
      this.options = { mimeType: 'video/webm; codecs=vp9' };
    } 

    this.video.srcObject = stream;
    this.video.play();
    this.mediaRecorder = new MediaRecorder(stream, this.options);
    this.mediaRecorder.ondataavailable = this.handleDataAvailable.bind(this);
    this.mediaRecorder.start(3000);
  }


  handleDataAvailable(blob) {
    // POST/PUT "Blob" using FormData/XHR2
    this.signalHub.sendStream(blob.data);
  }

  public sendStream(stream) {
    this.socket.emit('send-stream', stream);
  }

服务器通过 sendStream（）方法接收到来自客户端的流时：

socket.on('send-stream', (newStreamBuff) => {
  stream = Buffer.concat([stream, new Uint8Array(newStreamBuff)]);
    socket.emit('stream-stream', new Uint8Array(newStreamBuff));
});

通知，发送后，我们将 blob 作为 Uint8Array 发送回客户端

当客户端收到 Uint8Array 时，按顺序会发生以下情况：

  public getHubStream = () => {
    return Observable.create((observer) => {
      this.socket.on('stream-stream', (data) => {
        this.arrBuffer.next(data);
      }, error => {
        console.log(error);
      });
    });
  }


this.signalHub.currentarrBuffer.subscribe(data => {
  this.arrayBuffer = data;
  console.log(this.arrayBuffer);
  this.blob = new Blob([new Uint8Array(this.arrayBuffer)], { 'type': 'video/webm; codecs=vp9' });
  console.log(this.blob);
}, error => {
  console.log(error);
});

最后一组代码是Angular代码或Typescript：此数据

        this.arrBuffer.next(data);

也是此数据：

        this.arrayBuffer = data;

以防万一对于如何移动数据有些困惑。

在整个代码中注意console.logs。这就是我的控制台中的样子，请集中注意最后两行（因为这是流启动时的:)）。.

在检查数据或ArrayBuffer的byteLength时（从节点服务器将其取回后），长度是不确定的。但是请注意，在上面的开发工具或图像中，ArrayBuffer或数据中有信息。

我尝试过..不同的数组类型，不同的代码，不同的“类型”，很多。我不确定从节点服务器提供的Uint8Array创建blob时为什么blob为空。

编辑：

原因是我正在将已经是Uint8Array转换为Uint8Array。当不再次转换时，它似乎可以正常工作。但是我在设置HTML Video src时仍然遇到问题。

这是更新的代码：

this.signalHub.currentarrBuffer.subscribe((data: Uint8Array) => {
  this.arrayBuffer = data;
  if (this.arrayBuffer != undefined) {
    this.blob = new Blob([data], { 'type': 'video/webm; codecs=vp9' });
    console.log(window.URL.createObjectURL(this.blob));
    this.recordedVideo.srcObject = window.URL.createObjectURL(this.blob);

    this.recordedVideo.play().catch(function (error) {
      console.log(error);
    });
  }


}, error => {
  console.log(error);
});