title: DOMException: "The media resource indicated by the src attribute or assigned media provider object was not suitable." HTML 5 Node.js
body: <p>I will try to make this as concise as possible. </p>
  
  <p><strong>OVERVIEW</strong></p>
  
  <p>Using MediaRecorder I am sending blobs of my stream to my node server. From my node server, I  am sending Uint8Arrays' back to the client. I then set my blob to a Uint8Array retrieved from my node server with a type of <strong>video/webm; codecs=vp9</strong>.</p>
  
  <p>Here is the code in respects to my overview:</p>
  
  <p>When the <strong>client</strong> starts the stream:</p>
  
  <pre><code>  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);
    }
  </code></pre>
  
  <p>When the <strong>server</strong> receives the stream from the client after <strong>sendStream()</strong> method:</p>
  
  <pre><code>socket.on('send-stream', (newStreamBuff) =&gt; {
    stream = Buffer.concat([stream, new Uint8Array(newStreamBuff)]);
      socket.emit('stream-stream', new Uint8Array(newStreamBuff));
  });
  </code></pre>
  
  <p>Notice, on send we then send the <strong>blob</strong> as a <strong>Uint8Array</strong> back to the <strong>client</strong></p>
  
  <p>Here is what happens <strong>in order</strong> when the <strong>client</strong> receives the <strong>Uint8Array</strong>:</p>
  
  <pre><code>  public getHubStream = () =&gt; {
      return Observable.create((observer) =&gt; {
        this.socket.on('stream-stream', (data) =&gt; {
          this.arrBuffer.next(data);
        }, error =&gt; {
          console.log(error);
        });
      });
    }
  
  
  this.signalHub.currentarrBuffer.subscribe((data: Uint8Array) =&gt; {
        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 =&gt; {
        console.log(error);
      });
  </code></pre>
  
  <p>The last set of code is Angular code or Typescript: THIS data</p>
  
  <pre><code>        this.arrBuffer.next(data);
  </code></pre>
  
  <p>Is also this data:</p>
  
  <pre><code>        this.arrayBuffer = data;
  </code></pre>
  
  <p>Just in case there is some confusion on how the data is being moved around. </p>
  
  <p>Notice the console.logs throughout the code. Here is what it looks like in my console..</p>
  
  <p><a href="https://i.stack.imgur.com/IfnRo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IfnRo.png" alt="enter image description here"></a></p>
  
  <p>I've tried.. different array types, different codes, different "types", a lot. I'm not sure why my blob doesn't work correctly in when trying to play the video. DomException error is incredibly vague. I'm not having issues with receiving and sending from node server. </p>
  
  <p>On Opera I get the original vague error.</p>
  
  <p>On Firefox I get DomException error but a little more information.. which is kind of good.</p>
  
  <p>DOMException: "The media resource indicated by the src attribute or assigned media provider object was not suitable."</p>
  
  <p>My url for the page, in which the video is played is on: <a href="http://localhost:4200/#/intro" rel="nofollow noreferrer">http://localhost:4200/#/intro</a> which I couldn't see why this would be a problem anyway.</p>