Html5视频录制和上传？ [英] Html5 video recording and upload?

问题描述

我需要创建一个可以使用网络摄像头或移动摄像头录制视频的应用程序（它需要跨平台）。

I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).

到目前为止，我写了一个小的使用webrtc getusermedia进行概念验证。它可以录制视频和播放，但我不知道如何将文件上传回服务器。

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.

以下是此示例的链接 http://jsfiddle.net/3FfUP/

和javascript代码：

And the javascript code:

(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.

推荐答案

对不起，如果这有点晚了，但这是我如何设法将文件上传到服务器，我真的不知道这是否是实现这一目标的最佳方式，但我希望它有助于给你一个线索。以下教程Eric Bidelman写道（正如Sam Dutton评论的那样）你得到的是一个blob，所以我做了一个XMLHttpRequest来获取视频并将响应类型设置为blob，之后我创建了一个FormData，其中我附加了响应，这将允许将blob发送到服务器。这就是我的函数的样子。

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.

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();
}

这篇关于Html5视频录制和上传？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！