场景
我使用的electron 27版本。
众所周知,navigator.mediaDevices.getUserMedia
API只能在https环境下使用,在非https环境下使用时navigator.mediaDevices
会返回undefined。除了例外的这几种情况。
例外的几种情况在MDN 安全上下文文章中进行了说明说明了。
大致意思是在https,file,localhost这几种协议下会认为是安全的上下文。
第一种方式:使用chromium的命令行开关来控制(亲测没问题)。
在app.whenReady
前加载前加载以下Chromium命令行开关来控制那些是安全上下文(可以逗号分隔的列表形式提供多个来源)。
const { app, ... } = require("electron");
...
app.commandLine.appendSwitch('unsafely-treat-insecure-origin-as-secure', 'http://www.demo.com,http://domain2.com,http://domain3.com');
第二种方式:就是使用签名证书来进行签名地址(这里使用自签名证书的方式)。
-- 创建本地私有密钥
openssl genrsa -out ssl.key 2048
-- 按提示输入即可
openssl req -new -key ssl.key -out ssl.csr
-- 创建证书crt
openssl x509 -req -days 1460 -in ssl.csr -signkey ssl.key -out ssl.crt
-- 创建证书pem
openssl dhparam -out ssl.pem 2048
Nginx关于ssl的配置
server {
listen 443 ssl;
ssl_certificate /etc/nginx/ssl/ssl.crt;
ssl_certificate_key /etc/nginx/ssl/ssl.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1.2;
ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!KRB5:!aECDH:!EDH+3DES;
}
see
- https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
- https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
- 使用命令行开关运行 Chromium
- Chromium支持的命令行全部开关
- Chromium官方