环境准备：浏览器兼容性检查、本地Web服务器搭建、获取第一个摄像头画面
好，咱们正式开始动手了。这一章的目标很明确——把开发环境搭好，然后亲眼看到摄像头画面出现在浏览器里。我见过太多初学者卡在环境配置上，其实说白了就三步：检查浏览器、搭个本地服务器、写几行代码调摄像头。咱们一步步来。
浏览器兼容性检查
WebRTC 这东西，不是所有浏览器都一视同仁的。我个人习惯先打开 caniuse.com 查一下，但更直接的办法是写个简单页面测一测。
打开 Chrome，按 F12 进控制台，输入下面这行代码：
navigator.mediaDevices.getUserMedia === undefined ?
console.log('❌ 不支持') : console.log('✅ 支持')如果看到 ✅，恭喜你，环境没问题。如果看到 ❌，别慌——大概率是 HTTPS 的问题。WebRTC 要求安全上下文，说白了就是 localhost 或者 HTTPS 才能用。
file:// 打开 HTML 文件，getUserMedia 会直接报错。必须通过 Web 服务器访问。
本地 Web 服务器搭建
嗯，这里我推荐两种方式，你选一个顺手的就行。
方式一：Node.js（我推荐）
如果你还没装 Node.js，去 nodejs.org 下载 LTS 版本。装完之后，打开终端：
# 安装一个轻量级服务器
npm install -g live-server
# 在项目目录里启动
cd your-project-folder
live-server --port=8080浏览器会自动打开 http://localhost:8080。搞定。
方式二：Python（更轻量）
如果你电脑上有 Python，一行命令就够了：
# Python 3
python -m http.server 8080然后手动打开浏览器，输入 http://localhost:8080。
| 方式 | 安装步骤 | 启动命令 | 适合场景 |
|---|---|---|---|
| Node.js + live-server | 装 Node.js → npm install -g live-server | live-server --port=8080 | 前端开发，自动刷新 |
| Python http.server | 装 Python（通常自带） | python -m http.server 8080 | 快速测试，无需额外安装 |
获取第一个摄像头画面
好，重头戏来了。咱们写一个完整的 HTML 页面，把摄像头画面显示出来。
新建一个 index.html，把下面代码贴进去：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个摄像头画面</title>
</head>
<body>
<h1>📷 摄像头画面</h1>
<video id="localVideo" autoplay playsinline></video>
<button id="startBtn">开启摄像头</button>
<script>
const video = document.getElementById('localVideo');
const startBtn = document.getElementById('startBtn');
startBtn.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false
});
video.srcObject = stream;
console.log('✅ 摄像头已开启');
} catch (err) {
console.error('❌ 摄像头开启失败:', err);
}
});
</script>
</body>
</html>用 live-server 或 Python 服务器打开这个页面。点击「开启摄像头」按钮，浏览器会弹出权限请求——点允许。然后你就能看到自己了。
核心流程可视化
下面这张图帮你理清整个流程：
常见问题与排查
第一次跑通摄像头，我遇到过不少坑。列几个最常见的：
- 权限被拒绝：检查浏览器地址栏左侧的锁图标，确认摄像头权限是「允许」。
- NotAllowedError：用户点了「阻止」。刷新页面重新请求。
- NotReadableError：摄像头被其他应用占用了（比如 Zoom、）。关掉再试。
- OverconstrainedError：你指定的分辨率摄像头不支持。先不加约束试试。
本章小结
到这一步，你已经完成了三件事：确认浏览器支持 WebRTC、搭建了本地开发服务器、成功获取了摄像头画面。别小看这几步——这是所有 WebRTC 应用的起点。后面所有的音视频通信，都建立在 getUserMedia 返回的这个 MediaStream 之上。