【宝塔】局域网IP申请SSL证书，解决浏览器本地环境可以访问摄像头，发布环境不能访问摄像头的问题

前言

在本地开发环境 127.0.0.1 或 localhost 中，通过 HTTP/IP 协议访问摄像头等设备时，浏览器可以正常请求到摄像头以及拿到画面。

然而，当项目迁移到发布环境后，使用 HTTP/IP 协议访问摄像头：提示开启摄像头失败：Cannot read properties of undefined (reading 'getUserMedia')。

然后果断看了一下官网关于 navigator.mediaDevices 的描述，然后发现需要用到 HTTPS。

因此这篇文章主要是介绍 Windows 如何申请SSL证书为局域网IP，然后在宝塔上面进行配置。

安装和配置 OpenSSL

安装 OpenSSL：
- 从 https://slproweb.com/products/Win32OpenSSL.html 下载并安装，或使用 Chocolatey：choco install openssl。
配置系统环境

申请证书

在 PowerShell 或 CMD 中：

shell 复制代码

mkdir C:\certs
cd C:\certs

openssl req -x509 -nodes -days 1825 -newkey rsa:2048 ^
  -keyout topmes-lan.key ^
  -out topmes-lan.crt ^
  -subj "/CN=10.0.222.110" ^
  -addext "subjectAltName=IP:10.0.222.110,DNS:localhost"

10.0.222.110 可以替换成你需要申请 SLL 证书的 IP。申请成功以后如下图：

生成证书文件
- topmes-lan.crt、topmes-lan.key 可用于 Nginx。
- 若用 IIS，可把 .crt 导入「受信任的根证书颁发机构」；IIS 绑定一般用 .pfx，可用下面命令从 crt+key 生成 pfx：
  shell 复制代码
```
openssl pkcs12 -export -out topmes-lan.pfx -inkey topmes-lan.key -in topmes-lan.crt
# 按提示设置 pfx 密码，IIS 导入时需填写
```

宝塔配置证书

在宝塔里已有用 局域网 IP 或域名创建的网站，且根目录已指向前端 dist（或你的静态目录）。

若没有：网站 → 添加站点 → 域名填 10.0.222.110（或你的 IP），根目录选好，先确保 HTTP 能访问。

部署 SSL（其他证书）

打开宝塔 → 网站 → 点击你的站点名（或设置）。
左侧选择 SSL。
在证书类型中选择 当前证书 （有的版本叫 自定义证书 、PEM 格式 、其他证书 或 自有证书，依宝塔版本而定）。
填写两栏：
- 私钥(KEY) ：用记事本打开 C:\certs\topmes-lan.key，全文复制 （含 -----BEGIN PRIVATE KEY----- 和 -----END PRIVATE KEY-----）粘贴到进去。
- 证书(PEM 格式) ：用记事本打开 C:\certs\topmes-lan.crt，全文复制 （含 -----BEGIN CERTIFICATE----- 和 -----END CERTIFICATE-----）粘贴进去。
点保存或部署。保存后，宝塔会自动为该站点添加 443 监听并写好 Nginx/Apache 的 SSL 配置。

强制 HTTPS（可选）

在 SSL 页面勾选 强制 HTTPS ，使 http://192.168.1.100 自动跳转到 https://192.168.1.100。

放行 443 端口

宝塔安全 / 防火墙 中添加入站规则：TCP 443 放行。
若宝塔已自动放行 443，可跳过；否则 Windows 防火墙也需放行 443：
- 管理员 PowerShell：New-NetFirewallRule -DisplayName "HTTPS-443" -Direction Inbound -Protocol TCP -LocalPort 443 -Action Allow

修改配置文件

需要将端口监听到 HTTPS，在端口号傍边加上 ssl 标记即可。