DOMException：“src 属性或分配的媒体提供程序对象指示的媒体资源不合适。” HTML 5 Node.js

Question

我会尽力使其尽可能简洁。

概述

使用 MediaRecorder，我将流的 blob 发送到我的节点服务器。从我的节点服务器，我将 Uint8Arrays 发送回客户端。然后，我将 blob 设置为从节点服务器检索的 Uint8Array，类型为video/webm；编解码器=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: Uint8Array) => {
      this.arrayBuffer = data;
      if (this.arrayBuffer != undefined) {
        this.blob = new Blob([data], { type: 'video/webm; codecs=vp9' });
        this.recordedVideo.src = URL.createObjectURL(this.blob);
        console.log(this.arrayBuffer);
        console.log(this.blob);
        console.log(this.recordedVideo.src);
        console.log(this.recordedVideo.type);

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

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

        this.arrBuffer.next(data);

也是这个数据：

        this.arrayBuffer = data;

以防万一对数据的移动方式存在一些困惑。

请注意整个代码中的 console.logs。这是我的控制台中的样子..

我尝试过..不同的数组类型，不同的代码，不同的“类型”，很多。我不确定为什么我的 blob 在尝试播放视频时无法正常工作。DomException 错误非常模糊。我在从节点服务器接收和发送时没有遇到问题。

在 Opera 上我得到了最初的模糊错误。

在 Firefox 上，我收到 DomException 错误，但有更多信息......这很好。

DOMException：“src 属性或分配的媒体提供程序对象指示的媒体资源不合适。”

我的播放视频页面的网址位于：http://localhost:4200/#/intro，我无论如何也不明白为什么这会成为问题。