web-dev-qa-db-ja.com

Chrome：navigator.mediaDevices.getUserMediaは関数ではありません

私はローカルホストにいて、ChromeでMediaDevices.getUserMediaメソッドを使用しようとしています。タイトルどおりのエラーが表示されます。 Chromeでは、この関数は安全なOriginでのみ使用でき、localhostは安全なOriginと見なされます。また、これはFirefoxでも機能します。

これは、Google Developers Webサイトに表示されているとおりの使用方法です https://developers.google.com/web/updates/2015/10/media-devices?hl=en ：

var constraints = window.constraints = {
            audio: false,
            video: true
};


navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
            callFactory.broadcastAssembly(stream);
            ...
});
javascriptgoogle-chromewebrtc
11
muninn9

有効にしてみてください：chrome：// flags /＃enable-experimental-web-platform-features

クロムで私のために働いた

7
Simon Malone

一部の最新ブラウザでは、navigator.getUserMediaのパフォーマンスが低下します。そのため、 navigator.mediaDevices.getUserMedia を使用してみてください。または、ブラウザでnavigator.mediaDevices.getUserMediaが使用可能かどうかを確認するには、navigator.mediaDevices.getUserMediaを使用するか、navigator.getUserMediaを使用します。

navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({  audio: true, video: true })
    .then(function (stream) {
                  //Display the video stream in the video object
     })
     .catch(function (e) { logError(e.name + ": " + e.message); });
}
else {
navigator.getWebcam({ audio: true, video: true }, 
     function (stream) {
             //Display the video stream in the video object
     }, 
     function () { logError("Web cam is not accessible."); });
}

これで問題が解決することを願っています。

7
Amrendra

私もこの問題を抱えていましたが、フラグを変更しても機能しなかったようです。私はこれに遭遇しましたchrome拡張機能— Chrome用Webサーバー Googleの WebRTCチュートリアル これはトリックを行っているようです。

0
ellerynz

代わりに navigator.getUserMedia（） を使用してください。

navigator.getUserMedia(constraints, successCallback, errorCallback);
0
Adrian Ber

adapter.js polyfillを含めようとしましたか？このページを確認してください： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility

このように見えるか、chrome://flags/#enable-experimental-web-platform-featuresのメモに従って@Simon Maloneを有効にすることがChromeに必要です。

0
Philippe Sultan