[유튜브 클론코딩] 9.0 Getting User Media

9.0 Getting User Media

비디오를 업로드할 때 비디오 레코드도 가능하게 하는 것을 해볼 것이다.

 

🍰 views 고치고 scss 만들기

우선 그걸 위해 views를 좀 고치겠다.

 

extends layouts/main

block content

    .form-container 

        .record-container#jsRecordContainer

            video#jsVideoPreview

            button#jsRecordBtn Start Recording 

        form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data")

            div.fileUpload

                label(for="file") Video File

                input(type="file", id="file", name="videoFile", required=true, accept="video/*")

            input(type="text",name="title", placeholder="Name" ,required=true)

            textarea(name="description", placeholder="Description" ,required=true)

            input(type="submit", value="Upload Video")

↑ upload.pug

 

그리고 partials > videoRecorder.scss 파일을 만들고 작업한다.

videoRecorder.scss를 styles.scss에 import해주는 것을 잊지 말자.

 

.record-container {

  width: 100%;

  max-width: 320px;

  margin-bottom: 50px;

  video {

    background-color: black;

    width: 100%;

    margin-bottom: 20px;

  }

}

↑ videoRecorder.scss

 

 

현재 우리는 video Preview랑 Start Recording 버튼을 가지고 있다.

 

 

🍰videoRecorder.js 작성하기

(언제나 그랬듯 main.js에 import해주는 것을 잊지 말자)

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

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

const startRecording = () => {

}

function init(){

    recordBtn.addEventListener("click", startRecording);

}

if(recordContainer){

    init();

}

↑ videoRecorder.js

역시 recordContainer가 존재할때에만 init()을 실행하도록 했고, init안에 recordBtn에 대한 이벤트를 추가한 것이다.

이제 startRecording 함수를 만들어보겠다.

녹화를 하려면 media를 user에서부터 얻어와서 video에 넣을 것이다.

video에 넣어야 하니까 video도 getElementById를 이용해서 객체를 가져온다.

 

🍰startRecording 함수 작성하기

 

const startRecording = async() => {

    try{

        const stream = await navigator.mediaDevices.getUserMedia({

            audio: true,

            video: { width: 1280, height: 720 }

        });

        videoPreview.srcObject = stream;

        videoPreview.muted = true;

        videoPreview.play();

    }catch(error){

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

        recordBtn.removeEventListener("click", startRecording);

    }

}

↑ videoRecorder.js

 

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia

여길 참조하여 작성하면 된다.

 

getUserMedia를 이용해서 사용자에게 권한을 요청하고 시스템의 카메라와 오디오 각각 혹은 모두 활성화하여 장치의 입력데이터를 비디오/오디오 트랙으로 포함한 MediaStream을 반환한다.

getUserMedia는 제약(constraints)을 객체로 받는데, 여기에는 audio와 video를 어떻게 할 것인지에 대한 제약사항객체를 파라미터로 받는다.

미디어로 접근하기 위한 권한을 받을 수도 있고 받지 못할 수도 있으니, 만약 권한을 받지 못한다면 catch에서 처리해야 하기 때문에 try-catch 구문으로 작성한다.

또한 사용자로부터 권한을 받는 것을 기다려야 하므로 async - await을 사용한다.

권한을 받아오는데에 성공하면 비디오 화면에 프리뷰가 뜰 수 있도록 srcObject에 넣어준다. 이것은 비디오 파일이 아니니까 src에 넣어줄 수는 없고 srcObject에 넣어주어야 한다. 그리고 프리뷰이므로 사용자가 소리를 듣게 하는 건 원치 않으므로 muted를 true로 해주고 비디오를 play() 시킨다.

권한을 받지 못한다면(catch(error))에서 레코드버튼에 녹화할 수 없다는 메시지를 뜨게 하고 recordBtn의 이벤트를 제거해야 한다.