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

问题描述

我正在尝试使用 Chrome 的屏幕共享功能制作屏幕录像机并将视频保存为 MP4 格式.但是，我不知道我是如何做到这一点的.该演示位于 https://figgycity50.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.

p>

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

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

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