将HTML5 blob视频导出到MP4 [英] Export HTML5 blob video to MP4

问题描述

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

I am trying to use Chrome's screen sharing feature to make a screen recorder and save the video in MP4 format. However, I have no idea how I do this. The demo is at https://figgycity50.kd.io/screencap.html (include https!) and the code is:

<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>

我该怎么做？

推荐答案

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

You cannot save directly to MP4 format with the way the current state of getUserMedia API is working, you can however save in webm format and convert it afterwards.

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

Several attempts have been made, webRTC experiment project has several versions of recording in the browser implemented: https://www.webrtc-experiment.com/RecordRTC/

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

You can however save directly in MP4 format using HTML Media Capture. This works by extending the <input type="file"/> and adding new values for the accept parameter with options for audio, video and photo/snapshot. This however works only for mobile browsers, as the desktop browser will only interpret it as a simple file upload.

HDFVR有一个演示，如果您访问他们的演示一个移动设备。

HDFVR has a demo of this, if you access their demo from a mobile device.

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

More details can be read in the following article: http://hdfvr.com/html5-video-recording

这篇关于将HTML5 blob视频导出到MP4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！