1. 项目背景与核心价值
最近在折腾安卓平台的实时音视频通信方案，发现WebRTC这个开源项目确实是个宝藏。作为一个从业多年的全栈开发者，我习惯性地想先跑通官方Demo看看效果，结果发现网上大多数教程都是零散的片段。于是决定把整个搭建过程完整记录下来，从Node服务端到Vue前端再到安卓客户端的完整链路，给同样想入门WebRTC的朋友们铺个路。
这个Demo的核心价值在于：
- 验证WebRTC在移动端的兼容性表现
- 搭建完整的信令服务器与前端交互流程
- 测试不同网络环境下的音视频传输质量
- 为后续安卓原生开发积累基础参数
2. 环境准备与工具选型
2.1 基础环境配置
先来看我的开发环境清单：
- 操作系统：macOS Monterey 12.6 (Intel芯片)
- Node版本：v16.14.2（建议用LTS版本）
- npm版本：8.5.0
- Android Studio：2021.2.1 Patch 2
- 测试设备：Pixel 4a (Android 12)
注意：WebRTC对Node版本较敏感，建议使用14.x或16.x版本，避免使用最新的18.x可能出现的兼容性问题
2.2 关键依赖库选择
服务端核心依赖：
bash复制npm install express@4.17.3 ws@8.8.1 uuid@8.3.2
前端Vue项目关键依赖：
bash复制npm install vue@3.2.37 vue-webrtc@3.7.0 socket.io-client@4.5.1
安卓端需要特别注意：
gradle复制implementation 'org.webrtc:google-webrtc:1.0.32006'
3. 信令服务器搭建详解
3.1 Node服务端核心代码
信令服务器主要处理三种类型的消息：
- 加入房间（join）
- 离开房间（leave）
- 信令交换（offer/answer/candidate）
核心逻辑实现：
javascript复制// server.js
const express = require('express');
const WebSocket = require('ws');
const { v4: uuidv4 } = require('uuid');
const app = express();
const port = 3000;
const wss = new WebSocket.Server({ port: 8080 });
const rooms = new Map();
wss.on('connection', (ws) => {
ws.on('message', (message) => {
const data = JSON.parse(message);
switch (data.type) {
case 'join':
handleJoin(ws, data.roomId);
break;
case 'offer':
case 'answer':
case 'candidate':
forwardMessage(data);
break;
}
});
});
function handleJoin(ws, roomId) {
if (!rooms.has(roomId)) {
rooms.set(roomId, new Set());
}
rooms.get(roomId).add(ws);
ws.roomId = roomId;
}
3.2 信令交换流程优化
实际测试中发现移动端网络不稳定时容易丢信令，我做了两点改进：
- 增加消息重传机制（最多3次）
- 添加时间戳校验，避免旧消息干扰
优化后的消息处理：
javascript复制function forwardMessage(data) {
const room = rooms.get(data.roomId);
if (!room) return;
const now = Date.now();
if (data.timestamp && now - data.timestamp > 5000) {
console.log('Discard outdated message');
return;
}
room.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(data));
}
});
}
4. Vue前端实现关键点
4.1 视频组件封装
基于vue-webrtc的二次封装组件：
vue复制<template>
<div class="video-container">
<video ref="localVideo" autoplay muted playsinline></video>
<video ref="remoteVideo" autoplay playsinline></video>
<button @click="startCall">开始通话</button>
</div>
</template>
<script>
export default {
methods: {
async startCall() {
this.localStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
});
this.$refs.localVideo.srcObject = this.localStream;
this.peerConnection = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
this.localStream.getTracks().forEach(track => {
this.peerConnection.addTrack(track, this.localStream);
});
}
}
}
</script>
4.2 移动端适配技巧
在安卓设备上测试时发现的几个关键点：
- 必须添加
playsinline属性才能内联播放 - 需要动态调整视频分辨率适配移动设备
- 横竖屏切换时需要重新协商媒体流
优化后的媒体约束：
javascript复制const constraints = {
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: { ideal: 24, max: 30 },
facingMode: 'user'
},
audio: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true
}
};
5. 安卓端集成实战
5.1 WebRTC库引入问题
最初直接使用官方Maven库遇到问题：
gradle复制// 错误示范：会下载不全
implementation 'org.webrtc:google-webrtc:1.0.+'
解决方案是使用固定版本号+强制下载：
gradle复制implementation('org.webrtc:google-webrtc:1.0.32006') {
force = true
}
5.2 关键Java代码实现
建立PeerConnection的核心流程：
java复制// 初始化PeerConnectionFactory
PeerConnectionFactory.initialize(PeerConnectionFactory.InitializationOptions
.builder(context)
.setEnableInternalTracer(true)
.createInitializationOptions());
// 创建本地视频轨道
VideoSource videoSource = peerConnectionFactory.createVideoSource(false);
SurfaceTextureHelper helper = SurfaceTextureHelper.create("CaptureThread", rootEglBase.getEglBaseContext());
Camera2Capturer capturer = new Camera2Capturer(context, cameraId, new CameraEventsHandler());
videoCapturer = new VideoCapturer(capturer);
videoCapturer.initialize(helper, context, videoSource.getCapturerObserver());
// 添加到PeerConnection
VideoTrack localVideoTrack = peerConnectionFactory.createVideoTrack("local_video", videoSource);
localVideoTrack.addSink(localRender);
peerConnection.addTrack(localVideoTrack);
6. 联调与问题排查
6.1 常见连接问题速查表
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 无法获取本地流 | 权限未授权 | 检查AndroidManifest.xml权限配置 |
| 信令服务器连不上 | 跨域问题 | 添加CORS头Access-Control-Allow-Origin |
| ICE失败 | STUN/TURN配置错误 | 测试备用STUN服务器stun:stun1.l.google.com:19302 |
| 视频卡顿 | 带宽不足 | 调整视频参数setVideoEncoderConfig |
6.2 移动端特有问题处理
-
后台状态恢复问题：
安卓应用进入后台后WebRTC连接会被系统限制，需要：java复制// 在Activity中 @Override protected void onPause() { super.onPause(); if (isFinishing()) { peerConnection.close(); } } -
热插拔耳机问题：
需要监听音频路由变化：java复制audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION); audioManager.setSpeakerphoneOn(false);
7. 性能优化实践
7.1 带宽自适应策略
根据网络状况动态调整视频参数：
java复制// 创建编码参数
RtpParameters parameters = sender.getParameters();
parameters.degradationPreference = RtpParameters.DegradationPreference.MAINTAIN_FRAMERATE;
// 网络变化回调
peerConnection.setBitrateObserver(new BitrateObserver() {
@Override
public void onBitrateChanged(int bitrate) {
if (bitrate < 300000) { // 300kbps
adjustVideoConfig(640, 480, 15);
}
}
});
7.2 移动端功耗优化
实测发现的问题及解决方案：
-
CPU占用过高：
- 使用硬件编码器
MediaCodecVideoEncoder - 限制视频分辨率不超过720p
- 使用硬件编码器
-
发热严重：
java复制// 在PeerConnectionFactory创建时配置 PeerConnectionFactory.Options options = new PeerConnectionFactory.Options(); options.disableEncryption = false; options.disableNetworkMonitor = false; options.enableVideoHwAcceleration = true;
8. 完整Demo运行流程
8.1 启动顺序指南
-
启动Node信令服务器：
bash复制
node server.js -
运行Vue前端：
bash复制
npm run serve -
安卓端连接步骤：
- 安装APK后输入房间号
- 授予相机和麦克风权限
- 点击"开始通话"按钮
8.2 效果验证要点
测试时需要检查的关键指标：
- 端到端延迟（控制在<500ms）
- 视频分辨率自适应是否生效
- 弱网下的音频连续性
- 设备旋转时的画面适配
我在小米和Pixel设备上实测的延迟数据：
| 网络环境 | 平均延迟 | 备注 |
|---|---|---|
| WiFi 5G | 280ms | 效果最佳 |
| 4G网络 | 420ms | 偶发卡顿 |
| 3G网络 | 650ms | 自动降级到音频优先 |