JavaScript GetUserMedia 在没有 HTTPS 的情况下使用带有 localhost 的 Chrome

Posted 2023-02-25

【中文标题】JavaScript GetUserMedia 在没有 HTTPS 的情况下使用带有 localhost 的 Chrome

【英文标题】：JavaScript GetUserMedia using Chrome with localhost without HTTPS

【发布时间】：2017-03-01 20:09:51

【问题描述】：

我不知道如何在标题中表达，但我在使用 Chrome 时遇到了问题。

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

有什么方法可以在我的智能手机上测试我的项目而无需安装 SSL 证书？

【参考方案1】：

您可以通过将网络服务器隧道连接到手机的本地主机来完成此操作，而无需 SSL 证书。

我使用termux 来运行这个命令（在手机上）：

ssh -L 8080:localhost:8080 192.168.0.172

（让 ssh 会话保持打开状态）

然后在您的手机上转到http://localhost:8080/。

如果不希望会话超时，可以使用 autossh：

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

重要提示：您的开发机器（或开发服务器）需要可通过 ssh 访问。对于 Linux，这可以通过安装 open-ssh 并启用/启动 sshd 服务来完成。您可以在线查找相关指南。

【讨论】：

ssh: connect to host 192.168.... port 22: Connection refused 有什么问题吗？端口不正确。在我的情况下应该是4200

@gkucmierz 端口 22 是用于 ssh 的端口。您需要配置您的服务器，以便它接受 ssh 会话。这是有关如何为 ubuntu linuxize.com/post/how-to-enable-ssh-on-ubuntu-18-04

执行此操作的指南

【参考方案2】：

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

在 Chrome 中转到 chrome://flags/#unsafely-treat-insecure-origin-as-secure。

找到Insecure origins treated as secure setting。

启用它。

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

重新启动 Chrome。

瞧！

请参阅https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339 以获得良好的演练。

【讨论】：

标志在 Chrome 78 for ios 上不可用。好奇安卓。 （OP 提到了智能手机）。

@rnbrady 啊，好电话。我没有检查，也没有看到问题中提到的智能手机。太糟糕了，他们在移动设备上没有类似的东西。这为我们节省了使用本地/开发 SSL 证书的大量麻烦。

你这个美女竖起大拇指，

这个解决方案非常适合我的问题，我有一个 CRA 应用程序，需要通过与 localhost 的安全连接从手机打开摄像头。

【参考方案3】：

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

【参考方案4】：

我假设您正在尝试在计算机上托管 Web 服务并使用主机名 localhost 从智能手机访问它。

想到两个选项：

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

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

例如，在 ConnectBot for android 中，您可以

为在192.168.1.4 上运行 SSH 服务器的计算机创建配置文件 长按配置文件，然后从端口转发菜单中选择“编辑端口转发”，然后选择“添加端口转发” 将其配置为“本地”，然后选择一个可由手机上的非 root 用户声明的本地源端口（例如，8080），最后，使用localhost:80（或任何端口计算机正在运行该服务）以使 SSH 服务器在端口 80 上有直接到自身的转发隧道

这将导致您手机上指向localhost:8080 的所有流量转到您计算机上的192.168.1.4:80。浏览器不知道localhsot:8080 服务实际上只是一个到192.168.1.4:80 的SSH 隧道，所以它会像对待任何其他localhost 地址一样对待它。