Chrome：navigator.mediaDevices.getUserMedia 不是一個函數

Question

我在本地主機上並嘗試在 Chrome 中使用 MediaDevices.getUserMedia 方法。 我收到標題為的錯誤。 我知道在 Chrome 中，只能在安全來源中使用此功能，並且 localhost 被認為是安全來源。 此外，這適用於 Firefox。

這就是我使用它的方式，如 Google Developers 網站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);
            ...
});

Answer 1

在一些最新的瀏覽器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."); });
}

希望這能解決您的問題。

Answer 2

嘗試啟用：chrome://flags/#enable-experimental-web-platform-features

在鉻為我工作

Answer 3

我的 chrome 瀏覽器也遇到了同樣的問題。 首先通過在https://test.webrtc.org/ 中測試來檢查您的手機是否受支持

如果您的手機通過了所有情況，請檢查第 2 步

第二步：如果您托管網頁或運行第三方網頁，請查看您的手機是否啟用了攝像頭權限。

此外，主要問題是HTTP 站點不支持 WEBRTC，僅 HTTPS 站點支持

這是允許 web 的 https 站點這是給出錯誤的 http 站點

Answer 4

我陷入了同樣的問題。 一種解決方案是關注並下載@ellerynz 在上述評論中共享的 Chrome擴展Web 服務器，或

如果你安裝了 python，你也可以這樣做

python -m SimpleHTTPServer [port]

按 Enter 鍵后，您應該會看到以下消息：

Serving HTTP on 0.0.0.0 port 8000 ...

打開瀏覽器並輸入

http://127.0.0.1:[port]

Answer 5

使用navigator.getUserMedia()代替。

navigator.getUserMedia(constraints, successCallback, errorCallback);

Answer 6

您是否嘗試過包含adapter.js ？ 檢查此頁面： https : //developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Browser_compatibility

看起來像這樣或根據@Simon Malone的說明啟用chrome://flags/#enable-experimental-web-platform-features ，這是 Chrome 需要的。

Answer 7

我也遇到了這個問題，更改標志似乎不起作用。 我在 Google 的WebRTC 教程中遇到了這個 chrome 擴展 — Web Server for Chrome ，它似乎可以解決問題。