HTML 5 视频录制和存储流
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18509385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 video recording and storing a stream
提问by Nithin
Using Html 5 I want to record video and save the stream into a local file. Given below is the code. In a button click it already invokes the camera and captures the video in the 'VIDEO' tag of HTML. Can I store the stream into a local file? Or can I store it as MP4 file?
使用 Html 5 我想录制视频并将流保存到本地文件中。下面给出的是代码。在一个按钮点击它已经调用相机并在 HTML 的“VIDEO”标签中捕获视频。我可以将流存储到本地文件中吗？或者我可以将其存储为 MP4 文件吗？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function enter() {
if (navigator.mozGetUserMedia) {
navigator.myGetMedia=navigator.mozGetUserMedia;
navigator.myGetMedia({video: true}, connect, error);
}
else {
alert("NO");
}
function connect(stream) {
var video = document.getElementById("my_video");
video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
video.play();
var canvas = document.getElementById("c");
}
function error(e) { console.log(e); }
}
</script>
</head>
<body>
<canvas width="640" height="480" id="c"></canvas>
<input type="button" value="RECORD" onClick="enter()"/>
<input type="button" value="SAVE" />
<video id="my_video" width="640" height="480"/>
</body>
</html>
I want to save the stream upon a save button click.
我想在单击保存按钮时保存流。
回答by l2aelba
RecordRTC: WebRTC audio/video recording
RecordRTC：WebRTC 音频/视频录制
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
- Audio recording both for Chrome and Firefox
- Video/Gif recording for Chrome; (Firefox has a little bit issues, will be recovered soon)
- Chrome 和 Firefox 的录音
- Chrome 的视频/Gif 录制；（Firefox 有一点问题，会尽快恢复）
Demo : https://www.webrtc-experiment.com/RecordRTC/
演示：https: //www.webrtc-experiment.com/RecordRTC/
Creating .webm video from getUserMedia()
从 getUserMedia() 创建 .webm 视频
http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
Demo : http://html5-demos.appspot.com/static/getusermedia/record-user-webm.html
演示：http: //html5-demos.appspot.com/static/getusermedia/record-user-webm.html
Capturing Audio & Video in HTML5
在 HTML5 中捕获音频和视频
回答by mido
MediaRecorder APIis the solution you are looking for,
MediaRecorder API是您正在寻找的解决方案，
Firefox has been supporting it for some time now, and the buzz is is chrome is gonna implement it in it's next release (chrome 48), but guess you still might need to enable the experimental flag, apparently the flag won't be need from chrome version 49, for more info check out this chrome issue.
Firefox 已经支持它有一段时间了，嗡嗡声是 chrome 将在它的下一个版本（chrome 48）中实现它，但你猜你可能仍然需要启用实验标志，显然不需要这个标志chrome 版本 49，有关更多信息，请查看此chrome 问题。
Meanwhile, a sample of how to do it in firefox:
同时，如何在 Firefox 中执行此操作的示例：
var video, reqBtn, startBtn, stopBtn, ul, stream, recorder;
video = document.getElementById('video');
reqBtn = document.getElementById('request');
startBtn = document.getElementById('start');
stopBtn = document.getElementById('stop');
ul = document.getElementById('ul');
reqBtn.onclick = requestVideo;
startBtn.onclick = startRecording;
stopBtn.onclick = stopRecording;
startBtn.disabled = true;
ul.style.display = 'none';
stopBtn.disabled = true;
function requestVideo() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
.then(stm => {
stream = stm;
reqBtn.style.display = 'none';
startBtn.removeAttribute('disabled');
video.src = URL.createObjectURL(stream);
}).catch(e => console.error(e));
}
function startRecording() {
recorder = new MediaRecorder(stream, {
mimeType: 'video/mp4'
});
recorder.start();
stopBtn.removeAttribute('disabled');
startBtn.disabled = true;
}
function stopRecording() {
recorder.ondataavailable = e => {
ul.style.display = 'block';
var a = document.createElement('a'),
li = document.createElement('li');
a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join('');
a.href = URL.createObjectURL(e.data);
a.textContent = a.download;
li.appendChild(a);
ul.appendChild(li);
};
recorder.stop();
startBtn.removeAttribute('disabled');
stopBtn.disabled = true;
}<div>
<button id='request'>
Request Camera
</button>
<button id='start'>
Start Recording
</button>
<button id='stop'>
Stop Recording
</button>
<ul id='ul'>
Downloads List:
</ul>
</div>
<video id='video' autoplay></video>回答by Octavian Naicu
Currently there is no production ready HTML5 onlysolution for recording video over the web. The current available solutions are as follows:
目前没有用于通过网络录制视频的生产就绪HTML5解决方案。目前可用的解决方案如下：
HTML Media Capture
HTML 媒体捕获
Works on mobile devices and uses the OS' video capture app to capture video and upload/POST it to a web server. You will get .movfiles on iOS (these are unplayable on Android I've tried) and .mp4 and .3gpon Android. At least the codecs will be the same: H.264 for video and AAC for audio in 99% of the devices.
适用于移动设备并使用操作系统的视频捕获应用程序捕获视频并将其上传/发布到网络服务器。您将在 iOS 上获得.mov文件（这些在我尝试过的 Android 上无法播放）和.mp4 和 .3gp在 Android 上。至少编解码器将是相同的：在 99% 的设备中，用于视频的 H.264 和用于音频的 AAC。
Image courtesy of https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/
图片来自https://addpipe.com/blog/the-new-video-recording-prompt-for-media-capture-in-ios9/
Flash and a media server on desktop.
Flash 和桌面上的媒体服务器。
Video recording in Flash works like this: audio and video data is captured from the webcam and microphone, it's encoded using Sorenson Spark or H.264 (video) and Nellymoser Asao or Speex (audio) then it's streamed (rtmp) to a media server (Red5, AMS, Wowza) where it is saved in .flv or .f4vfiles.
Flash 中的视频录制是这样工作的：音频和视频数据从网络摄像头和麦克风捕获，使用 Sorenson Spark 或 H.264（视频）和 Nellymoser Asao 或 Speex（音频）进行编码，然后将其流式传输 (rtmp) 到媒体服务器（Red5、AMS、Wowza）保存在.flv 或 .f4v文件中。
The MediaStream Recording proposal
MediaStream Recording 提案
The MediaStream Recording is a proposal by the the Media Capture Task Force (a joint task force between the WebRTC and Device APIs working groups) for a JS API who's purpose is to make basic video recording in the browser very simple.
MediaStream Recording 是 Media Capture Task Force（WebRTC 和设备 API 工作组之间的联合工作组）为 JS API 提出的提案，其目的是使浏览器中的基本视频录制变得非常简单。
Not supported by major browsers. When it'll get implemented (if it will) you will most probably end up with different filetypes (at least .ogg and .webm) and audio/video codecs depending on the browser.
主要浏览器不支持。当它被实现时（如果会的话），你很可能会得到不同的文件类型（至少 .ogg 和 .webm）和音频/视频编解码器，具体取决于浏览器。
Commercial solutions
商业解决方案
There are a few saas and software solutions out there that will handle some or all of the above including addpipe.com, HDFVR, Nimbb and Cameratag.
有一些 saas 和软件解决方案可以处理上述部分或全部问题，包括 addpipe.com、HDFVR、Nimbb 和 Cameratag。
Further reading:
进一步阅读：
- HTML Media Capture video recording prompts in iOS9
- HTML5 Video Recordingcovers both HTML Media Capture and MediaStream Recording.
- Pipeis a saas for video recording that also handles the final conversion to .mp4
- iOS9中HTML Media Capture视频录制提示
- HTML5 Video Recording涵盖 HTML Media Capture 和 MediaStream Recording。
- Pipe是一个用于视频录制的 saas，它也处理最终转换为 .mp4
回答by Karlth
Here is an elegant library that records video in all supported browsers and supports uploading:
这是一个优雅的库，可以在所有支持的浏览器中录制视频并支持上传：
