HTML5解决方案将网络摄像头/摄像头视频流上传到服务器

使用我可以从客户端的网络摄像头/摄像头捕获视频流。使用

video

标记，我可以在客户端的浏览器上显示它。代码：

<video autoplay></video>

<script type="text/javascript">
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var video = $('video')[0];

    var failed = function(e) {
        console.log('Denied!', e);
    };

    if( navigator.getUserMedia ) {
        navigator.getUserMedia( {video: true, audio: true}, function( stream ) {
                video.src = window.URL.createObjectURL(stream);
            }, failed
        )
    } else {
        console.log( 'Not supported!' );
    }
</script>

window.URL=window.URL | | window.webkitURL；
navigator.getUserMedia=navigator.getUserMedia | | navigator.webkitGetUserMedia | | navigator.mozGetUserMedia | | navigator.msGetUserMedia；
var video=$（'video'）[0]；
var失败=功能（e）{
console.log（'Denied！'，e）；
};
if（navigator.getUserMedia）{
getUserMedia（{video:true，audio:true}，函数（流）{
video.src=window.URL.createObjectURL（流）；
}，失败
)
}否则{
console.log（'notsupported！'）；
}

现在是否可以将此视频流作为实时馈送或在用户完成录制并决定上载后发送到服务器

我发现以下几个例子：

---

看看这篇文章：
它显示了以下各项的用途：
这些API应能够构建可在浏览器内运行的应用程序，无需额外下载或插件，允许各方之间使用音频、视频和补充实时通信进行通信，而无需使用中间服务器（除非需要穿越防火墙或提供中间服务）

---

MediaStreamRecorder是用于记录getUserMedia（）流的WebRTC API。它允许web应用程序从实时音频/视频会话创建文件

 <video autoplay></video>

    <script language="javascript" type="text/javascript">
    function onVideoFail(e) {
        console.log('webcam fail!', e);
      };

    function hasGetUserMedia() {
      // Note: Opera is unprefixed.
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    if (hasGetUserMedia()) {
      // Good to go!
    } else {
      alert('getUserMedia() is not supported in your browser');
    }

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia || 
                             navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia || 
                               navigator.msGetUserMedia;

    var video = document.querySelector('video');
    var streamRecorder;
    var webcamstream;

    if (navigator.getUserMedia) {
      navigator.getUserMedia({audio: true, video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        webcamstream = stream;
    //  streamrecorder = webcamstream.record();
      }, onVideoFail);
    } else {
        alert ('failed');
    }

    function startRecording() {
        streamRecorder = webcamstream.record();
        setTimeout(stopRecording, 10000);
    }
    function stopRecording() {
        streamRecorder.getRecordedData(postVideoToServer);
    }
    function postVideoToServer(videoblob) {

        var data = {};
        data.video = videoblob;
        data.metadata = 'test metadata';
        data.action = "upload_video";
        jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);
    }
    function onUploadSuccess() {
        alert ('video uploaded');
    }

    </script>

    <div id="webcamcontrols">
        <button class="recordbutton" onclick="startRecording();">RECORD</button>
    </div>

函数onVideoFail（e）{
console.log（'webcam fail！'，e）；
};
函数hasGetUserMedia（）{
//注：歌剧是不固定的。
return！！（navigator.getUserMedia | | navigator.webkitGetUserMedia）||
navigator.mozGetUserMedia | | navigator.msGetUserMedia）；
}
如果（hasGetUserMedia（））{
//很好！
}否则{
警报（'getUserMedia（）在浏览器中不受支持'）；
}
window.URL=window.URL | | window.webkitURL；
navigator.getUserMedia=navigator.getUserMedia |
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia |
navigator.msGetUserMedia；
var video=document.querySelector（'video'）；
流量记录仪；
网络摄像机流；
if（navigator.getUserMedia）{
getUserMedia（{audio:true，video:true}，函数（流）{
video.src=window.URL.createObjectURL（流）；
网络摄像机流=流；
//streamrecorder=webcamstream.record（）；
}，失败）；
}否则{
警报（“失败”）；
}
函数startRecording（）{
streamRecorder=webcamstream.record（）；
设置超时（停止记录，10000）；
}
函数stopRecording（）{
流记录器.getRecordedData（postVideoToServer）；
}
函数postVideoToServer（videoblob）{
变量数据={}；
data.video=videoblob；
data.metadata='测试元数据'；
data.action=“上传视频”；
jQuery.post（“http://www.kongraju.in/uploadvideo.php“、数据、onUploadSuccess）；
}
函数onUploadSuccess（）{
警报（“视频上传”）；
}
记录

规格：

---

您可以将录制的文件发送到服务器。
我看到了这个。它类似于我在问题中提到的示例2。从文章：

下一步是从画布抓取图像，将其转换为二进制，然后通过websocket发送。问题是我也需要音频，所以这对我不起作用。但似乎音频也可用：你不觉得这太慢了吗？我目前正在使用相同的解决方案，但对于1分钟的音频，您有很多东西需要上传。我仍然在寻找一个流式解决方案，因为我可以在字节到达时立即发送字节。navigator.getUserMedia已被弃用并替换为MediaDevices.getUserMedia，请参阅我想通过javascript中的web套接字发送视频数据。您的解决方案中是否有这样做的选项。。提前感谢。@susan097你们可以从HTML5的canva上做一个技巧，你们的相机feed运行在它上面，获取图像数据并通过套接字发送到服务器，这将是非常快的，我知道它的位带宽消耗解决方案正在我的项目中做这件事，感觉就像视频流一样，在另一端，我得到这些图像并将其写回canva