브라우저에서 서버로 비디오를 제출/스트리밍하는 방법은 무엇입니까?

Question

브라우저에 getUserMedia()을 사용하여 비디오를 녹화 할 수 있습니다. 그러나 브라우저에서 서버로 비디오를 제출 (녹화)하거나 스트리밍 (라이브)하는 편리한 방법을 찾지 못했습니다.

동영상을 캔버스로 렌더링 한 다음 렌더링 된 이미지를 제출하거나 스트리밍하는 것으로 만 알 수 있습니다. 데이터에 의해 uri. (어떤 효과가 없습니다.)

더 좋은 방법이 있습니까? (예를 들어, 직접 바이너리 데이터를 스트리밍하거나 파일에 저장하고이 파일을 보낼 수 있습니다.)

업데이트를 : 내가 찾은 유사한 오래된 질문을 : Stream getUserMedia to an Icecast server?

Answer 1

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/

당신이 서버에 기록 된 파일을 보낼 수 있습니다.

Answer 2

현재이 브라우저는 일부 브라우저가 아니지만 곧 적어도 Chrome에서는 사용할 수 없습니다. 확인 http://code.google.com/p/chromium/issues/detail?id=113676