webrtc를 사용하여 비디오를 녹화하는 방법

Question

nodejs를 사용하여 만든 웹 사이트에 랩톱 카메라를 사용하여 비디오를 녹화해야합니다. 이를 위해 webRTC를 사용하고 있습니다. 지금까지 랩톱 카메라를 사용하여 사진을 찍을 수는 있었지만 비디오를 녹화해야했습니다. 코드가 어떻게 될지에 대해 도움을 줄 수 있습니까? 내가 당신을 위해 코드를 작성하지 않을거야

<video id="video"></video> 
<button id="startbutton">Take photo</button> 
<button id="pausebutton">Pause</button> 
<button id="resumebutton">Resume</button> 
<canvas id="canvas"></canvas> 

<script type="text/javascript"> 
(function() { 

    var streaming = false, 
     video  = document.querySelector('#video'), 
     canvas  = document.querySelector('#canvas'), 
     //photo  = document.querySelector('#photo'), 
     startbutton = document.querySelector('#startbutton'), 
     width = 620, 
     height = 50; 

    navigator.getMedia = (navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia || 
         navigator.msGetUserMedia); 

    navigator.getMedia(
    { 
     video: true, 
     audio: false 
    }, 
    function(stream) { 
     if (navigator.mozGetUserMedia) { 
     video.mozSrcObject = stream; 
     } else { 
     var vendorURL = window.URL || window.webkitURL; 
     video.src = vendorURL.createObjectURL(stream); 
     } 
     video.play(); 
    }, 
    function(err) { 
     console.log("An error occured! " + err); 
    } 
); 

    video.addEventListener('canplay', function(ev){ 
    if (!streaming) { 
     height = video.videoHeight/(video.videoWidth/width); 
     video.setAttribute('width', width); 
     video.setAttribute('height', height); 
     canvas.setAttribute('width', width); 
     canvas.setAttribute('height', height); 
     streaming = true; 
    } 
    }, false); 

    function takepicture() { 
    canvas.width = width; 
    canvas.height = height; 
    canvas.getContext('2d').drawImage(video, 0, 0, width, height); 
    var data = canvas.toDataURL('image/png'); 
    // photo.setAttribute('src', data); 
    } 


    function pausevideo() { 
    canvas.width = width; 
    canvas.height = height; 
    video.pause(); 
    } 
    function resumevideo() { 
    canvas.width = width; 
    canvas.height = height; 
    video.play(); 
    } 


    startbutton.addEventListener('click', function(ev){ 
     takepicture(); 
    ev.preventDefault(); 
    }, false); 

    pausebutton.addEventListener('click', function(ev){ 
     pausevideo(); 
    ev.preventDefault(); 
    }, false); 

    resumebutton.addEventListener('click', function(ev){ 
     resumevideo(); 
    ev.preventDefault(); 
    }, false); 


})(); 
</script> 

Answer 1

하지만 여기에 올바른 방향으로 당신을 얻을 수있는 몇 가지 포인터가 (당신이 지금까지받은 경우 꽤있는 것) : 다음과 같이 내 현재 코드입니다. 당신이 (당신은 많은 기능에서 동일한 스트림을 다시 사용할 수있는이 방법을 잡을 때

• 당신은 당신이 쉽게 RTC-Recording에서 튜토리얼을 따라 할 수있는 스트림을 일단
• 는,이 전역 변수를 스트림의 값을 할당 당신이 스트림이있는 경우 녹화

을 다운로드에 당신을 도울해야 디스크 방법 쓰기,이 RecordRTC를 사용하여 시작하는 방법입니다.

var options = { 
     type: 'video' 
    }; 
    var recordRTC = RecordRTC(mediaStream, options); 
    recordRTC.startRecording(); 
    recordRTC.stopRecording(function(videoURL) { 
     mediaElement.src = videoURL; //plays the recorded blob url on that src 
    });