electron loadURL加载http协议(或内网)环境下使用navigator.mediaDevices.getUserMedia API.

场景

我使用的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

1. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
2. https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
3. 使用命令行开关运行 Chromium
4. Chromium支持的命令行全部开关
5. Chromium官方
6. open ssl官方文档