PWA에서 카메라에 액세스하는 방법

게시 됨: 2020-08-19

목차

이전에 PWA의 하드웨어 기능을 자세히 설명하는 기사에서 다루었던 카메라 액세스는 우리가 점점 더 많이 보고 있는 가장 두드러진 기능 중 하나입니다. 그러나 이 기능을 PWA에 적절하게 통합하는 것도 쉬운 일이 아닙니다. 그래서 오늘 기사에서 이 전체 프로세스를 안내해 드리겠습니다.

전제 조건

  • ReactJS와 우리가 작성한 가이드를 사용하여 쉽게 만들 수 있는 기본 PWA
  • HTML과 JavaScript에 대한 확실한 이해

PWA에서 카메라에 액세스하는 방법

기본

getUserMedia() 소개 — webRTC의 API

카메라 및/또는 마이크에 직접 액세스하기 위해 웹은 거의 모든 최신 브라우저에서 널리 지원되는 getUserMedia() 라는 API를 사용합니다. 이 API는 RTCPeerConnection 및 RTCDataChannel 과 함께 실시간 통신을 가능하게 하는 브라우저에 내장된 프레임워크인 WebRTC의 일부입니다.

기본적으로 API( navigator.mediaDevices.getUserMedia(constraints) )가 하는 일은 사용자에게 전화의 오디오 및 비디오 입력(예: 마이크, 웹캠, 카메라 등)에 대한 액세스 권한을 요청하는 것입니다. API는 어떤 권한을 사용하여 추가로 조작할 수 있는 local 이라는 MediaStream JavaScript 객체를 생성합니다.

예

예를 들어 버튼이 있다고 가정해 보겠습니다. 

 <button>내 얼굴 보여주기</button>

그리고 navigator.mediaDevices.getUserMedia() 메서드를 호출하는 버튼을 클릭하면(오디오 입력 없이): 

 navigator.mediaDevices.getUserMedia({
 비디오: 사실
})

젠장, 우리는 제약 조건도 거칠 수 있습니다. 

 navigator.mediaDevices.getUserMedia({
  동영상: {
    최소 종횡비: 1.333,
    최소 프레임 속도: 30,
    너비: 1280,
    높이: 720
  }
})

또한 브라우저에 장치의 어떤 카메라를 사용할지 알려주는 비디오 객체에 facingMode 속성을 지정할 수 있습니다. 

 {
  동영상: {
    ...
    직면 모드: {
// 후면 카메라 사용
      정확한: '환경'
    }
  }
}

또는 

 {
 동영상 : {
  …
//전면 카메라 사용
  faceMode: '사용자'
 }
}

참고 :

  • API는 보안 출처(HTTPS)에서만 사용할 수 있습니다.
  • 현재 장치에서 지원되는 제약 조건 목록을 가져오려면 다음을 실행합니다. 
 navigator.mediaDevices.getSupportedConstraints()

복잡한 부분

기본 사항을 확실히 이해했으므로 이제 고급 부분으로 넘어갑니다. 이 부분에서는 PWA에 버튼을 만들고 클릭하면 카메라가 열리고 추가 작업을 수행할 수 있습니다.

[Get access to camera] 버튼 생성

먼저 index.html에서 <button> 부터 시작하겠습니다. 

 <button>카메라 액세스 권한 얻기</button>
<동영상 자동재생></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

참고 사항 :

  • 자동 재생은 미디어 스트림에 자동 재생을 지시하고 첫 번째 프레임에서 정지하지 않도록 합니다.
  • adapter-latest.js는 사양 변경 및 접두사 차이로부터 앱을 격리하는 shim입니다.

버튼을 클릭하여 실시간으로 비디오 스트리밍

버튼을 클릭할 때 실시간으로 비디오를 스트리밍하려면 click 이벤트가 발생할 때 호출될 EventListener 를 추가해야 합니다. 

 document.querySelector('#get-access').addEventListener('클릭', 비동기 함수 init(e) {
  노력하다 {
 }
잡기(오류) {
 }
})

그런 다음 navigator.mediaDevices.getUserMedia() 를 호출하고 장치의 웹캠을 사용하여 비디오 스트림을 요청합니다. 

 document.querySelector('#get-access').addEventListener('클릭', 비동기 함수 init(e) {
  노력하다 {
    const 스트림 = navigator.mediaDevices.getUserMedia({
      오디오: 거짓,
      비디오: 사실
    })
    const videoTracks = stream.getVideoTracks()
    const 트랙 = videoTracks[0]
    alert(`동영상 가져오기: ${track.label}`)
    document.querySelector('비디오').srcObject = 스트림
    document.querySelector('#get-access').setAttribute('숨김', true)
//비디오 스트림은 재생 3초 후 track.stop()에 의해 중지됩니다.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } 잡기(오류) {
    경고(`${오류 이름}`)
    console.error(오류)
  }
})

또한 위의 기본 섹션에서 지정한 대로 비디오 스트림에 대한 추가 요구 사항을 지정할 수도 있습니다. 

 navigator.mediaDevices.getUserMedia({
  동영상: {
    필수: { minAspectRatio: 1.333, maxAspectRatio: 1.334, 직면 모드: '사용자'},
    선택 사항: [
      { minFrameRate: 60 },
      { 최대폭: 640 },
      { 최대 높이: 480 }
    ]
  }
}, 성공 콜백, 오류 콜백);

캔버스 만들기

<video> 요소를 <canvas> 와 결합하여 실시간 비디오 스트림을 추가로 처리할 수 있습니다. 여기에는 JavaScript 코드를 사용하여 사용자 정의 필터 적용, 크로마 키잉(일명 "녹색 화면 효과")과 같은 다양한 효과를 수행하는 기능이 포함됩니다.

이에 대해 더 알고 싶다면 Mozilla에서 캔버스를 사용한 비디오 조작에 대한 자세한 가이드를 작성했으므로 잊지 말고 확인하십시오!

takePhoto() 및 grabFrame() )을 사용하여 캔버스의 스냅샷 캡처

getUserMedia API의 새로운 takePhoto 및 grabFrame 메서드를 사용하여 현재 스트리밍 중인 비디오의 스냅샷을 캡처할 수 있습니다. 두 가지 방법 사이에는 여전히 중요한 차이점이 있습니다.

기본적으로 grabFrame 이 하는 일은 단순히 다음 비디오 프레임을 잡는 것입니다. 이는 사진을 캡처하는 데 있어 효율적이지 않고 간단합니다. 반면에 takePhoto 방식은 더 나은 프레임 캡처 방식을 사용합니다. 즉, 현재 비디오 스트림을 중단하여 카메라의 "가장 높은 사진 카메라 해상도"를 사용하여 Blob 이미지를 캡처하는 것입니다.

아래 예제에서는 캡처된 프레임을 grabFrame 메서드를 사용하여 canvas 요소에 그릴 것입니다. 

 var GrabFrameButton = document.querySelector('버튼#grabFrame');
var 캔버스 = document.querySelector('캔버스');

GrabFrameButton.onclick = GrabFrame;

함수 GrabFrame() {
  imageCapture.grabFrame()
  .then(함수(이미지 비트맵) {
    console.log('캡처된 프레임:', imageBitmap);
    캔버스.너비 = 이미지비트맵.너비;
    캔버스.높이 = 이미지비트맵.높이;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('숨겨진');
  })
  .catch(함수(오류) {
    console.log('grabFrame() 오류: ', 오류);
  });
}

그리고 이 예에서는 takePhoto() 메서드를 사용합니다. 

 var takePhotoButton = document.querySelector('button#takePhoto');
var 캔버스 = document.querySelector('캔버스');

takePhotoButton.onclick = 사진 촬영;

// 현재 선택된 카메라 소스에서 Blob을 가져오고
// 이것을 img 요소로 표시합니다.
함수 촬영 사진() {
  imageCapture.takePhoto().then(함수(블롭) {
    console.log('사진 촬영:', blob);
    img.classList.remove('숨겨진');
    img.src = URL.createObjectURL(블롭);
  }).catch(함수(오류) {
    console.log('takePhoto() 오류: ', 오류);
  });
}

위의 방법이 실제로 어떻게 보이는지 알아보려면 Simple Image Capture를 권장합니다. 또는 PWA 미디어 캡처는 PWA의 기본 미디어 캡처 기능이 어떻게 생겼는지 보여주는 좋은 예이기도 합니다.

결론

이 튜토리얼에서는 PWA에서 카메라 기능을 구현하기 위한 몇 가지 고급 트릭과 기본 사항을 소개했습니다. 나머지는 이 기능을 최대한 활용하기 위한 상상에 달려 있습니다.

차세대 PWA 기반 매장을 개발하려는 Magento 가맹점을 위해 여기 SimiCart에서 귀하의 요구에 맞는 완벽한 PWA 솔루션을 제공합니다.

simicart PWA 살펴보기