将 HTML5 blob 视频导出到 MP4答案

【问题标题】：Export HTML5 blob video to MP4将 HTML5 blob 视频导出到 MP4
【发布时间】：2014-01-18 09:36:34
【问题描述】：

我正在尝试使用 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>

我该怎么做？

【问题讨论】：

标签： html video save export mp4

【解决方案1】：

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

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

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

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

更多详情可以阅读以下文章： http://hdfvr.com/html5-video-recording

【讨论】：