webRTC 카메라/오디오 권한 획득 기본 샘플

WebRTC 에서 카메라 권한 부분을 확인해 보도록 하겠습니다.

모든 WebRTC 는 HTTPS (SSL) 브라우져에서만 사용할수 있습니다.

getUserMedia() 

위 메서드는 요청된 미디어 유형을 포함하는 트랙을 생성하여 미디어 입력을 사용할수 있는 권한을 사용자에 요청합니다.

그 스트림은 예를 들어 비디오 트랙(하드웨어 또는 카메라, 비디오 녹화 장치, 화면 공유 서비스 등과 같은 가상 비디오 소스에 의해 생성됨), 오디오 트랙(유사하게 물리적 또는 마이크, A/D 변환기 등과 같은 가상 오디오 소스) 및 가능한 기타 트랙 유형.

getUserMedia() 는 Promise 객체로 반환됩니다.

# 다이렉트

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream)
.catch(handleLocalMediaStreamError);

# arrow function 사용

const getMedia = async mediaStreamConstraints => {
  let stream = null;
  try {
    stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
    gotLocalMediaStream(stream);
  } catch (err) {
    handleLocalMediaStreamError(err)
  }
};

매개변수 mediaStreamConstraints

각 유형에 대한 요구 사항과 함께 요청할 미디어 유형을 지정하는 개체입니다.

매개 변수는 요청된 미디어 유형을 설명하는 두 개의 멤버가 있는 객체입니다 . 

둘 중 하나 또는 모두를 지정해야 합니다. 

브라우저가 주어진 제약 조건을 충족하는 지정된 유형을 가진 모든 미디어 트랙을 찾을 수 없는 경우 반환된 약속은 로 거부됩니다 . videoaudioNotFoundError DOMException

다음은 특정 요구 사항 없이 오디오와 비디오를 모두 요청합니다.

const mediaStreamConstraints = {
  video: true,
  Audio: true,
};

사용자가 권한을 허락하면 Promise 의 then 인자인 gotLocalMediaStream 함수를 실행합니다.

const gotLocalMediaStream = mediaStream => {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
};

gotLocalMediaStream 함수는 인자로 mediaStream 을 받아서 해당 video 태그에 꽃아 줍니다.

작동원리

getUserMedia() 브라우저는 사용자에게 카메라에 액세스할 수 있는 권한을 요청합니다(현재 원본에 대한 카메라 액세스가 처음 요청된 경우). 

성공하면 다음 속성을 통해 미디어 요소에서 사용할 수 있는 MediaStream이  srcObject 반환됩니다.

 

전체소스

'use strict';

// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
  video: true,
  Audio: true,
};

const localVideo = document.querySelector('video');

let localStream;

const gotLocalMediaStream = mediaStream => {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
};

const handleLocalMediaStreamError = error => {
  console.log(`navigator.getUserMedia error: ${error}`);
};


const getMedia = async mediaStreamConstraints => {
  let stream = null;
  try {
    stream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints);
    gotLocalMediaStream(stream);
  } catch (err) {
    handleLocalMediaStreamError(err)
  }
};

getMedia(mediaStreamConstraints);

 

참고 

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

MediaDevices.getUserMedia() - Web APIs | MDN