Html Html5视频录制和上传？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14976460/
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 video recording and upload?
提问by startupsmith
I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).
我需要创建一个可以使用网络摄像头或移动摄像头录制视频的应用程序（它需要是跨平台的）。
So far I have written a small proof of concept using webrtc getusermedia. It can record the video and playback but I am not sure how to get the file to upload back to the server.
到目前为止，我已经使用 webrtc getusermedia 编写了一个小的概念证明。它可以录制视频和播放，但我不确定如何将文件上传回服务器。
Here is a link to this sample http://jsfiddle.net/3FfUP/
这是此示例的链接http://jsfiddle.net/3FfUP/
And the javascript code:
和 javascript 代码：
(function ($) {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var onFailSoHard = function(e) {
console.log('Reeeejected!', e);
};
$('#capture-button').click (function () {
console.log ("capture click!");
if (navigator.getUserMedia) {
// Not showing vendor prefixes.
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedmetadata = function(e) {
// Ready to go. Do some stuff.
};
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
});
$('#stop-button').click (function (e) {
video.pause ();
localMediaStream.stop ();
});
})(jQuery);
How can I get what is recorded in this sample as a file so that it can be uploaded to the server.
我怎样才能将这个示例中记录的内容作为文件获取，以便可以将其上传到服务器。
回答by torresomar
Hi sorry if this is kinda late, but here is how i managed to make the file upload to a server, I really don't have an idea if this is the best way to achieve this but i hope it helps to give you a clue.Following the tutorial Eric Bidelman wrote (as Sam Dutton commented) what you get is a blob, so I made a XMLHttpRequest to get the video and set the response type as blob, afterwards I created a FormData in which I appended the response, this will allow the blob to be sent to the server.Here is how my function looks like.
嗨，对不起，如果这有点晚了，但这是我设法将文件上传到服务器的方法，我真的不知道这是否是实现这一目标的最佳方法，但我希望它有助于给你一个线索.按照 Eric Bidelman 写的教程（正如 Sam Dutton 评论的那样）你得到的是一个 blob，所以我做了一个 XMLHttpRequest 来获取视频并将响应类型设置为 blob，之后我创建了一个 FormData，我在其中附加了响应，这个将允许将 blob 发送到服务器。这是我的函数的样子。
function sendXHR(){
//Envia bien blob, no interpretado
var xhr = new XMLHttpRequest();
var video=$("#myexportingvideo");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'video/webm'});
console.log(blob.size/1024);
console.log(blob.type);
form = new FormData(),
request = new XMLHttpRequest();
form.append("myblob",blob,"Capture.webm");
form.append("myname",$("#name_test").value);
request.open("POST","./UploadServlet",true);
request.send(form);
}
};
xhr.send();
}
回答by Muaz Khan
You can record videoand audioseparately. You can get files (WAV/WebM) and upload them on demand. webkitMediaStream takes two objects 1) audioTracks and 2) videoTracks. You may be able to combine both audio/video recorded streams!
您可以分别录制视频和音频。您可以获取文件 (WAV/WebM) 并按需上传。webkitMediaStream 需要两个对象：1）audioTracks 和 2）videoTracks。您可以将音频/视频录制流结合起来！
回答by rissem
I know I'm a few years late to the party, but here is a snippet that's capable of capturing video and uploading it to the included node.js server as a webm file. I've tested in Chrome and Firefox.
我知道我参加聚会晚了几年，但这里有一个片段，它能够捕获视频并将其作为 webm 文件上传到包含的 node.js 服务器。我已经在 Chrome 和 Firefox 中进行了测试。
https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984
https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984
回答by Octavian Naicu
The only cross platformweb video recorder is the HDFVR webcam video recorder software.
唯一的跨平台网络录像机是HDFVR 网络摄像头录像机软件。
It uses Flash (records using Flash codecs + streams to a media server) on the desktop and the HTML Media Capture API (record using OS + upload to webserver) on mobile to record video from pretty much any desktop or mobile browser.
它使用桌面上的 Flash（使用 Flash 编解码器录制 + 流到媒体服务器）和移动设备上的 HTML Media Capture API（使用操作系统录制 + 上传到网络服务器）来录制几乎来自任何桌面或移动浏览器的视频。
You can link it to a ffmpeg installation to convert everything to a cross platform format like MP4 (iOS records to a .mov container that doesn't play on Android) and it also has a JS API.
您可以将其链接到 ffmpeg 安装，以将所有内容转换为跨平台格式，如 MP4（iOS 记录到不在 Android 上播放的 .mov 容器），并且它还有一个 JS API。
