Javascript DomeException:“我不知道。”；src属性或分配的媒体提供程序对象指示的媒体资源不合适。”；HTML 5 Node.js

我将尽力使这一点尽可能简明扼要

概述

我使用MediaRecorder将流的blob发送到节点服务器。从节点服务器，我将uint8array发送回客户端。然后，我将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.arrBuffer.next(data);

这也是数据：

        this.arrayBuffer = data;

以防对数据的移动方式产生一些混乱

注意代码中的console.log。这是我的控制台中的外观

我试过了。。不同的数组类型，不同的代码，不同的“类型”，很多。我不知道为什么我的blob在播放视频时不能正常工作。DomeException错误非常模糊。我没有从节点服务器接收和发送的问题

在歌剧中，我得到了最初的模糊错误

在Firefox上，我得到了DomeException错误，但有更多的信息。。这有点好

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

---

播放视频的页面的url已打开：我不明白为什么会出现问题。

将blob写入文件（如

.webm

），并与媒体播放器检查是否存在播放问题。在工作中，今晚将尝试此方法。我想不出如何检查我的blob文件。这是有道理的，会让你知道的。我想我要试试mp4格式。。现在。我试过你的建议，但格式不可读。我现在已经有点像了。我错了，返回了一个ArrayBuffer，而不是UInt8数组。在一瞬间，我看到了我的流中的一个图像。