[유튜브 클론코딩] 9.1 Recording Video part.1

9.1 Recording Video part.1

우선 start recording을 눌렀으면 버튼의 innerHTML이 "Stop recording"으로 바뀌게 코드를 넣는다.

 

그리고 finally부분을 추가하여 removeEventListener 구문을 이곳으로 옮긴다

try나 catch 부분 둘 중 하나가 실행된 후 finally구문이 실행된다.

 

아직 여기까지 한 것은 진짜 녹화를 한 것이 아니라 그냥 프리뷰만 보이게 한 것이니까 함수 이름을 바꾼다.

(startRecording => getVideo)

 

const recordContainer = document.getElementById("jsRecordContainer");

const recordBtn = document.getElementById("jsRecordBtn");

const videoPreview = document.getElementById("jsVideoPreview");

const getVideo = async() => {

    try{

        const stream = await navigator.mediaDevices.getUserMedia({

            audio: true,

            video: { width: 1280, height: 720 }

        });

        videoPreview.srcObject = stream;

        videoPreview.muted = true;

        videoPreview.play();

        recordBtn.innerHTML = "Stop recording";

    }catch(error){

        recordBtn.innerHTML = "😥 녹화할 수 없습니다."

    }finally{

        recordBtn.removeEventListener("click", getVideo);

    }

}

function init(){

    recordBtn.addEventListener("click", getVideo);

}

if(recordContainer){

    init();

}

↑ videoRecorder.js

 

그리고 이젠 진짜 startRecording이라는 이름의 함수를 만든다.

이 함수가 하는 일은 stream에서 가진 video를 recording하는 것이다.

그리고 stream을 함수 바깥에서도 접근할 수 있도록 streamObject라는 이름으로 let으로 바깥에서 정의한다.

 

const recordContainer = document.getElementById("jsRecordContainer");

const recordBtn = document.getElementById("jsRecordBtn");

const videoPreview = document.getElementById("jsVideoPreview");

let streamObject;



const startRecording = () => {

    console.log(streamObject);

}



const getVideo = async() => {

    try{

        const stream = await navigator.mediaDevices.getUserMedia({

            audio: true,

            video: { width: 1280, height: 720 }

        });

        videoPreview.srcObject = stream;

        videoPreview.muted = true;

        videoPreview.play();

        recordBtn.innerHTML = "Stop recording";

        streamObject = stream;

        startRecording();

    }catch(error){

        recordBtn.innerHTML = "😥 녹화할 수 없습니다."

    }finally{

        recordBtn.removeEventListener("click", getVideo);

    }

}

function init(){

    recordBtn.addEventListener("click", getVideo);

}

if(recordContainer){

    init();

}

↑ videoRecorder.js

 

startRecording이라는 함수를 통해 streamObject를 콘솔에 출력하도록 했고, 보다시피 잘 나온다.

 

MediaRecorder() 이용하기

우리는 MediaRecorder()라는 것을 다뤄볼 것이다. 이게 뭐냐면 media를 record하는 것이다.

"new MediaRecorder 오브젝트는 레코드하기 위해 MediaStream이 주어져야 한다"라고 되어 있다. 우리는 아까 getVideo를 통해서 mediaStream을 가지고 있다.

const startRecording = () => {

    console.log(streamObject);

    const videoRecorder = new MediaRecorder(streamObject);

    console.log(videoRecorder);

}

이렇게 videoRecorder를 콘솔에 찍어보면

다음과 같이 나온다. (state - inactive)

 

const startRecording = () => {

    const videoRecorder = new MediaRecorder(streamObject);

    videoRecorder.start();

    console.log(videoRecorder);

}

 

videoRecorder.start()를 작성하면 state가 recording으로 된다.

우리는 지금 레코드를 하고 있지만 데이터로 뭔가를 하고 있지는 않다.

그리고 여기에는 dataavailable이라는 속성이 있다.

그래서 dataavailable이라는 속성에 handleVideoData라는 함수를 addEventListener를 이용해서 추가해준다.

handleVideoData 함수는 event를 받아와서 console에 event를 출력해보도록 일단 작성한다.

 

const handleVideoData = (event) => {

    console.log(event);

}

const startRecording = () => {

    const videoRecorder = new MediaRecorder(streamObject);

    videoRecorder.start();

    videoRecorder.addEventListener("dataavailable", handleVideoData)

}

그런데 여기까지 했을 때 왜 안되는지 모르겠다고 한다.

다음시간에 하겠다!