JavaScript GetUserMedia 使用 Chrome 和没有 HTTPS 的本地主机

JavaScript GetUserMedia using Chrome with localhost without HTTPS

我不知道如何在标题中表达它,但我遇到了 Chrome 的问题。

我正在尝试在 Chrome 中使用 GetUserMedia()GetPosition()。我知道它首先需要 SSL 认证,除非你在 localhost。问题是,我不能在我的电脑上尝试我的项目,所以我必须使用我的智能 phone,并且为了通过我的智能 phone 访问 localhost,我必须使用机器的 IP 地址 (192.168.1.4)。问题是 Chrome 不认为此 IP 地址为 localhost,因此它需要 SSL 证书。

有什么方法可以在我的 smartphone 上测试我的项目而无需安装 SSL 证书?

我假设您正在尝试在计算机上托管 Web 服务并使用主机名 localhost.

从智能 phone 访问它

想到两个选项:

首先,如果您的智能 phone 已 root,您可以更改 /etc/hosts 以便名称 localhost 解析为 192.168.1.4 而不是 127.0.0.1 .

其次,如果您可以 运行 在计算机上安装 SSH 服务器,则可以在 phone 上设置 SSH 客户端,将某个端口上的流量转发到另一台计算机上的另一个端口。

例如,在 Android 的 ConnectBot 中,您可以

  1. 为您的计算机创建配置文件 运行在 192.168.1.4
  2. 上安装 SSH 服务器
  3. 长按配置文件,然后 select "Edit port forwards" 然后 "Add port forward" 来自端口转发菜单
  4. 将其配置为"Local",然后选择一个本地源端口,非root用户可以在您的phone(例如8080)和底部声明该端口行,使用 localhost:80(或计算机正在 运行 开启服务的任何端口)使 SSH 服务器在端口 80
  5. 上将转发隧道直接指向自身

这将导致您 phone 上指向 localhost:8080 的所有流量都转到您计算机上的 192.168.1.4:80。浏览器不知道 localhsot:8080 服务实际上只是通往 192.168.1.4:80 的 SSH 隧道,因此它会将其视为任何其他 localhost 地址。

您可以使用 https://ngrok.com/ 之类的服务将带有 SSL 证书的 public DNS 地址映射到本地计算机上的端口。

将您的 IP 地址添加到 Chrome 的 Insecure origins treated as secure setting

  1. 转到 Chrome 中的 chrome://flags/#unsafely-treat-insecure-origin-as-secure

  2. 找到Insecure origins treated as secure setting.

  3. 启用它。

  4. 输入http://cntral.me:3000.

  5. 重新启动 Chrome。

  6. 瞧!

也请参阅 https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339 了解详细的演练。

你可以在没有 SSL 证书的情况下通过将网络服务器隧道连接到你的 phone 的本地主机来做到这一点。

我使用 termux 到 运行 这个命令(在 phone 本身):

ssh -L 8080:localhost:8080 192.168.0.172

(保持 ssh 会话打开)

然后转到 phone 上的 http://localhost:8080/

如果不想会话超时,可以使用autossh:

autossh -M 0 -L 8080:localhost:8080 192.168.0.172

重要说明:您的开发机器(或开发服务器)需要通过 ssh 访问。对于 Linux,这可以通过安装 open-ssh 和 enabling/starting sshd 服务来完成。您可以在线查找此指南。