現在、公式アカウントのメニューからLIFFアプリを開き 遷移した画面でカメラを操作するアプリを作成しています。 画面ではカメラ映像をインラインで表示しています。
Androidでは正常に動作するのですが、iPhoneでは真っ黒の画面となり カメラを許可するダイアログも出ません。 コードが間違っているのか、権限の許可が足りないのか分かりません。 LIFFアプリ内でiPhoneのカメラをインラインで表示するのは どうすれば可能か、ご存知の方は教えて頂けないでしょうか？
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <video id="vidPhoVideo" autoplay playsinline></video> </body> <script> const video = document.getElementById("vidPhoVideo");
const constraints = {
audio: false,
video: {
facingMode: { exact: "environment" }
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
video.srcObject = stream;
})
.catch((err) => {
alert(err);
});
</script> </html>
LIFFではなくブラウザから通常のURLで表示すると正常に動作します。
ドキュメントにもある通りiOSのLIFFにはWKWebViewが使われており 今までのWKWebViewにはgetUserMediaのAPIが存在していませんでした。
https://developers.line.biz/ja/docs/liff/overview/#when-the-liff-app-is-opened-in-a-liff-browser https://qiita.com/tetrapod117/items/c958da63e1d1300d3f68
iOS 14.3からのWKWebViewではgetUserMediaが使えるようになったため 14.2以前の場合はSafari等の外部ブラウザを開くことで回避し、14.3以降はLIFFで行うことで実現が可能です。
https://zenn.dev/voluntas/articles/ios143-wkwebview-getusermedia
