Ionic v1 WebRTC应用livereload模式下getUserMedia()不安全源错误

你碰到的这个问题完全是浏览器安全机制导致的——现代浏览器为了保护用户隐私，要求getUserMedia()这类访问摄像头/麦克风的API必须在安全上下文中运行，而安全上下文的要求包括：HTTPS协议、localhost、或者Android应用内置的file://协议。但livereload模式下，你的应用是通过HTTP连接到开发PC的本地服务，这就触发了浏览器的不安全源限制，所以才会报错。

下面给你几个可行的解决办法，按需选择：

1. 临时调试绕过（仅开发用） #

如果只是临时调试，不想折腾HTTPS，可以给Chrome/Android WebView添加特殊参数，强制把你的HTTP livereload源标记为安全：

• 如果你用Chrome浏览器远程调试Android应用，启动Chrome时加上命令行参数：

  chrome --unsafely-treat-insecure-origin-as-secure="http://你的PCIP:8100"
  

  这里把http://你的PCIP:8100替换成你实际的livereload地址，这样浏览器就会把这个HTTP源当作安全源处理，getUserMedia()就能正常工作了。不过注意这只是临时方案，绝对不能用于生产环境。

2. 配置Ionic livereload使用HTTPS #

这是更规范的解决方案，让livereload服务跑在HTTPS下，满足安全上下文要求：

• 首先用OpenSSL生成自签名SSL证书（如果没有OpenSSL，需要先安装）：

  openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
  

  执行时按提示填写信息即可，不用太严格。
• 修改项目根目录的ionic.config.json，添加SSL和livereload的配置：

  {
    "name": "你的应用名称",
    "integrations": {
      "cordova": {}
    },
    "type": "ionic1",
    "livereloadUrl": "https://你的PCIP:8100",
    "ssl": {
      "key": "./key.pem",
      "cert": "./cert.pem"
    }
  }
  

• 最后启动livereload时加上--ssl参数：

  ionic cordova run -c -l --ssl
  

  第一次连接时，Android设备会提示证书不可信，你需要手动在系统设置里信任这个自签名证书，之后就能正常使用livereload且getUserMedia()不会报错了。

3. 放弃livereload，用远程调试工具 #

如果觉得配置HTTPS麻烦，也可以直接用ionic cordova run把应用部署到设备上，然后通过Chrome的远程调试工具（在Chrome地址栏输入chrome://inspect）来调试应用。这种情况下，应用是运行在Android的file://协议下，属于安全上下文，getUserMedia()能正常工作，同时你也能查看控制台日志、断点调试代码，完全能满足开发需求。

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