JavaScript로 장치 카메라에 액세스하는 방법(전면 및 후면)

여러분! 이 게시물에서는 여러 브라우저를 지원하고 외부 라이브러리 없이 JavaScript를 통해 웹 페이지에서 장치의 카메라에 액세스하는 방법을 보여줍니다.

카메라에 액세스하는 방법

사용자의 카메라(및/또는 마이크)에 액세스하기 위해 JavaScriptMediaStream API를 사용합니다. 이 API를 사용하면 streams을 통해 이러한 장치에서 캡처한 비디오 및 오디오에 액세스할 수 있습니다.

첫 번째 단계는 브라우저가 이 API를 지원하는지 확인하는 것입니다.

if (
  "mediaDevices" in navigator &&
  "getUserMedia" in navigator.mediaDevices
) {
  // ok, browser supports it
}

최신 브라우저에서는 지원이 적절합니다(물론 Internet Explorer는 지원하지 않음).

비디오 스트림 캡처

카메라에서 생성된 비디오 스트림을 캡처하기 위해 getUserMedia 객체의 mediaDevices 메서드를 사용합니다.

이 메서드는 요청하는 미디어 유형(비디오 또는 오디오)과 일부 요구 사항이 포함된 개체를 받습니다. 시작하려면 {video: true}를 전달하여 카메라에서 비디오를 가져올 수 있습니다.

const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });

이 호출은 사용자에게 카메라 액세스 권한을 요청합니다. 사용자가 이를 거부하면 예외가 발생하고 스트림을 반환하지 않습니다. 따라서 이 경우를 처리하려면 try/catch 블록 내에서 수행해야 합니다.



Promise 을 반환하므로 async/await 또는 then 블록을 사용해야 합니다.

비디오 요구 사항

원하는 해상도와 최소 및 최대 제한에 대한 정보를 전달하여 비디오 요구 사항을 개선할 수 있습니다.

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440,
    },
  },
};

const videoStream = await navigator.mediaDevices.getUserMedia(constraints);

이렇게 하면 스트림이 너비와 높이의 정확한 비율로 나옵니다. 세로 모드의 휴대폰인 경우 치수 반전을 처리합니다.

페이지에 비디오 표시

자, 이제 스트림이 생겼으니 무엇을 할 수 있을까요?
video 요소로 페이지에 비디오를 표시할 수 있습니다.

// considering there is a
// <video autoplay id="video"></video> 
// tag in the page
const video = document.querySelector("#video");
const videoStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = videoStream;

autoplay 태그의 video 속성에 유의하십시오. 이것이 없으면 이미지 표시를 실제로 시작하려면 video.play()를 호출해야 합니다.

휴대폰의 전면 및 후면 카메라에 액세스

기본적으로getUserMedia 시스템의 기본 비디오 녹화 장치를 사용합니다. 카메라가 두 개인 휴대폰의 경우 전면 카메라를 사용한다.

후면 카메라에 액세스하려면 비디오 요구 사항에 facingMode: "environment"를 포함해야 합니다.

const constraints = {
  video: {
    width: { ... },
    height: { ... },
    facingMode: "environment"
  },
};

기본값은 facingMode: "user" 이며 전면 카메라입니다.

이미 재생 중인 비디오로 카메라를 변경하려면 다른 카메라의 스트림으로 교체하기 전에 현재 스트림을 중지해야 합니다.

videoStream.getTracks().forEach((track) => {
  track.stop();
});

스크린샷 찍기

당신이 할 수 있는 또 다른 멋진 일은 비디오의 이미지(스크린샷)를 캡처하는 것입니다.

예를 들어 캔버스에 현재 비디오 프레임을 그릴 수 있습니다.

// considering there is a
// <canvas id="canvas"></canvas>
// tag in the page
const canvas = document.querySelector("#canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);

img 요소에 캔버스 콘텐츠를 표시할 수도 있습니다.

이 튜토리얼을 위해 만든 예제에서는 캔버스에서 동적으로 이미지를 생성하고 페이지에 추가하는 버튼을 추가했습니다. 다음과 같은 것:

const img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
screenshotsContainer.prepend(img);

결론

여기에서 실행 예제를 참조하십시오: https://doug2k1.github.io/javascript-camera/

전체 소스 코드는 다음과 같습니다. https://github.com/doug2k1/javascript-camera