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 태그에 꽃아 줍니다.
전체소스
'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