Html5视频录制和上传？

Question

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

到目前为止,我已经使用webrtc getusermedia编写了一个小概念证明.它可以录制视频和播放,但我不知道如何将文件上传回服务器.

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

和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);

如何将此示例中记录的内容作为文件获取,以便将其上载到服务器.

Answer 1

嗨抱歉,如果这有点晚了,但这里是我如何设法将文件上传到服务器,我真的不知道如果这是实现这一目标的最佳方式,但我希望它有助于给你一个线索以下教程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();
}

Answer 2

您可以单独录制视频和音频。您可以获取文件（WAV/WebM）并按需上传。webkitMediaStream 采用两个对象：1)audioTracks 和 2)videoTracks。您也许可以合并音频/视频录制流！