Html HTML5 getUserMedia 记录网络摄像头，包括音频和视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16319470/
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
HTML5 getUserMedia record webcam, both audio and video
提问by Harm Kabisa
Is it possible to use Chrome to capture video (webcam) and audio (microphone) from the browser and then save the stream as video file?
是否可以使用 Chrome 从浏览器捕获视频（网络摄像头）和音频（麦克风），然后将流保存为视频文件？
I would like to use this to create a video/photobooth-like application that allows users to record a simple (30 second) message (both video and audio) to files that can later be watched.
我想用它来创建一个类似视频/照相亭的应用程序，它允许用户将简单的（30 秒）消息（视频和音频）录制到以后可以观看的文件中。
I have read the documentation but I have not (yet) seen any examples on how to capture both audio & video, also I did not find a way yet to store the results in a video file.
我已经阅读了文档，但我还没有（还）看到任何关于如何捕获音频和视频的例子，我也没有找到将结果存储在视频文件中的方法。
Who can help?
谁能帮忙？
回答by Konga Raju
MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams( still under implementation) . It allows web apps to create a file from a live audio/video session.
MediaStreamRecorder 是一个 WebRTC API，用于记录 getUserMedia() 流（仍在实现中）。它允许网络应用程序从实时音频/视频会话创建文件。
<script language="javascript" type="text/javascript">
function onVideoFail(e) {
console.log('webcam fail!', e);
};
function hasGetUserMedia() {
// Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var streamRecorder;
var webcamstream;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
webcamstream = stream;
// streamrecorder = webcamstream.record();
}, onVideoFail);
} else {
alert ('failed');
}
function startRecording() {
streamRecorder = webcamstream.record();
setTimeout(stopRecording, 10000);
}
function stopRecording() {
streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
var data = {};
data.video = videoblob;
data.metadata = 'test metadata';
data.action = "upload_video";
jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
alert ('video uploaded');
}
</script>
<div id="webcamcontrols">
<button class="recordbutton" onclick="startRecording();">RECORD</button>
</div>
回答by TarranJones
As far as i am aware there is no such way to record audio and video together and save them as one file. it is possible to capture and save the audio as a wav file and the video as a webm file.
据我所知，没有这样的方法可以将音频和视频一起录制并将它们保存为一个文件。可以将音频捕获并保存为 wav 文件，将视频保存为 webm 文件。
here is a great post on how to save your video; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
这是一篇关于如何保存视频的好文章； http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia
and a usefully utillity to save your audio
和一个有用的实用程序来保存您的音频
回答by Octavian Naicu
There are currently several production ready solutions for recording audio and video on the web.
目前有几种用于在网络上录制音频和视频的生产就绪解决方案。
Desktop Browsers
桌面浏览器
MediaRecorder API (HTML)
媒体记录器 API (HTML)
The MediaRecorder API (MediaStream Recorder) relies on getUserMedia()for webcam access and is supported by Firefox 30+ and Chrome 49+.
MediaRecorder API (MediaStream Recorder) 依赖于getUserMedia()网络摄像头访问，并受 Firefox 30+ 和 Chrome 49+ 支持。
Flash client + rtmp media server
Flash 客户端 + rtmp 媒体服务器
You will need a Flash (.swf) application that's embedded in your web page, captures the visitors webcam and mic, encodes the raw video and audio data (using the builtin codecs: H.264, Spark, Nellymoser ASAO and Speex) and streams the data as it is recorded(through rtmp) to a media server.
您将需要一个嵌入网页的 Flash (.swf) 应用程序，捕获访问者的网络摄像头和麦克风，对原始视频和音频数据进行编码（使用内置编解码器：H.264、Spark、Nellymoser ASAO 和 Speex）和流将数据记录（通过 rtmp）到媒体服务器。
Because the data is streamed, as soon as you stop the recording, all the data is already on the media sevrer (no upload times). Another advantage is that the video is not lost if the client computer crashes.
因为数据是流式传输的，所以只要您停止录制，所有数据都已经在媒体服务器上（没有上传时间）。另一个优点是如果客户端计算机崩溃，视频不会丢失。
You have at least 3 options for the media server:
媒体服务器至少有 3 个选项：
- Red5is free and open source (I've personally contributed code patches to the recording process in it and I can guarantee it works great)
- Wowza($65/month)
- Adobe Media Server Pro($4500)
- Red5是免费和开源的（我亲自为其中的录制过程贡献了代码补丁，我可以保证它运行良好）
- Wowza（65 美元/月）
- Adobe Media Server Pro（4500 美元）
The media server receives (again through streaming/rtmp not through http) the data and, depending on the codec used on the client and the media server used, the audio and video data is multiplexed in mp4, flv or f4v files.
媒体服务器接收（再次通过流/rtmp 而不是通过 http）数据，并且根据客户端使用的编解码器和使用的媒体服务器，音频和视频数据在 mp4、flv 或 f4v 文件中多路复用。
This Flash client + media server recording process - which has worked pretty well since Flash Player 6 in 2002.
这个 Flash 客户端 + 媒体服务器录制过程 - 自 2002 年的 Flash Player 6 以来一直运行良好。
Mobile browsers
移动浏览器
HTML Media Capture
HTML 媒体捕获
You can use HTML Media Capture (explained here with screenshots) to record video using the device's native video recording app and codecs. HTML Media Capture records locally (on the device) and then it uploads (normal HTTP upload process) the file to the web server.
您可以使用 HTML Media Capture（此处通过屏幕截图进行说明）使用设备的本机视频录制应用程序和编解码器录制视频。HTML Media Capture 在本地（在设备上）记录，然后将文件上传（正常的 HTTP 上传过程）到 Web 服务器。
When using HTML Media Capture in Safari on iOS devices like the iPhone it will create a .mov file that's not playable on Android. The solution is to convert it to .mp4 server side using FFmpeg.
在iPhone等 iOS 设备上的 Safari 中使用 HTML Media Capture 时，它会创建一个无法在 Android 上播放的 .mov 文件。解决方案是使用 FFmpeg 将其转换为 .mp4 服务器端。
When using HTML Media Capture in the Android browser the end result will be a .mp4 file that's playable on the iPhone. Some older Android phones will create .3gp files.
在 Android 浏览器中使用 HTML Media Capture 时，最终结果将是可在 iPhone 上播放的 .mp4 文件。一些较旧的 Android 手机会创建 .3gp 文件。
A commercial solution that implements both (Flash client + media server on desktop and HTML Media Capture on mobile) is HDFVR.
HDFVR是同时实现（桌面上的 Flash 客户端 + 媒体服务器和移动设备上的 HTML 媒体捕获）的商业解决方案。
回答by imal hasaranga perera
This is my github repo which provides a library for recording audio + video and finally upload the content to the server as chunks
这是我的 github 存储库，它提供了一个用于录制音频 + 视频的库，并最终将内容作为块上传到服务器
- This supports chrome, Opera
- Uploading time is reduced, since blobs are sliced and uploaded
- 这支持铬，歌剧
- 上传时间减少，因为 blob 被切片和上传
回答by AgeDeO
Use the following:
使用以下内容：
<input type="file" accept="image/*;capture=camera"> \ Snapshot
<input type="file" accept="video/*;capture=camcorder"> \ Video
<input type="file" accept="audio/*;capture=microphone"> \ Audio
Then treat the form as a normal file in your php
然后将表单视为 php 中的普通文件
