Question

我正在尝试使用Javascript中的MediaStream API来获取浏览器的屏幕录像。我目前使用原始Javascript的方法非常适合Firefox（它为我提供了约10秒的屏幕视频并下载了该视频），但在Chrome中，它却为我提供了一个单帧的视频-大约半秒的镜头。

我的原始代码

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    this.recorder.ondataavailable = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(e.data));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();

      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => this.recorder.stop(), 10000);

我也尝试过使用javascript Blob API，但当我使用此方法时，Chrome的行为与以前相同，而Firefox会正确记录10秒或抛出 TypeError：流为空

斑点方法

    var videoEl = document.querySelector('video');
    var stream = videoEl.srcObject;
    var track = stream.getVideoTracks()[0];

    var finalStream = new MediaStream();
    finalStream.addTrack(track);
    this.recorder = new MediaRecorder(finalStream);

    var chunks = [];
    this.recorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }

    this.recorder.onstop = function(e) {
      var link = document.createElement('a');
      link.setAttribute('href', window.URL.createObjectURL(new Blob(chunks)));
      link.setAttribute('download', 'video_' + Math.floor((Math.random() * 999999)) + '.mp4');
      link.style.display = 'none';

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }

    this.recorder.start();
    setTimeout(() => {this.recorder.stop()}, 10000);

我希望它将记录约10秒，然后下载文件。

在Firefox中我得到了正确的结果，但是在Chrome中我得到了不到一秒钟的镜头。

在Firefox中使用MediaStream API记录进行完整时间的视频截屏，但在Chrome中不截屏

0 个答案: