HTML5視頻錄製

我想通過在服務器端使用HTML5 features + Node.js創建一個簡單的視頻流應用程序（實際上我不確定這是可能的...）。現在我有一些重要的問題：HTML5視頻錄製

是否有可能記錄由navigator.getUserMedia（）API創建的本地流？我閱讀了大量文章，但是它只是用來定義HTML5視頻元素的來源。
是否可以通過websockets發送此流？（socket.io，binaryjs，...？）。否則，我只能想象發送幀到一個畫布元素，我不知道這是一個好的解決方案。
是否有任何支持負載平衡的Node.js模塊？與不同的節點服務器一起工作會很有趣。

謝謝大家提前。

2012-10-08 jarandaf

您可以使用RecordRTC錄製視頻。這裏有一個Demo。

您可以使用「MediaSource」API從視頻元素捕獲預先錄製的媒體;獲取數組緩衝區/ blob/unit8Array並使用XMLHttpRequest或其他方法上傳該數組（塊）。

您可以通過WebSocket/Socet.io/Firebase /等發送這些「cunks」。無需使用RTCWeb API即可進行實時流式傳輸！儘管如此，還有很多陷阱：一個巨大的類型數組。要傳輸的大數據。而且，這些API僅適用於HTML5視頻元素。 Chrome Canary和Firefox支持有限。

好消息是，MediaSource API在播放視頻後立即播放。它不會在播放視頻之前等待下載完整的視頻/數據。

來源

2013-03-03 13:15:00

MediaStreamRecorder是用於記錄getUserMedia（）流的WebRTC API。它允許網絡應用程序通過實時音頻/視頻會話創建文件。

<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有新的方法來捕捉流，看看下面的文章

https://developers.google.com/web/updates/2016/10/capture-stream

來源

2013-05-28 05:36:28

回答

相關問題