Html5视频录制和上传？

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

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

这里是这个示例的链接

以及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);

---

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

您可以单独记录。您可以获取文件（WAV/WebM）并按需上传。webkitMediaStream接受两个对象：1）音频曲目和2）视频曲目。您可以将两个音频/视频录制流合并

您好，如果这有点晚，很抱歉，但下面是我如何将文件上载到服务器的，我真的不知道这是否是实现这一点的最佳方法，但我希望它能帮助您提供线索。在埃里克·拜德曼（Eric Bidelman）写的教程之后（正如山姆·达顿评论的那样），您得到的是一个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();
}

---

唯一的跨平台网络视频录像机是

它在桌面上使用Flash（记录使用Flash编解码器+流到媒体服务器）和移动设备上的HTML媒体捕获API（记录使用OS+上传到Web服务器）从几乎任何桌面或移动浏览器录制视频

---

您可以将其链接到ffmpeg安装，将所有内容转换为MP4等跨平台格式（iOS记录转换为不在Android上播放的.mov容器），并且它还有JS API。

我知道我参加聚会晚了几年，但这里有一个片段，可以捕获视频并将其作为webm文件上传到包含的node.js服务器。我已经在Chrome和Firefox上进行了测试

---

Eric Bidelman介绍了一种从getUserMedia录制.webm的方法：。recorder.js（甚至RecorderJS）也可能有用。目前，W3C正在起草一份记录API的提案，但Chrome和Chrome都尚未实施。虽然看起来很有希望。这看起来应该可以工作，但我在尝试获取BLOB时得到了404状态。我的问题和代码可以在这里查看：我是否可以在不安装media server的情况下使用它，因为我只需要将视频录制并保存到服务器？

唯一的跨平台…

在HTML5支持的情况下显然是不真实的（至少现在是这样）。媒体录制器API尚未在IE、Edge和Safari上运行