Question

在诸如localhost：9090 /＃/ chatroom navigator.mediaDevices这样的开发环境下，我想使用麦克风记录销售员的声音。但是在生产环境中，导航器没有mediaDevices对象，它是未定义的。有人可以告诉我为什么吗？

Mozilla / 5.0（Macintosh; Intel Mac OS X 10_14_5）AppleWebKit / 537.36（KHTML，例如Gecko）Chrome / 75.0.3770.90 Safari / 537.36

let stream = null;
const constraints = {
  audio: true,
};

try {
  stream = await navigator.mediaDevices.getUserMedia(constraints);
  /* use the stream */
  this.beginRecord(stream);
  this.recorder.mediaStream = stream;
} catch (err) {
  /* handle the error */
  // console.error(err);
}

navigator.mediadevices.getusermedia不是函数

Answer 1

您必须使用HTTPS。 localhost是此要求的例外。

请注意界面https://w3c.github.io/mediacapture-main/#navigator-interface-extensions上的SecureContext属性。

请参阅：Can't find serviceWorker in navigator anymore。

Answer 2

我找到了这个官方帖子，它杀死了我困惑的地方。

If you are a developer that needs to keep testing a site using a Powerful Feature but you only have a non-secure test server, you have several options:
Secure the server with a publicly-trusted certificate. If the server is reachable from the Internet, several public CAs offer free, automatically-renewed server certificates.

http://localhost is treated as a secure origin, so if you're able to run your server from localhost, you should be able to test the feature on that server.

You can run chrome with the --unsafely-treat-insecure-origin-as-secure="http://example.com" flag (replacing "example.com" with the origin you actually want to test), which will treat that origin as secure for this session. Note that on Android and ChromeOS this requires having a device with root access/dev mode. (This flag is broken in Chrome 63 but fixed in Chrome 64 and later. Prior to Chrome 62, you must also include the --user-data-dir=/test/only/profile/dir to create a fresh testing profile for the flag to work.) 

Create a self-signed certificate for temporary testing. Direct use of such a certificate requires clicking through an invalid certificate interstitial, which is otherwise not recommended. Note that because of this interstitial click-through (which also prevents HTTPS-response caching), we recommend options (1) and (2) instead, but they are difficult to do on mobile. See this post on setting up a self-signed certificate for a server for more information on how to do this.

An alternative approach is to generate a self-signed root certificate which you place into the trust store of the developer PC/devices, and then issue one or more certificates for the test servers. Trusting the root certificate means that Chrome will treat the site as secure and load it without interstitials or impacting caching. One easy way of setting up and using a custom root certificate is to use the open source mkcert tool.

On a local network, you can test on your Android device using port forwarding to access a remote host as localhost.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Answer 3

我遇到了这些挑战，但是当我通过https访问我的网站时一切正常

http://example.com-console.log（navigator.mediaDevices）返回未定义

同时

https://example.com-console.log（navigator.mediaDevices）返回有效对象

Answer 4

TLDR：使用ngrok创建通往您计算机的https隧道。

-

如某些人所述，浏览器仅允许https连接访问mediaDevices API，其中的一个例外是http://localhost或http://127.0.0.1

在开发时，您想在其他设备中测试开发计算机中正在运行的代码，这确实很烦人，要解决此问题，您可以使用ngrok创建到应用程序的安全https隧道！

下载ngrok，解压缩二进制文件，然后执行以下两个步骤：

# Authenticate with ngrok (you only need to do this once per machine)
./ngrok authtoken

# Start a tunnel to your local machine
# (replace "8000" with the port number of your local development web server)
./ngrok http 8000

您将看到类似这样的内容：

ngrok by @inconshreveable

Session Status                online
Account                       Your Account Name (Plan: Free)
Update                        update available (version 2.3.35, Ctrl-U to update)
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://somerandomstuff.ngrok.io -> localhost:8000
Forwarding                    https://somerandomstuff.ngrok.io -> localhost:8000

然后，只需在任何其他设备上的Forwarding字段上访问URL即可！

对于上面的示例，就是这样的：https://somerandomstuff.ngrok.io

-

积分：从这篇文章中得到了构想：

https://www.daily.co/blog/setting-up-a-local-webrtc-development-environment

为什么navigator.mediaDevice仅在localhost：9090上能正常工作？

4 个答案: