在同一视频标签上录制和播放时 MediaStream 关​​闭

Posted 2023-02-19

【中文标题】在同一视频标签上录制和播放时 MediaStream 关​​闭

【英文标题】：MediaStream turns off when record and play on same video tag

【发布时间】：2021-11-28 01:20:49

【问题描述】：

我正在创建一个应用程序，用户可以在其中录制和播放视频。我在同一个视频标签中进行流式传输和播放录制的视频，但是当我第三次开始录制时出现问题。当我第一次开始录制并停止播放视频时，它的工作正常，再次播放时它工作正常，但是当它再次停止媒体流时，我收到错误DOMException: Failed to execute 'start' on 'MediaRecorder': There was an error starting the MediaRecorder。我不明白为什么它不能第三次工作。请如果有人可以帮助我找出问题。 这是我的代码。 启动相机

startCamera(): void 
   
    this.videoElement.play();
    navigator.mediaDevices
      .getUserMedia(
        video: true,
        audio: 
          echoCancellation: exact: true
        ,
      )
      .then((stream) => 
        this.videoStream = stream;
        this.addStream();
      )
      .catch((err) => 
      );
  

将流添加到视频标签

private addStream(): void 
    this.videoElement.srcObject = this.videoStream;
  

开始记录 记录（）：无效

    if (this.videoElement.srcObject === null) 
      this.videoElement.removeAttribute('src')
      this.addStream();
      this.videoElement.play();
    
    const sUsrAg = navigator.userAgent;
    if (sUsrAg.indexOf('Firefox') > -1) 
      this.videoElement.mozCaptureStream();
      this.startRecordingMedia(this.videoElement.mozCaptureStream());
     else  
      this.startRecordingMedia(this.videoElement.captureStream());
    
  
private startRecordingMedia(stream: MediaStream): void 
    try 
      this.recorder = new MediaRecorder(stream);
      const data = [];
      this.recorder.ondataavailable = (event) => data.push(event.data);
      this.recorder.onerror = (event) => 
        console.log(event);
      ;
      this.recorder.start();
      this.recorder.addEventListener('stop', () => 
        console.log('stopped')
      );
 
     catch (e) 
      console.log(e)
     
    
  

停止录制

this.videoElement.pause();
    this.recorder.stop();
    this.videoElement.srcObject = null;
    const recordedBlob = new Blob(data);
    this.videoElement.src = URL.createObjectURL(recordedBlob);

【参考方案1】：

您需要等待您的<video> 真正开始播放，然后再录制从中捕获的 MediaStream。在您致电MediaRecorder.start() 时，this.videoElement.play(); Promise 仍未解决，并且 MediaStream 中没有任何内容，因此 MediaRecorder 无法生成正确的数据。

所以您可以简单地等待对play() 的调用，但是从<video> 再次捕获MediaStream 绝对没有意义，而是直接记录您从相机获得的MediaStream（存储在this.stream） ，你会拯救树木。