Q&A

LIFFアプリでカメラ映像が表示されない

前提・実現したいこと

現在、公式アカウントのメニューから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で表示すると正常に動作します。

補足情報(FW/ツールのバージョンなど)

  • 0
  • 2
  • 288
  • twitter facebook

ドキュメントにもある通り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

  • 0

ご回答ありがとうございました。 教えて頂いた方法で回避できそうですので非常に助かりました!

  • 0
本当によろしいですか? question.vm