为本地主机配置 HTTPS 以通过 USB 访问 phone 上的 microphone

Question

我正在使用 this 模板设置我的开发环境。我的目标是获得对 microphone 的访问权限，这样我就可以开始使用 Web Audio API 开发一个小项目。我运行 Windows 7 笔记本电脑上的服务器并在本地访问它工作正常 -> 我打开本地主机，调用 navigator.mediaDevices.getUserMedia 并获得对流的访问权限。但是，我想运行在我的 phone 上（诺基亚 6 和 Android 9）。但是要在那里访问 microphone，我的本地主机需要 HTTPS，我无法获得 Windows 7 信任我生成的证书。（或者至少 Chrome 是这么说的。也在 Opera 上测试过。）

我通过修改 webpack express 服务器的一些配置（希望是正确的方式）将我的服务器设置为使用 https 和生成的证书在 /build/dev-server.js 我有（除了模板中的所有其他逻辑）：

const app = express()
const options = {
  key: fs.readFileSync(path.join(__dirname, '../cert/server.key')),
  cert: fs.readFileSync(path.join(__dirname, '../cert/server.crt')),
  ca: fs.readFileSync(path.join(__dirname, '../cert/rootCA.pem'))
}
const server = https.createServer(options, app).listen(port)

我通过了 webpack 验证和服务器运行s 成功，但浏览器仍然显示 NET::ERR_CERT_AUTHORITY_INVALID，即使我提供了 SAN（至少我认为我这样做）我按照 this 文章使用 OpenSSL 生成证书。这里的区别是文章给出了一个IIS服务器证书配置的例子（通过mmc.exe）而我的应用程序只是一个webpack express服务器，运行本地。因此，我在同一个地方执行文章建议的两项操作 -> 在个人证书下，我添加了 rootCA.pem 和 server.pfx。在 Trusted Root Certification Authorities 下，我导入了 rootCA.pem 但没有收到文章所说的警告消息。

那没用。

我在使用其他工具生成证书时遇到问题。无法使用 makecert.exe 生成（没有更努力地尝试，因为它已被弃用）并且 New-SelfSignedCertificate cmdlet 在 Windows 7 Powershell 中不可用。

你能帮我找出我做错了什么吗？我是否正确配置了 webpack？如果是 - 信任我的自签名证书的正确方法是什么？

Answer 1

您可以在没有 HTTPS 的情况下对这些 API 使用 http://localhost。这样做是为了让您可以更轻松地开发应用程序。

我在不同的项目中使用了其中的几个 API。 USB和蓝牙我也用过。

现在从外部设备访问将需要真正的 HTTPS。

对我来说，通过部署到测试源来从设备进行测试更容易。如果有帮助，我会使用 S3 和 CloudFront。

Answer 2

如果有人偶然发现这个 post 并试图实现类似的东西 - 去检查 ngrok - 在 Linux 上，只需下载快照，运行你在特定端口上的本地主机服务器，然后在 ngrok 所在的终端中输入 './ngrok http {your localhost port}' 并且您启用了 https。它非常适合开发目的。编码愉快！ :)

为本地主机配置 HTTPS 以通过 USB 访问 phone 上的 microphone

Configure HTTPS for localhost to gain access to microphone on phone via USB

webpack

https

progressive-web-apps

microphone

self-signed-certificate