13

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

到目前为止，我已经使用 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);

我怎样才能将这个示例中记录的内容作为文件获取，以便可以将其上传到服务器。

4

4 回答 4

7

嗨，对不起，如果这有点晚了，但这是我设法将文件上传到服务器的方法，我真的不知道这是否是实现这一目标的最佳方法，但我希望它有助于给你一个线索.按照教程 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();
}
于 2013-08-06T00:50:37.443 回答
2

您可以分别录制视频和音频。您可以获取文件 (WAV/WebM) 并按需上传。webkitMediaStream 需要两个对象 1) audioTracks 和 2) videoTracks。您也许可以结合音频/视频录制的流！

于 2013-02-20T11:21:55.690 回答
1

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

https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984

于 2017-01-05T21:56:23.680 回答
-3

唯一的跨平台网络录像机是HDFVR 网络摄像头录像机软件。

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

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

于 2014-12-22T18:02:50.433 回答