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

HTML5视频录制

回答

相关问题