html5视频录制和上传?

Posted

技术标签:

【中文标题】html5视频录制和上传?【英文标题】:Html5 video recording and upload? 【发布时间】:2013-02-05 06:05:54 【问题描述】:

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

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

如何将本示例中记录的内容作为文件获取,以便上传到服务器。

【问题讨论】:

Eric Bidelman 描述了一种从 getUserMedia 录制 .webm 的方法:ericbidelman.tumblr.com/post/31486670538/…。 recorder.js(甚至 RecorderJS)也可能有用。 http://lists.w3.org/Archives/Public/public-media-capture/2012Dec/att-0159/RecordingProposal.html 有一个 W3C 记录 API 的工作草案提案但是,Firefox 和 Chrome 都没有实现它。不过看起来很有希望。 【参考方案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();

【讨论】:

这似乎应该可以工作,但我在尝试获取 BLOB 时得到 404 状态。我的问题和代码可以在这里查看:***.com/questions/27707322/…【参考方案2】:

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

【讨论】:

【参考方案3】:

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

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

【讨论】:

【参考方案4】:

唯一的跨平台网络视频录像机是HDFVR webcam video recorder software。

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

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

【讨论】:

我可以在不安装媒体服务器的情况下使用它,因为我只需要录制并保存视频到服务器吗? The only cross platform... 在 HTML5 支持时显然是不真实的(至少现在是这样)。 w3.org/TR/mediastream-recording. Media Recorder API 尚未在 IE、Edge 和 Safari 上运行 addpipe.com/blog/mediarecorder-api

以上是关于html5视频录制和上传?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 录制中等质量的视频以供 Safari 播放

如何使用 HTML5 WebRTC 录制和保存视频

iOS 视频录制压缩上传

在后端录制 HTML5 WebGL 的视频

是否可以在所有浏览器中使用 html5 录制视频?

分辨录制的视频和选定的视频之间的区别