Vue3 웹앱 카메라 적용기-MediaDevices API편

웹앱을 만들고 있는 중인데, 네이티브 기능을 어떻게 활용할 수 있을지 열심히 창의적으로 삽질중이다.

Vue3에서 카메라 기능을 활용할 수 있는 방법

1. vue-web-cam : Vue.js용으로 개발된 웹캠 컴포넌트

2. vue-camera-lib : Vue.js를 위한 또 다른 카메라 컴포넌트

3. MediaDevices API : Vue 3에서 직접 브라우저의 MediaDevices API를 사용(별도의 라이브러리 없이 네이티브 웹 API를 활용)

4. Capacitor : Capacitor는 네이티브 기기 기능에 대한 접근을 제공하는 크로스 플랫폼 앱 개발 프레임워크 (quasar에서 추천하긴 하나, 상의 후 해당 방법은 보류)

헤헷 헤헷 어떻게든 되기만 하면 된다.

1. vue-web-cam

vue-web-cam 라이브러리 에서 해당 내용을 확인할 수 있으나 이것은 마지막 업데이트가 현재 시간 기준 5년전 이라고 한다

2. vue-camera-lib

해당 라이브러리는 Vue 3에 특화되어 개발되어 있다.
가능한 기능으로는 아래와 같다
웹페이지 내 사진 촬영: 사용자가 웹 페이지에서 직접 사진을 찍을 수 있는 기능을 제공
사용자 인터페이스: 모바일 카메라 앱과 유사한 기본 UI를 제공하며, 필요에 따라 커스텀 UI 구현
디바이스 방향 감지: 자이로스코프가 있는 기기에서는 가로 모드로 사용 시 사진을 자동으로 회전
다양한 출력 옵션: 이미지를 데이터 URL 또는 Blob 형태로 출력

vue-camera-lib Git에서 참고할 수 있다.

3. MediaDevices API

<video> 코드를 통해서 작성이 가능하다.

<q-btn @click="startCamera">카메라 시작~</q-btn>
<video ref="videoElement"></video>

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

    if (videoElement.value) {
      videoElement.value.srcObject = stream;
      videoElement.value.play();
    }
  } catch(err) {
    if (err.name === "NotFoundError" || err.name === "DevicesNotFoundError") {
      console.error("요청된 장치를 찾을 수 없습니다.");
    } else if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
      console.error("카메라/마이크 접근 권한이 거부되었습니다.");
    } else {
      console.error("getUserMedia 오류:", err);
    }
  }
}

다만 여기서 주의할 점은
navigator.mediaDevices.getUserMedia() not working 또는 TypeError: Cannot read properties of undefined (reading 'getUserMedia')
이라는 오류가 계속 발생하는데 https, http 관련 보안 문제다.
chrome://flags/#unsafely-treat-insecure-origin-as-secure chrome://flags 연결링크 에 접속할 서버 ip를 입력후 브라우저를 재시작하면 임시적으로 허용하여 사용할 수 있다.

라고 생각했으나 또 다른 오류가 error가 발생
DOMException: Requested device not found

(번외) 삼성 노트북 카메라 장치 작동 확인

1. Webcam Test 사이트 들어가서 작동 확인
2. 설정>개인 정보 및 보안> 카메라 에서 앱에서 카메라에 액세스하도록 허용 여부 확인하고 켬으로 설정 바꾸기
   
3. Samsung Security 앱 들어가서 카메라 및 마이크 차단 여부 확인하고 꺼짐 으로 변경
   
4. 다시 웹캠 테스트 사이트 들어와서 Test My Cam 버튼 클릭!
   권한 요청 체크가 되면서, 강력하게 허용 해버림
   

다시 원래 하던일(삽질) 로 돌아와서, 설정 변경후 코드 테스트를 해보았는데
페이지 상단에 빨간색 10점만점 과녁표가 생기면서 카메라가 작동해버림

최종 작성된 Script 코드

const videoElement = ref(null);

const startCamera = async () => {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');

    if (videoDevices.length === 0) {
      throw new Error('No video input devices found');
    }

    const constraints = {
      video: {
        // facingMode: 'environment', // 'exact' 제거, 후면 카메라 선호
        width: { ideal: 1280 },    // 'ideal'로 변경하여 유연성 확보
        height: { ideal: 720 }
      }
    };
    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    if (videoElement.value) {
      videoElement.value.srcObject = stream;
      videoElement.value.play();
    } else {
      console.error('Video element not found');
    }

  } catch(err) {
    if (err.name === "NotFoundError" || err.name === "DevicesNotFoundError") {
      console.error("요청된 장치를 찾을 수 없습니다.");
    } else if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
      console.error("카메라/마이크 접근 권한이 거부되었습니다.");
    } else {
      console.error("getUserMedia 오류:", err);
    }
  }
}

나도 너도 퇴근하자..

MDN문서-getUserMedia() 메서드, MDN문서-웹캠 사진촬영에서 자세하게 확인 할 수 있다.

추가 업로드 예정