electron loadURL載入http協議(或內網)環境下使用navigator.mediaDevices.getUserMedia API.

星小梦發表於2024-07-14
HTTP協議內網devAPI

場景

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

相關文章