HTML5では、PCやスマホのカメラをJavaScriptから直接利用することができるようになっています。
具体的には、WebAPIのnavigator.mediaDevicesオブジェクトのgetUserMediaメソッドを利用します。
ただ、ここで設定がきちんとできていないと一部のIphoneではカメラが起動できない（エラー）現象が発生しましたので解決方法とあわせてご紹介します。
もちろんカメラの許可設定やソフトウェアのバージョンなども確認しましたが起動せず、最終的に今回ご紹介する原因にたどり着いたものです。
同じ悩みでこのブログにたどり着かれた方の力になれば幸いです。
facingModeの設定方法に注意
早速ですが、カメラが起動しない原因となっていたコードがこちらです。
function startVideo(){
localVideo = document.querySelector('#local_video')
navigator.mediaDevices
.getUserMedia({
audio: false,
video:{
facingMode:'environment' //ここが原因
}
})
.then(function(stream) {
localVideo.srcObject = stream
localVideo.onloadedmetadata = function(e) {
localVideo.play();
checkImage();
}
})
.catch(function(err) {
alert('カメラが起動できません');
})
}
上記のコードのうち、オレンジ色の箇所が原因でした。
もしあなたのコードも同じ書き方をしている場合は、オレンジ色の箇所を次のように修正してください。
video: {
facingMode: { exact: 'environment' }
}
これでSafari（Iphone)でもカメラが起動できると思います。
許可を要求するカメラを選択する設定になりますが、ここの設定の書き方についてはサイトごとにバラつきがあるようなので要注意ですね。
ちなみにスマホだとenvironmentは外側のカメラ、userと書くと内側のカメラ（インカメ）が選択されます。
（JavaScript) SafariでIphoneのカメラが起動できない：最後に
もしこの方法でもカメラ起動でエラーが出る場合で利用者が限られるのであれば、ひとまずはブラウザをChromeに変更して試してみることをおすすめします。
私の場合はブラウザをChromeに変更すれば今回ご紹介した修正をしなくても正常に起動していたため、初めはブラウザをChrome限定にしていました。
この記事で救われる方がいらっしゃれば幸いです。
ご覧いただきありがとうございました。