아이폰에서 getUserMedia() 사용하기

`webRTC` API를 지원하는 브라우저에서는 `navigator.mediaDevices.getUserMedia()`를 사용할 수 있습니다.

안드로이드폰에 설치되는 크롬에서는 예전부터 지원하고 있었지만 아이폰에서는 iOS11 이상에 설치되어 있는 사파리에서 지원하기 시작 했습니다.

기본적인 사용방법은 인터넷에 잘 나와 있습니다.
하지만 아이폰에서 사용하려고 보니 몇 가지 특이사항이 있어 적어둡니다.

사용한 기기는 아이폰5s iOS 11.4 입니다.

기본 소스는 다음과 같습니다.

<HTML>

<video id="video" autoplay playsinline></video>

const userMedia = navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
        width: 640,
        height: 480,
        facingMode: 'environment'
    }
});

userMedia.then(function (stream) {
    const videoEl = document.getElementById('video');

    const videoTracks = stream.getVideoTracks()[0];
    console.log('카메라 이름 : ' + videoTracks.label);

    videoEl.srcObject = stream;

}).catch(function (error) {
    console.error(error.message);
});

웹 페이지 `<video>`태그에 카메라 영상을 보여주는 소스 입니다.

예전에 만들어진 가이드는 `navigator.getUserMedia()`를 사용하라고 되어 있었는데, 최근에는 `navigator.mediaDevices.getUserMedia()`를 사용하라고 합니다. Promise객체가 반환되기 때문에 Promise객체에 대해 알고 있으면 좋습니다.

아이폰에서는 `navigator.mediaDevices.getUserMedia()`를 사파리만 사용할 수 있습니다. 아이폰에 설치되어 있는 다른 브라우저, 앱에서 사용되는 웹뷰에서는 사용할 수 없습니다.

아이폰에서는 `navigator.mediaDevices.getUserMedia()`를 초기화 할 때 `video`항목에 `width`, `height`를 마음대로 적을 수 없습니다. 드라이버에 정의되어있는 사이즈와 다르면 오류가 난다고 하네요. 아예 적지 않거나 정확한 수치를 넣어야 합니다. (640x480는 정상 작동했습니다.) 입력된 사이즈에 상관 없이 세로로 들고 있으면 세로 영상이, 가로로 들고 있으면 가로 영상이 들어옵니다.

아이폰에서는 `<video>`태그에 `playsinline`속성이 있어야 합니다. 아이폰은 기본적으로 영상을 전체 화면으로 재생합니다. `playsinline`속성이 없으면 카메라로 영상을 받아와도 재생을 하지 않아서 검은 화면만 나옵니다. `playsinline`속성은 페이지 안에서 재생하라는 설정 입니다.

new1cm

이 블로그 검색

아이폰에서 getUserMedia() 사용하기