Web Camera API를 사용하여 여러대의 캠 연동

설명

카메라 2대이상 연동, 카메라가 준비되면 3초뒤 촬영 로직

Source

HTML 부분

<video id="live1" style="width: 100%; height: 100%" autoplay playsinline></video>
<video id="live2" style="width: 100%; height: 100%" autoplay playsinline></video>

<!-- 최상단에 위치 -->
<div id="counterDiv" style="display: none;position: fixed; width: 100%; height: 100vh;top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); align-items: center; justify-content: center;">
  <div id="counter" style="display: inline-block; color: white; font-size: 200px">카메라 준비중..</div>
</div>

JS 부분

var videoElements;
let interval;
window.onload = function () {
  videoElements = document.querySelectorAll('video');
  getCameraPermissionAndList();
  setupWebcams().catch((err) => {
    console.error(err)
  });
}

async function getCameraPermissionAndList() {
  try {
    await navigator.mediaDevices.getUserMedia({ video: true });
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(
      (device) => device.kind === "videoinput",
    );
    console.log("사용 가능한 카메라:", videoDevices);

    return videoDevices;
  } catch (error) {
    console.error("카메라 접근 권한을 얻지 못했습니다:", error);
  }
}
async function setupWebcams() {
  document.getElementById("counterDiv").style.display = 'flex';

  const videoDevices = (await navigator.mediaDevices.enumerateDevices())
  .filter(device => device.kind === "videoinput");

  if (videoDevices.length < 2) {
    console.error("두 개 이상의 웹캠이 필요합니다.");
    return;
  }

  [stream1, stream2] = await Promise.all([
    navigator.mediaDevices.getUserMedia({video: {deviceId: {exact: videoDevices[0].deviceId}}}),
    navigator.mediaDevices.getUserMedia({video: {deviceId: {exact: videoDevices[1].deviceId}}})
  ]);

  document.getElementById("live1").srcObject = stream1;
  document.getElementById("live2").srcObject = stream2;


  interval = setInterval(checkVideosReady, 1000);
}

// 카메라 연동 확인 함수
function checkVideosReady() {
  if (Array.from(videoElements).every(video => !video.paused)) {
    document.getElementById("counter").innerText = counter;
    if (counter === 0) {
      document.getElementById("counterDiv").style.display = 'none';
      Array.from(videoElements).map((video) => video.pause())
      startCameraShot();
      clearInterval(interval);
    } else {
      counter--;
    }
  }
}


function startCameraShot(){
  getImage(document.getElementById("live1")).then((photo1) => {
    getImage(document.getElementById("live2")).then((photo2) => {
      // 카메라 연동 해제
      stream1.getTracks().forEach(track => track.stop());
      stream2.getTracks().forEach(track => track.stop());
      onCameraShot(photo1, photo2)
    })
  })
}


function getImage(element) {
  return new Promise(resolve=>{
    const canvas = document.createElement("canvas");
    canvas.width = element.videoWidth;
    canvas.height = element.videoHeight;

    canvas.getContext('2d').drawImage(element, 0, 0, canvas.width, canvas.height);
    // const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
    const dataUrl = canvas.toDataURL();
    canvas.remove()
    resolve(dataUrl);
  })
}

function onCameraShot(photo1, photo2) {
  // 사진 찍었을때 로직
}

// 카메라 권한만 얻어오고 당장 사용 안할꺼면 아래코드 사용
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
	console.log("카메라 권한을 얻었습니다.");

	stream.getTracks().forEach(track => track.stop());
})
.catch(error => {
	console.error("카메라 권한을 얻지 못했습니다:", error);
});