iOSのGoogleChromeでWebアプリからカメラにアクセスできない

発生している問題

MediaDevices.getUserMedia() APIを使用してWebアプリケーション(Angular)から端末のカメラを利用したいのですが、iOSのGoogle Chromeではカメラへアクセスできません。
--> MediaDevices.getUserMedia()

このAPIの呼び出し時に以下のエラーを出力してカメラのアクセス許可のポップアップすら出てこない状態です。

ERROR TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')

対処方法をご教授いただけますと幸いです。

問題の詳細

再現するのは、iOSGoogle Chromeのみです。
同じ端末のSafariと、AndroidのGoogle Chromeではカメラにアクセス可能。
フロントエンドのフレームワークはAngularを使用しており、v8.2.xおよびv9.0.xで確認済みです。
エラーログの箇所をデバッグしてみると、navigator.mediaDevices = undefinedになっている。

問題箇所の実装

上記の問題が発生しているソースコードは以下の通りです。(抜粋)
実装はとある方のブログのサンプルコードを参考にしております。

html
1<!-- ViewのHTML -->
2<video id="video" #video autoplay playsinline></video>
3<canvas id="canvas" #canvas></canvas>

javascript
1// ViewのコンポーネントのTypeScript
2export class VideoCaptureComponent {
3  @ViewChild("video", { static: true }) videoElement: ElementRef;
4  @ViewChild("canvas", { static: true }) canvasElement: ElementRef;
5
6  startVideo(): void {
7    const constraints: MediaStreamConstraints = {
8      video: {
9        facingMode: "environment"
10      }
11    };
12    navigator.mediaDevices
13      .getUserMedia(constraints) // navigator.mediaDevices=undefinedなのでここで落ちる
14      .then((videoSteam: MediaStream) => {
15        this.videoElement.nativeElement.srcObject = videoSteam;
16      })
17      .catch(error => {
18        alert(error);
19      });
20  }
21}

検証済みの回避策とドキュメント

別の投稿でconstraintsを具体的に指定せず{"video": true}と指定する回避策を見つけましたが、この回避策では解決しませんでした。
MDNのドキュメント上はsecurity contextsを使う必要あり(HTTPSとfile://以外からの読み込みといった安全でないソースは許可されない)と記載がありましたが、実行環境上は window.isSecurityContext = trueの判定になるのでこの問題ではないと考えられます。

退会済みユーザー

2020/03/01 23:30

別のページで不許可にしたときにブラウザ単位で禁止を設定済みなのでは？

Ponzmild

2020/03/02 02:11

回答ありがとうございます。その線で検証してみます。別ページで禁止した場合、元に戻す方法はご存知でしょうか？

行動規範の内容に同意します

回答2件

自己解決

なんとChromeの裏で使われているWebKitの問題でした。
次期リリースバージョンのiOS 13.4 betaでは解消しているとのことなので、時間が解決してくれるものとして当質問はクローズさせていただきます。

投稿2020/03/02 13:11

Ponzmild

総合スコア21

kyoya0819

2020/03/02 13:37

ということは、Safariでも起きるはずです。ご確認をお願いします。

Ponzmild

2020/03/02 14:26

ご指摘ありがとうございます。 SafariもChromeもiOSであればレンダリングエンジンは同じWebKitですね。同じブラウザでもブラウジング機能の実装に差異が影響しているようなので詳細確認してみます！以下参考。 https://qiita.com/pink/items/a54b8cadbe39a06956a9

行動規範の内容に同意します