ch13. video recorder

0. recorder setup

• getUserMedia 사용할거

[upload.pug]
block scripts 
    script(src="/static/js/recorder.js")
=======================================
[webpack.config.js]
module.exports = {
  entry: {
    ..
    recorder: "./src/client/js/recorder.js",
  },
  
  ==========================
[src/js/recorder.js]
const startBtn = document.getElementById("startBtn");

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  });
  console.log(stream);
};

startBtn.addEventListener("click", handleStart);

• regeneratorRuntime 에러날수있음 >> 설치하기 npm i regenerator-runtime 
• 근데 나는 저에러에초에 없었음. 저거추가하니까 에러떠서 주석처리함

1. video preview

[upload.pug]
block content 
    div     
        video#preview     <<     <<     <<
        button#startBtn Start Recording
        
========================
[recorder.js]
const video = document.getElementById("preview");     <<     <<

const handleStart = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { width: 200, height: 100 },
  });
  video.srcObject = stream;     <<     <<
  video.play();     <<
};

 

2. recording video

• mediaRecorder 사용할거
• removeEventListener 사용 >>init() 기존시작 & 버튼 첫클릭 > start >> 두번째클릭 >> stop

• https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder

MediaRecorder() - Web APIs | MDN

[recorder.js]
const startBtn = document.getElementById("startBtn");
const video = document.getElementById("preview");

let stream = null;

const handleStop = () => {
  startBtn.innerText = "Stop Recording";
  startBtn.removeEventListener("click", handleStop);
  startBtn.addEventListener("click", handleStart);
};
const handleStart = () => {
  startBtn.innerText = "Start Recording";
  startBtn.removeEventListener("click", handleStart);
  startBtn.addEventListener("click", handleStop);
  console.log("handleStart>>>", stream);
  const recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
  console.log(recorder);
};

const init = async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
    //video: { width: 200, height: 100 },
  });
  console.log("init>>>", stream);
  video.srcObject = stream;
  video.play();
};

init();
startBtn.addEventListener("click", handleStart);

• eventHandler  >> dataavailable
• 버튼클릭시 녹화시작 & 5초후 끝나게 할거임

const handleStart = () => {
...
  const recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => {
    console.log(event.data);      >>      >>      >> 이걸로 녹화된거 얻을수있음
  };
  recorder.start();
  setTimeout(() => {
    recorder.stop();
  }, 5000);
};

>> recorder.stop() 하고나면 dataavailable 되어서 위 console.log 이벤트 실행됨

>> 영상 생김

• URL.createObjectURL 사용할거 >> event.data로 받아서 해당파일 접근가능한 URL생성

const handleStart = () => {
...
recorder = new MediaRecorder(stream);
recorder.ondataavailable = (event) => {
    const videoFile = URL.createObjectURL(event.data);
    // blob:http://localhost:4000/938d5a5f-4b94-4bf8-ae62-75f4cb083194
    // >>   브라우저 메모리상에 존재하는 url > 이걸로 파일에 접근가능
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  };

 

3. downloading the file

• 1. 비디오파일 공유필요 global로 만들고
• 2. 가짜 a link생성 & a.download 이용 >> a.click() 하면 다운됨

const handleDownload = () => {
  const a = document.createElement("a");
  a.href = videoFile;
  a.download = "MyRecording.webm";
  document.body.appendChild(a);
  a.click();
};

최종

const startBtn = document.getElementById("startBtn");
const video = document.getElementById("preview");

let stream;
let recorder;
let videoFile;

const handleDownload = () => {
  startBtn.innerText = "Start Recording";
  const a = document.createElement("a");
  a.href = videoFile;
  a.download = "MyRecording.webm";
  document.body.appendChild(a);
  a.click();
};

const handleStop = () => {
  startBtn.innerText = "Download Recording";
  startBtn.removeEventListener("click", handleStop);
  startBtn.addEventListener("click", handleDownload);
  recorder.stop();
};

const handleStart = () => {
  startBtn.innerText = "Stop Recording";
  startBtn.removeEventListener("click", handleStart);
  startBtn.addEventListener("click", handleStop);

  recorder = new MediaRecorder(stream, { mimeType: "video/webm" });
  recorder.ondataavailable = (event) => {
    videoFile = URL.createObjectURL(event.data);
    // blob:http://localhost:4000/938d5a5f-4b94-4bf8-ae62-75f4cb083194
    // >>   브라우저 메모리상에 존재하는 url > 이걸로 파일에 접근가능
    video.srcObject = null;
    video.src = videoFile;
    video.loop = true;
    video.play();
  };
  recorder.start();
};

const init = async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: { width: 200, height: 100 },
  });
  video.srcObject = stream;
  video.play();
};

init();
startBtn.addEventListener("click", handleStart);