HTML5video录制
我想通过在服务器端使用HTML5特性+ Node.js创build一个简单的videostream应用程序（实际上我不知道这是可能的…）。 现在我有一些重要的问题：
- 是否有可能logging由navigator.getUserMedia（）API创build的本地stream？ 我阅读了很多文章，但到处都是用来定义HTML5video元素的来源。
- 可以通过websockets发送这个stream吗？ （socket.io，binaryjs，…？）。 否则，我只能想象发送帧到一个canvas元素，我不知道这是一个很好的解决scheme。
- 有没有支持负载平衡的Node.js模块？ 使用不同的节点服务器会很有趣。
谢谢大家。
您可以使用RecordRTC录制video。 在这里演示 。
您可以使用“MediaSource”API从video元素捕获预先录制的媒体; 获取数组缓冲区/ blob / unit8Array并使用XMLHttpRequest或其他方法上传该数组（块）。
您可以通过WebSocket / Socet.io / Firebase /等发送这些“cunks”。 在不使用RTCWeb API的情况下进行实时stream式传输！ 虽然有这么多的陷阱：一个巨大的types数组。 要传输的大数据 而且，这些API仅适用于HTML5video元素。 Chrome Canary和Firefox支持有限。
好消息是，MediaSource API一播放video就会立即播放。 在播放video之前，不等待整个video/数据被下载。
MediaStreamRecorder是用于logginggetUserMedia（）stream的WebRTC API。 它允许networking应用程序从现场audio/video会话中创build一个文件。
<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.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess); } function onUploadSuccess() { alert ('video uploaded'); } </script> <div id="webcamcontrols"> <button class="recordbutton" onclick="startRecording();">RECORD</button> </div> http://www.w3.org/TR/mediastream-recording/
更新：
MediaElements必须以新的方法来捕捉stream，请看下面的文章
https://developers.google.com/web/updates/2016/10/capture-stream