js challenge day 19

web-cam

 

Code

const video = document.querySelector(".player");
const canvas = document.querySelector(".photo");
const ctx = canvas.getContext("2d");
const strip = document.querySelector(".strip");
const snap = document.querySelector(".snap");

//비디오 엑세스 권한을 받아서 실행
const getVideo = () => {
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((localMediaStream) => {
      console.log(localMediaStream);
      video.srcObject = localMediaStream;
      video.play();
    })
    .catch((err) => {
      console.error("error", err);
    });
};

//화면에 주기적으로 비디오를 그려줌
const paintToCanvas = () => {
  const width = video.videoWidth;
  const height = video.videoHeight;
  canvas.width = width;
  canvas.height = height;
  return setInterval(() => {
    ctx.drawImage(video, 0, 0, width, height);
    let pixels = ctx.getImageData(0, 0, width, height);

    pixels = rgbSplit(pixels);

    ctx.putImageData(pixels, 0, 0);
  }, 16);
};

//사진을 찍으면 이미지로 변경하고, 아래 기록으로 보여줌
const takePhoto = () => {
  snap.currentTime = 0;
  snap.play();
  const data = canvas.toDataURL("image/jpeg");
  const link = document.createElement("a");
  link.href = data;
  link.setAttribute("download", "handsome");
  link.innerHTML = `<img src="${data}" alt="handsome man"/>`;
  strip.insertBefore(link, strip.firstChild);
};
const rgbSplit = (pixels) => {
  for (let i = 0; i < pixels.data.length; i += 4) {
    pixels.data[i - 150] = pixels.data[i + 0]; // RED
    pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
    pixels.data[i - 550] = pixels.data[i + 2]; // Blue
  }
  return pixels;
};

getVideo();

video.addEventListener("canplay", paintToCanvas);

 

배운 점 & 느낀 점

이번에는 웹캡을 조작하는 과제였습니다.

 

navigator 객체를 이용해서, 비디오 액세스 권한 받는 과정을 알 수 있었습니다.

예전에 openvidu를 이용할때는 이런 순수 js코드는 몰랐었는데 새삼 알게 되었습니다.

 

canvas.toDataURL는 canvas를 이미지 데이터 주소로 변경해줍니다.

이를 이용해서 img태그 안 src에 넣은 후에, 노드에 삽입 해주었습니다.

 

insertBefore(newNode, targetNode)은 타겟노드 이전에 newNode를 넣어주는 메소드인데, 이번기회에 사용해보았습니다.