Как отправить/потоковое видео из браузера на сервер?

Question

Я могу записывать видео, используя getUserMedia() в браузере. Однако я не нашел удобный способ отправки (записи) или потокового (живого) видео из браузера на сервер.

Только то, что я нашел, - это рендеринг видео на холст, а затем отправку или передачу изображений, например. по данным uri. (Что недействительно.)

Есть ли лучший способ? (Например, поток непосредственно двоичные данные или сохранить их в файл, а затем отправить этот файл.)

UPDATE: Я нашел подобный старый вопрос: Stream getUserMedia to an Icecast server?

Answer 1

MediaStreamRecorder является WebRTC API для записи GetUserMedia() потоки. Это позволяет веб-приложениям создавать файл с живого сеанса аудио/видео.

<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/

вы можете отправить записанный файл на сервер.

Answer 2

В настоящее время он не является частью какого-либо браузера, но скоро будет доступен по крайней мере в Chrome. Проверка http://code.google.com/p/chromium/issues/detail?id=113676