Почему мой элемент видео не воспроизводит URL моего блоба?

Question

Я создаю URL-адрес большого двоичного объекта из записанного большого двоичного видео (API MediaRecorder). Затем я устанавливаю src моего видеоэлемента в этот URL-адрес большого двоичного объекта, но видео не воспроизводит запись. Вместо этого по умолчанию возвращается поток веб-камеры (который использовался для записи).

Я пытался использовать элемент источника в элементе видео, как это используется в некоторых документах. Я также попытался воспроизвести видео прямо с BLOB-объекта. Оба не сработали.

// this is the callback that fires when the mediaRecorder is done recording

mediaRecorder.onstop = (e) => {

          // creating new blob (binary large obj) defining it as an webm file
          let blob = new Blob(buffer, { 'type': 'video/webm' });
          t.setState({ video: blob }, () => {
            // send this video blob to the server
            t.sendVideo()
          })

          // clean up buffer array to free up memory
          buffer = []
          // convert blob into object URL (can be used as video src)
          let videoURL = URL.createObjectURL(blob)
          t.setState({blobURL:videoURL})        
        }

// this shows the render of my app once my blobURL has been set in the local state object

if (this.state.blobURL) {
      return (
        <div>
          <video id='recording' width='100%' height='100%' src ={this.state.blobURL} controls></video>
          <button>Retake Video</button>
          <button>Train Model</button>
        </div>
      );

Я ожидаю, что элемент video будет воспроизводить записывающий BLOB-объект, который я только что преобразовал в URL-адрес BLOB-объекта. К сожалению, элемент video не делает этого и по умолчанию возвращается к исходному потоку веб-камеры: /