[WebRTC][PearJS] 組み込み時に「getUserMedia() no longer works on insecure origins」というエラーが発生しカメラが使えないとき

ヨメレバCSS
オリジナルCSS

 PeerJSを組み込んだページにhttpでアクセスすると、Chromeで

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

というエラーが出て、カメラが使えない。

 JavaScriptからPCのカメラを使う場合には、httpsでアクセスするか、localhostのサーバーでないといけないというセキュリティ上の制約があるよう。

 かといってサーバーをhttpsにすると、PeerJSのほうで

peer.min.js:1 Mixed Content: The page at 'https://xxx.com/xxx.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://0.peerjs.com:9000/xxx/id?ts=xxx'. This request has been blocked; the content must be served over HTTPS.

というエラーが発生して動かない。これはhttpsのサイト上のページから、PeerJSがXMLHttpRequestでアクセスしている先がhttpなので、エラーになっているよう。

(xxx.comがこちらで用意したサーバー)

 実のところ、これをきちんと解決する方法は、PeerJSサーバーを自前で立てる以外見つけられなかった。

 httpsでないとメディアにアクセスできないということであれば、PeerJSがhttpsに対応してくれるのを待つしかない…正式に導入する場合は、ちゃんと自前で用意しろってことですね。

 とりあえず回避する方法として、Chromeのこのセキュリティ制限を無効にすることはできました。

Windowsの場合、これをショートカットに設定。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --unsafely-treat-insecure-origin-as-secure="http://xxx.com/" -user-data-dir="C:\tmp"

参考:ChromeブラウザでTwilioClientがマイクにアクセスできなくなる

 http://xxx.comが、HTMLドキュメントが置いてあるアクセス先サーバー、C:\tmpはCromeのユーザーデータのないフォルダ、とりあえず空のフォルダを指定すればいいと思います。

スポンサーリンク
GoogleAdSence レクタングル(大)

シェアする

スポンサーリンク
GoogleAdSence レクタングル(大)