第2章搭建开发环境

课程目录第2章搭建开发环境

2、搭建开发环境：浏览器环境准备、Node.js环境搭建、信令服务器基础、本地测试环境配置

说实话，做WebRTC开发最怕什么？不是协议复杂，不是坑多，而是环境没搭好就开始写代码，结果跑不起来，debug半天发现是浏览器版本不对。我早期就吃过这个亏，所以今天咱们一步到位，把环境整利索。

本章核心目标：让你能在本地跑通一个最简单的WebRTC demo，看到摄像头画面在浏览器里亮起来。

2.1 浏览器环境准备

WebRTC是浏览器原生的能力，不需要装任何插件。但不同浏览器对WebRTC的支持程度不一样。我个人习惯用Chrome做主力开发，因为它开发者工具最全，尤其是chrome://webrtc-internals这个页面，简直是调试神器。

浏览器兼容性一览：

浏览器	WebRTC支持情况	推荐用途
Chrome 70+	完整支持	主力开发
Firefox 60+	完整支持	兼容性测试
Safari 12.1+	基本支持	iOS/Mac测试
Edge 80+	完整支持（Chromium内核）	备用测试

小技巧：打开Chrome，地址栏输入 chrome://webrtc-internals，就能看到所有WebRTC连接的实时日志、ICE候选、SDP信息。我在排查连接失败问题时，90%的线索都从这里找到的。

另外，记得开启摄像头和麦克风权限。本地开发时，Chrome默认会拦截 getUserMedia 请求。你需要在地址栏左侧的锁图标里，把「摄像头」和「麦克风」权限设为「允许」。嗯，这一步很多人会忘。

2.2 Node.js环境搭建

信令服务器需要跑在Node.js上。为什么选Node？因为WebRTC的信令逻辑本质上是消息转发，Node的异步I/O和事件驱动模型特别适合干这个活。说白了，就是轻量、高效、好写。

安装步骤：

去 nodejs.org 下载LTS版本（我建议用16.x或18.x，稳定）
安装完成后，打开终端验证：

node -v
# 输出示例：v18.16.0

npm -v
# 输出示例：9.5.1

如果你用的是Mac，我推荐用 nvm 管理Node版本。为什么？因为不同项目可能依赖不同版本的Node，nvm可以随时切换。我曾经在一个老项目上卡了半天，最后发现是Node版本太高，某些API已经废弃了。

# 安装nvm（Mac/Linux）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# 安装并使用Node 18
nvm install 18
nvm use 18

注意：Windows用户建议直接用官方安装包，nvm在Windows上体验一般。如果你非要用，可以试试nvm-windows，但记得以管理员身份运行终端。

2.3 信令服务器基础

信令服务器是WebRTC的「红娘」——它不负责传输音视频数据，只负责帮两个浏览器「牵线搭桥」。说白了，就是交换SDP和ICE候选信息。

我们先用Node.js搭一个最简单的信令服务器，基于WebSocket。为什么用WebSocket？因为信令需要双向实时通信，HTTP轮询太慢了，你想想看，两个浏览器交换SDP时，每一轮都要等几百毫秒，体验能好吗？

项目初始化：

mkdir webrtc-signaling-server
cd webrtc-signaling-server
npm init -y
npm install ws

信令服务器核心代码（server.js）：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

// 存储所有连接的客户端
const clients = new Set();

wss.on('connection', (ws) => {
  clients.add(ws);
  console.log('新客户端连接，当前在线：', clients.size);

  // 收到消息后广播给其他客户端
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    console.log('收到消息类型：', data.type);

    // 转发给其他所有客户端
    clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(data));
      }
    });
  });

  ws.on('close', () => {
    clients.delete(ws);
    console.log('客户端断开，当前在线：', clients.size);
  });
});

console.log('信令服务器已启动，端口：8080');

这段代码的逻辑很简单：每个客户端连接上来，我们把它存起来。当收到消息时，转发给其他所有人。这就是最基础的「广播式」信令。实际项目中你会需要更精细的「房间」管理，但咱们先跑通再说。

启动服务器：

node server.js

看到「信令服务器已启动，端口：8080」就说明成功了。别关这个终端，后面测试要用。

2.4 本地测试环境配置

环境搭好了，怎么验证？我习惯写一个最简单的HTML页面，调用 getUserMedia 看看摄像头能不能亮起来。这是WebRTC的「Hello World」。

创建测试页面（index.html）：

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 环境测试</title>
</head>
<body>
  <h2>摄像头测试</h2>
  <video id="localVideo" autoplay playsinline></video>
  <button id="startBtn">开启摄像头</button>

  <script>
    const video = document.getElementById('localVideo');
    const startBtn = document.getElementById('startBtn');

    startBtn.onclick = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        });
        video.srcObject = stream;
        console.log('摄像头已开启，轨道数量：', stream.getTracks().length);
      } catch (err) {
        console.error('获取媒体设备失败：', err);
        alert('请检查摄像头权限：' + err.message);
      }
    };
  </script>
</body>
</html>

注意，这个页面不能直接用 file:// 协议打开，因为 getUserMedia 在安全上下文（HTTPS或localhost）下才能工作。我建议用 http-server 来托管：

# 全局安装http-server
npm install -g http-server

# 在index.html所在目录启动
http-server -p 3000

然后浏览器访问 http://localhost:3000，点击按钮，如果看到摄像头画面，恭喜你，环境搭好了！

常见坑：如果你用的是Chrome，第一次访问时浏览器会弹出权限请求，一定要点「允许」。如果不小心点了「阻止」，去地址栏左侧的锁图标里改回来。我曾经在给学员演示时，因为权限被阻止，摄像头死活不亮，场面一度很尴尬。

2.5 本章知识体系总览

下面这张图把本章的核心逻辑串起来了。你从左边开始，一步步走到右边，就是完整的开发环境链路。

这张图从左到右展示了完整的链路。你想想看，如果浏览器没配好，摄像头不亮；如果Node没装好，信令服务器跑不起来；如果信令服务器没启动，两个浏览器没法交换信息。每一步都是下一环的基础。

总结一下：环境搭建其实就三件事——浏览器能开摄像头、Node能跑服务、信令能转发消息。这三件事都验证通过，你就可以放心进入下一阶段的开发了。我在带团队时，每次新项目启动，都会让成员先跑通这个链路，再开始写业务代码。磨刀不误砍柴工嘛。

📚 课程目录

2、搭建开发环境：浏览器环境准备、Node.js环境搭建、信令服务器基础、本地测试环境配置

2.1 浏览器环境准备

2.2 Node.js环境搭建

2.3 信令服务器基础

2.4 本地测试环境配置

2.5 本章知识体系总览