Установка src для видео приводит к ошибке DOMException - PullRequest
Новая
       21

Установка src для видео приводит к ошибке DOMException

0 голосов
/ 26 июня 2019

Я пытаюсь установить src элемента Video в HTML. Вот метод, который создает BLOB-объекты и устанавливает источник видео: 

  startExternalVideo() {
    console.log(this.arrayBuffer);
    this.blob = new Blob([new Uint8Array(this.arrayBuffer)] , {'type' : 'video/webm; codecs=vp8'});
    console.log(this.blob);
    this.recordedVideo.src = window.URL.createObjectURL(this.blob);

    this.recordedVideo.play();
  }

Но я получаю ошибку:

Uncaught (в обещании) DOMException

Затем я попытался установить srcObject для видео: 

this.recordedVideo.srcObject = window.URL.createObjectURL(this.blob);

Что дает мне эту ошибку:

WebrtcComponent.html: 16 ОШИБКА TypeError: Не удалось установить свойство 'srcObject' для 'HTMLMediaElement': предоставленное значение не относится к типу 'MediaStream'.

Видео пришло с узла сервера. Сервер узла создал ArrayBuffer из данных MediaRecorder.

this.arrayBuffer является ArrayBuffer: 

ArrayBuffer(612916) {}
[[Int8Array]]: Int8Array(612916) [0, 26, 1, 115, -59, -121, 63, -73, 46, -83, 11, -43, 101, -125, …]
[[Int16Array]]: Int16Array(306458) [6656, -8379, -24669, -31166, 385, -2238, 385, -3518, 1153, -3262, 2177, -32190, 30596, 25189, …]
[[Int32Array]]: Int32Array(153229) [0, -2068476447, 8403783, 1644265887, -1373601436, 42063785, 47865 -2092334464, …]
[[Uint8Array]]: Uint8Array(612916) [0, 111 …]
byteLength: (...)
__proto__: ArrayBuffer

Вот полный код, который я действительно не считаю необходимым, но он показывает, как видео было записано и отправлено на сервер узла с помощью socket.io ... 

declare var MediaRecorder: any;
@Component({
  selector: 'app-webrtc',
  templateUrl: './webrtc.component.html',
  styleUrls: ['./webrtc.component.scss']
})
export class WebrtcComponent implements AfterViewInit, OnInit {
  constraints; video; recordedVideo; mediaRecorder; options;
  streams: string[] = [];
  audioChunks: any[];
  videoChunks: any[];
  arrayBuffer: ArrayBuffer;
  sourceBuffer: any;
  blob:any;

  constructor(private signalHub: WebRTCServiceService) {
    this.constraints = { audio: true, video: true };
  }

  ngOnInit() {
    this.signalHub.getHubStream().subscribe(data => {
    });
    this.signalHub.currentarrBuffer.subscribe(data => {
      this.arrayBuffer = data;
    });
    this.video = document.getElementsByClassName('video')[0];
    this.recordedVideo = document.getElementsByClassName('other-video')[0];
  }

  ngAfterViewInit() {
  }

  successCallback(stream) {
    if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
      this.options = { mimeType: 'video/webm; codecs=vp9' };
    } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
      this.options = { mimeType: 'video/webm; codecs=vp8' };
    } else {
      // ...
    }
    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);
  }

  startExternalVideo() {
    console.log(this.arrayBuffer);
    this.blob = new Blob([new Uint8Array(this.arrayBuffer)] , {'type' : 'video/webm; codecs=vp8'});
    console.log(this.blob);
    this.recordedVideo.srcObject = window.URL.createObjectURL(this.blob);

    this.recordedVideo.play();
  }
  startStream() {
    this.signalHub.startStream();
    this.runMedia();
  }

  stopStream() {
    this.mediaRecorder.stop();
    this.signalHub.stopStream();
  }

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

  errorCallback(error) {
    console.log('navigator.getUserMedia error: ', error);
  }

  runMedia() {

    navigator.mediaDevices.getUserMedia(this.constraints)
      .then((stream) => {
        this.successCallback(stream);
      })
      .catch(this.errorCallback);
  }

}

Вот HTML-код для видео. 

<video class="other-video" autoplay="true"></video>
...