React Speech Recognition在IPv4环境下失效，麦克风授权异常求助

核心原因 #

浏览器安全策略限制：非localhost的HTTP环境下，浏览器默认会限制麦克风、摄像头等媒体设备的权限，只有HTTPS环境或被标记为安全的HTTP源才能正常调用媒体设备。

具体解决方法 #

方法1：用HTTPS启动开发服务器 #

如果是Create React App搭建的项目，启动时添加HTTPS环境变量：

• Windows系统：

  set HTTPS=true&&npm start
  

• Mac/Linux系统：

  HTTPS=true npm start
  

启动后访问https://192.XXX.X.X:3000/wall，浏览器提示证书不安全时选择「继续访问」，即可正常获取麦克风权限。

方法2：给浏览器添加本地IP的安全例外 #

Chrome浏览器

1. 在地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure
2. 启用「将不安全的源视为安全的」选项
3. 在输入框填入你的应用地址 http://192.XXX.X.X:3000
4. 点击「重启」按钮生效

Firefox浏览器

1. 在地址栏输入 about:config，确认风险提示
2. 搜索 media.devices.insecure.enabled，将其值改为 true
3. 搜索 media.webrtc.insecure.enabled，将其值改为 true
4. 重启浏览器后测试

方法3：重置浏览器权限设置 #

1. 点击地址栏旁的被阻止麦克风图标
2. 在权限面板中将麦克风权限从「阻止」改为「允许」
3. 刷新页面后重新点击「Start」按钮测试

内容的提问来源于stack exchange，提问作者Mujin