解決ガイド · マイクテスト
「SecurityError」と「navigator.mediaDevices is undefined」を直す方法
ブラウザは、安全なページでのみマイクとカメラへのアクセスを許可します。アドレスがhttps://ではなくhttp://で始まる場合や、ページが権限のないフレーム内にある場合、ブラウザはSecurityErrorを返すか、navigator.mediaDevicesを完全に隠し、「TypeError: Cannot read properties of undefined (reading getUserMedia)」になります。解決策は、安全なアドレスを使うことです。
クイック修正チェックリスト
- 1アドレスバーを確認します。ページはhttps://で始まるか、localhostである必要があります。
- 2アドレスのhttp://をhttps://に変えるか、安全なリンクからサイトを開き直します。
- 3アプリや埋め込みビューの中にいる場合は、通常のブラウザタブでページを開きます。
- 4サイトでマイクとカメラを許可し、再読み込みしてからもう一度「チェック」を押します。
- 5サイトを運営している場合は、証明書をインストールし、すべてのhttp通信をhttpsにリダイレクトします。
ブラウザが安全なコンテキストを要求する理由
マイクとカメラは機微なデバイスです。共有ネットワーク上の攻撃者がページをすり替えてあなたを盗み見できないよう、ブラウザは安全なコンテキストでのみこれらを公開します。通常のhttpページ、192.168.x.xのようなローカルネットワークのアドレス、多くのアプリ内ビューは対象外ですが、localhostは対象です。
フレーム内のページでは、権限ポリシーがデバイスをブロックすることもあります。ホストするページが、そのフレームにマイクとカメラを許可する必要があります。
開発者向けチェックリスト
有効な証明書でHTTPS配信し、ローカルの開発はlocalhostでテストし、getUserMediaを呼ぶ前にwindow.isSecureContextを確認します。埋め込みではiframeにallow="microphone; camera"を設定し、権限を取り除くsandboxは避けます。比較できるよう、マイクテストはHTTPSで配信されています。
FAQ
よくある質問
navigator.mediaDevicesがundefinedになるのはなぜですか？
ページが安全なコンテキストにないため、ブラウザがメディアAPIを隠しています。HTTPSまたはlocalhostで開いてください。
localhostは安全とみなされますか？
はい。ブラウザはlocalhostを安全として扱うので、証明書なしで開発できます。他のローカルアドレスにはHTTPSが必要です。
getUserMediaのSecurityErrorとは何ですか？
ページが安全でない、制限されたフレームで読み込まれた、またはポリシーがデバイスを禁止しているため、ブラウザが拒否したことを示します。
httpページでデータは安全ですか？
httpページでのマイクとカメラの使用は避けてください。通信中にページが改ざんされないよう、httpsを使いましょう。