使用HTTPS 服务在浏览器端启用摄像头的方式解析

1.方式1

// vite.config.js
import { defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import basicSsl from '@vitejs/plugin-basic-ssl'
export default defineConfig({
plugins: [
vue(),
basicSsl({
name: 'test',
domains: ['192.168.15.166', 'localhost'], // 添加您的IP
certDir: './cert',
}),
],
server: {
host: '0.0.0.0',
port: 3000,
https: true,
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
},
},
},
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
minify: 'terser',
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: '[ext]/[name]-[hash].[ext]',
},
},
},
})

2.方式2

// vite.config.js
import { defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
],
server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'cert/key.pem')),
cert: fs.readFileSync(path.resolve(__dirname, 'cert/cert.pem'))
},
host: '0.0.0.0',
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true
},
},
},
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
minify: 'terser',
},
})

这两个 Vite 配置文件都实现了 HTTPS 服务，这是浏览器访问摄像头等敏感设备的必要条件。以下详细解释它们的原理和差异。

为什么需要 HTTPS

现代浏览器出于安全考虑，要求在以下情况下才能访问摄像头、麦克风等敏感设备：

• 使用 HTTPS 协议（安全连接）
• 或者是 localhost 域名（本地开发特例）

这是因为 getUserMedia() API 被归类为"强大功能"(Powerful Features)，需要安全上下文(Secure Context)。

方式一：使用 @vitejs/plugin-basic-ssl 插件

plugins: [
vue(),
basicSsl({
name: 'test',
domains: ['192.168.31.179', 'localhost'],
certDir: './cert',
}),
]

原理：

1. 自动生成证书：插件会自动为指定的域名生成自签名 SSL 证书
2. 证书存储：生成的证书存储在 ./cert 目录中
3. 多域名支持：可以为多个域名/IP 生成证书（如局域网 IP 和 localhost）
4. 自动配置：插件会自动将证书配置到 Vite 的 HTTPS 服务器

工作流程：

• 首次运行时，插件检查证书是否存在
• 如果不存在，使用内置的证书生成器创建自签名证书
• 将证书自动注入到 Vite 的 server 配置中
• 后续运行时复用已生成的证书

方式二：手动配置证书

server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, 'cert/key.pem')),
cert: fs.readFileSync(path.resolve(__dirname, 'cert/cert.pem'))
},
}

原理：

1. 手动管理证书：需要预先生成或获取 SSL 证书文件
2. 文件读取：使用 Node.js 的 fs 模块直接读取证书文件
3. 直接配置：将证书内容直接传递给 Vite 的 HTTPS 配置

证书生成方式（通常使用 OpenSSL）：

# 生成私钥
openssl genrsa -out key.pem 2048
# 生成证书
openssl req -new -x509 -key key.pem -out cert.pem -days 365

关键差异对比

特性	方式一（plugin-basic-ssl）	方式二（手动配置）
便利性	高 - 自动生成和管理	低 - 需要手动创建证书
灵活性	中等 - 插件预设配置	高 - 完全自定义
证书类型	自签名证书	可以使用任何证书（自签名或CA签发）
多域名支持	内置支持，配置简单	需要生成包含 SAN 的证书
首次设置	零配置，自动完成	需要手动生成证书
团队协作	每个开发者自动生成	需要共享证书文件
证书更新	删除旧证书即可重新生成	手动重新生成和替换
依赖性	需要安装额外插件	仅需 Node.js 内置模块

实际应用场景

方式一适合：

• 本地开发环境
• 快速原型开发
• 需要在局域网内多设备测试
• 团队成员各自开发，不共享证书

方式二适合：

• 需要使用特定证书（如公司内部 CA 签发）
• 生产环境的本地模拟
• 需要精确控制证书配置
• 已有证书管理流程的团队

浏览器访问摄像头的实现

无论使用哪种方式，配置 HTTPS 后都可以使用以下代码访问摄像头：

navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
.then(stream =>
{
// 获取到媒体流
videoElement.srcObject = stream;
})
.catch(err =>
{
console.error('无法访问摄像头:', err);
});

注意事项

1. 证书信任：两种方式生成的自签名证书都会导致浏览器警告，需要手动信任
2. 局域网访问：方式一通过配置 IP 地址，可以让局域网内其他设备通过 HTTPS 访问
3. 安全性：这些配置仅适用于开发环境，生产环境应使用正规 CA 签发的证书

总的来说，方式一更适合快速开发和原型验证，方式二则提供了更多的控制权和灵活性。选择哪种方式主要取决于项目需求和团队的技术偏好。

这是使用自签名证书进行本地开发时的常见问题。让我详细说明解决方案：

一、手机无法访问的问题排查

1. 确保网络连通性

// vite.config.js
server: {
host: '0.0.0.0', // 允许外部访问
port: 3000,
https: true,
}

检查步骤：

• 确保手机和电脑在同一局域网
• 电脑防火墙允许 3000 端口
• 使用电脑的局域网 IP（如 https://192.168.31.179:3000）

2. 防火墙设置

# Windows - 以管理员运行
netsh advfirewall firewall add rule name="Vite Dev Server" dir=in action=allow protocol=TCP localport=3000
# macOS
sudo pfctl -d # 临时关闭防火墙测试
# Linux
sudo ufw allow 3000/tcp

二、手机端安装证书的正确方法

iOS 设备

1. 生成包含正确信息的证书：

# 创建证书配置文件 cert.conf
cat > cert.conf <<
EOF
[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = CN
ST = State
L = City
O = Organization
CN = 192.168.31.179
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
IP.1 = 192.168.31.179
IP.2 = 127.0.0.1
EOF
# 生成证书
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout key.pem -out cert.pem -config cert.conf

2. 安装证书到 iOS：

• 将 cert.pem 文件通过邮件/AirDrop 发送到手机
• 点击证书文件，选择"安装"
• 设置 → 通用 → 关于本机 → 证书信任设置
• 开启对该证书的完全信任

Android 设备

1. Android 安装步骤：

• 将 cert.pem 重命名为 cert.crt
• 传输到手机
• 设置 → 安全 → 加密与凭据 → 安装证书 → CA 证书
• 选择证书文件安装

三、使用 mkcert 工具（推荐方案）

mkcert 可以创建本地受信任的证书，避免所有警告：

安装 mkcert

# Windows (使用 Chocolatey)
choco install mkcert
# macOS
brew install mkcert
# Linux
apt install libnss3-tools
wget -O mkcert https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-linux-amd64
chmod +x mkcert
sudo mv mkcert /usr/local/bin/

配置本地 CA 并生成证书

# 1. 安装本地 CA
mkcert -install
# 2. 生成证书（包含所有需要的域名和 IP）
mkcert -cert-file cert.pem -key-file key.pem localhost 127.0.0.1 192.168.31.179 ::1
# 3. 为手机生成 CA 证书
mkcert -CAROOT # 显示 CA 证书位置

更新 Vite 配置

// vite.config.js
import { defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'
import path from 'path'
export default defineConfig({
plugins: [vue()],
server: {
https: {
key: fs.readFileSync('./key.pem'),
cert: fs.readFileSync('./cert.pem')
},
host: '0.0.0.0',
port: 3000,
}
})

手机端信任 mkcert CA

1. 获取 CA 证书：

# 找到 CA 证书位置
mkcert -CAROOT
# 通常在: 
# Windows: %LOCALAPPDATA%\mkcert
# macOS: ~/Library/Application Support/mkcert
# Linux: ~/.local/share/mkcert

2. 将 rootCA.pem 发送到手机并安装

四、使用 ngrok（外网访问方案）

如果证书问题难以解决，可以使用 ngrok 提供的 HTTPS 隧道：

# 安装 ngrok
npm install -g ngrok
# 启动本地服务后，创建隧道
ngrok http 3000
# 会得到类似这样的地址：
# https://abc123.ngrok.io

优点：

• 自动 HTTPS，无需证书配置
• 可以外网访问
• 手机无需安装证书

五、开发环境最佳实践配置##

// vite.config.js - 完整的 HTTPS 配置方案
import { defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs'
import path from 'path'
import { execSync
} from 'child_process'
// 获取本机局域网 IP
function getLocalIP() {
const os = require('os')
const interfaces = os.networkInterfaces()
for (const name of Object.keys(interfaces)) {
for (const iface of interfaces[name]) {
if (iface.family === 'IPv4' &&
!iface.internal) {
return iface.address
}
}
}
return '127.0.0.1'
}
// 自动生成证书函数
function ensureCertificates() {
const certDir = path.resolve(__dirname, 'cert')
const keyPath = path.join(certDir, 'key.pem')
const certPath = path.join(certDir, 'cert.pem')
// 检查证书是否存在
if (fs.existsSync(keyPath) && fs.existsSync(certPath)) {
console.log('✅ 使用现有证书')
return { key: keyPath, cert: certPath
}
}
// 创建证书目录
if (!fs.existsSync(certDir)) {
fs.mkdirSync(certDir, { recursive: true
})
}
const localIP = getLocalIP()
console.log(` 局域网 IP: ${localIP
}`)
// 检查是否安装了 mkcert
try {
execSync('mkcert -version', { stdio: 'ignore'
})
console.log(' 使用 mkcert 生成受信任的证书...')
// 安装本地 CA（如果还没安装）
execSync('mkcert -install', { stdio: 'inherit'
})
// 生成证书
execSync(
`mkcert -cert-file ${certPath
} -key-file ${keyPath
} localhost 127.0.0.1 ${localIP
} ::1`,
{ stdio: 'inherit'
}
)
console.log('✅ mkcert 证书生成成功！')
console.log(' 手机端请安装 CA 证书:')
const caRoot = execSync('mkcert -CAROOT').toString().trim()
console.log(` ${path.join(caRoot, 'rootCA.pem')
}`)
} catch (e) {
console.log('⚠️ mkcert 未安装，使用 OpenSSL 生成自签名证书...')
// 创建 OpenSSL 配置
const configPath = path.join(certDir, 'openssl.cnf')
const opensslConfig = `
[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = CN
ST = State
L = City
O = Dev Organization
CN = ${localIP
}
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
DNS.2 = *.localhost
IP.1 = 127.0.0.1
IP.2 = ${localIP
}
IP.3 = ::1
`
fs.writeFileSync(configPath, opensslConfig)
// 生成证书
try {
execSync(
`openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ${keyPath
} -out ${certPath
} -config ${configPath
}`,
{ stdio: 'inherit'
}
)
console.log('✅ 自签名证书生成成功！')
console.log('⚠️ 浏览器会显示安全警告，需要手动信任证书')
} catch (error) {
console.error('❌ 证书生成失败:', error)
process.exit(1)
}
}
return { key: keyPath, cert: certPath
}
}
// 生成或获取证书
const certificates = ensureCertificates()
export default defineConfig({
plugins: [vue()],
server: {
https: {
key: fs.readFileSync(certificates.key),
cert: fs.readFileSync(certificates.cert)
},
host: '0.0.0.0', // 允许外部访问
port: 3000,
// 显示二维码方便手机扫描
open: false,
// 配置 CORS
cors: true,
// 代理配置
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
secure: false,
}
}
},
// 构建配置
build: {
outDir: 'dist',
assetsDir: 'assets',
sourcemap: false,
minify: 'terser',
rollupOptions: {
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: '[ext]/[name]-[hash].[ext]',
}
}
},
// 优化配置
optimizeDeps: {
exclude: ['vue']
}
})
// 启动后打印访问信息
process.nextTick(() =>
{
const localIP = getLocalIP()
console.log('\n 服务已启动:')
console.log(` 本地: https://localhost:3000`)
console.log(` 局域网: https://${localIP
}:3000`)
console.log('\n 手机访问提示:')
console.log(' 1. 确保手机与电脑在同一 WiFi')
console.log(' 2. 如有证书警告，点击"高级"→"继续访问"')
console.log(' 3. iOS 需在"设置"→"通用"→"关于本机"→"证书信任设置"中信任证书\n')
})

六、配套的 package.json 脚本

{
"scripts": {
"dev": "vite",
"dev:host": "vite --host",
"dev:network": "vite --host 0.0.0.0",
"dev:https": "node scripts/setup-https.js && vite",
"cert:install": "mkcert -install",
"cert:generate": "mkcert -cert-file cert/cert.pem -key-file cert/key.pem localhost 127.0.0.1 $(ipconfig getifaddr en0 || hostname -I | awk '{print $1}') ::1",
"cert:trust": "mkcert -install && npm run cert:generate",
"build": "vite build",
"preview": "vite preview",
"tunnel": "ngrok http 3000"
},
"devDependencies": {
"@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitejs/plugin-vue": "^4.2.3",
"vite": "^4.3.9",
"vue": "^3.3.4"
},
"dependencies": {
"qrcode": "^1.5.3"
}
}

七、快速解决方案总结

最简单的方案（推荐）

1. 安装 mkcert

# 一次性设置，永久解决证书问题
brew install mkcert # macOS
mkcert -install

2. 生成证书

mkcert -cert-file cert.pem -key-file key.pem localhost 192.168.xxx.xxx

3. 手机端信任

• 将 ~/.local/share/mkcert/rootCA.pem（或对应系统路径）发送到手机
• 安装为受信任的 CA 证书

故障排查清单

✅ 网络连接

• 手机和电脑同一 WiFi？
• 防火墙允许 3000 端口？
• 使用正确的 IP 地址？

✅ 证书配置

• 证书包含局域网 IP？
• 证书已安装到手机？
• iOS 已在"证书信任设置"中启用？

✅ Vite 配置

• host: '0.0.0.0' 已设置？
• https: true 或手动配置证书？
• 端口没有被占用？

终极备用方案

如果以上都不行，使用 localtunnel 或 ngrok：

npx localtunnel --port 3000 --subdomain myapp
# 或
ngrok http 3000

这样可以获得一个临时的公网 HTTPS 地址，无需任何证书配置，手机可以直接访问。

主要缺点是需要依赖外部服务，并且速度可能较慢。但对于紧急测试和演示，这是最快的解决方案。