Question

我正在尝试使用Chrome的屏幕共享功能制作屏幕录像机并以MP4格式保存视频。但是，我不知道我是怎么做到的。该演示位于https://figgycity50.kd.io/screencap.html（包括https！），代码为：

<video autoplay></video>
<button>start</button>
<script>

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;

var stream = null;
button = document.querySelector("button");

function start(e) {
  // Seems to only work over SSL.
  navigator.getUserMedia({
    video: {
      mandatory: {
        chromeMediaSource: 'screen',
         maxWidth: 1280,
         maxHeight: 720
      }
    }
  }, function(s) {
    stream = s;

    button.textContent = 'Stop';
    button.removeEventListener('click', start);
    button.addEventListener('click', stop);

    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.autoplay = true;

    stream.onended = function(e) {
      //The save code should go here.
    };

    //document.body.appendChild(video);
  }, function(e) {
  });
}

function stop() {
  stream.stop();
  button.addEventListener('click', start);
  button.textContent = 'Capture your screen';
}

button.addEventListener('click', start);

</script>

我该怎么做？

Answer 1

您无法通过getUserMedia API的当前状态直接保存为MP4格式，但您可以保存为webm格式并在之后进行转换。

已经进行了多次尝试，webRTC实验项目在浏览器中实现了多个版本的录制： https://www.webrtc-experiment.com/RecordRTC/

但是，您可以使用HTML Media Capture直接以MP4格式保存。这可以通过扩展<input type="file"/>并为accept参数添加新值以及音频，视频和照片/快照选项来实现。但这仅适用于移动浏览器，因为桌面浏览器只会将其解释为简单的文件上传。

如果您从移动设备访问他们的演示，HDFVR会对此进行演示。

可以在以下文章中阅读更多详细信息： http://hdfvr.com/html5-video-recording

将HTML5 blob视频导出到MP4

1 个答案: