使用 getUserMedia() 处理和上传视频答案

【问题标题】：Process and upload video using getUserMedia()使用 getUserMedia() 处理和上传视频
【发布时间】：2012-12-18 15:23:56
【问题描述】：

我正在尝试使用最近引入 javascript 的媒体捕获接口上传来自用户的视频。不管浏览器兼容性有多大的困难，我什至无法理解保存用户拍摄的视频的过程。

我在想我可以以某种方式使用 ajax 将流式视频推送到服务器，但即便如此，我什至不确定我是否正确地解决了这个问题。

我包含了我的代码，目前仅在 chrome 和 opera 下流式传输。

function hasUserMedia()
{
    return !!(navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);
}

if(hasUserMedia())
{
    var onFail = function(error)
    {
        alert("ERROR >> " + error);
    };

    var onPass = function(stream)
    {
        var video = document.querySelector('video');
        video.src = window.URL.createObjectURL(stream);

        video.onloadedmetadata = function(e)
        {
            //..what do I put here..?
        };
    }

    navigator.webkitGetUserMedia({video:true, audio:true}, onPass, onFail);
}
else
{
    alert("ERROR >> USERMEDIA NOT SUPPORTED");
}

function saveVideo()
{
    var connection = new XMLPHttpRequest();
    connection.onreadystatechange=function()
    {
        if(connection.readyState == 4 && connection.status == 200)
        {
            alert("Your streamed video has been saved..!");
        }
    }
    //..what do I type here..?
    connection.open("POST","savevideo.php",true);
    connection.send();
}

【问题讨论】：

标签： javascript video stream

【解决方案1】：

目前您无法打开与服务器的 WebRTC 连接（尽管有人可能正在处理它......）。 AFAIK 唯一的方法是通过将视频捕获到画布来截取每一帧的屏幕截图，然后将每个帧发送到服务器并在那里编译视频。

查看： https://webrtc-experiment.appspot.com/RecordRTC/

也可能有帮助：

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

【讨论】：