라벨이 iphone인 게시물 표시

iOS Safari에서 음소거 자동재생이 안되는 경우

모바일 브라우저는 소리를 포함한 영상을 자동재생할 수 없습니다. YouTube도 그렇고, video 태그도 그렇고, 음소거를 해야 자동재생이 가능합니다. 그럼에도 iOS에서는 무조건 막는 경우가 있는데 사용하는 폰이 절전모드인지 확인해 봐야 합니다. 절전모드로 되어있는 아이폰에서는 자동재생이 무조건 막히는 것을 확인 했습니다. (제가 가지고 있는 안드로이드 폰의 경우, 절전모드로 되어 있어도 자동재생이 가능 했습니다.)

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

`webRTC` API를 지원하는 브라우저에서는 `navigator.mediaDevices.getUserMedia()`를 사용할 수 있습니다. 안드로이드폰에 설치되는 크롬에서는 예전부터 지원하고 있었지만 아이폰에서는 iOS11 이상에 설치되어 있는 사파리에서 지원하기 시작 했습니다. 기본적인 사용방법은 인터넷에 잘 나와 있습니다. 하지만 아이폰에서 사용하려고 보니 몇 가지 특이사항이 있어 적어둡니다. 사용한 기기는 아이폰5s iOS 11.4 입니다. 기본 소스는 다음과 같습니다. <HTML> <video id="video" autoplay playsinline></video> <Javascript> 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()`를 사용하라고 되어 있었는데, 최근에는 ` nav...