Vue 3 与 WebRTC 实时通信

1. 核心概念与概述

1.1 WebRTC 简介

WebRTC（Web Real-Time Communication）是一项开放标准，允许浏览器和移动应用在无需插件的情况下进行实时音视频通信和数据传输。它提供了一套API，使开发者能够构建点对点的实时通信应用。

1.2 WebRTC 主要特性

• 实时音视频通信：高质量的音视频流传输
• 数据通道：低延迟的点对点数据传输
• 浏览器原生支持：无需额外插件
• 安全加密：所有通信均经过加密
• 自适应质量：根据网络条件自动调整传输质量

1.3 Vue 3 与 WebRTC 集成优势

• 响应式数据：Vue 3的响应式系统可轻松管理WebRTC连接状态
• 组合式API：便于封装WebRTC逻辑为可复用的组合式函数
• 组件化设计：适合构建复杂的实时通信界面
• TypeScript支持：提供更好的类型安全性

2. 核心知识与实现

2.1 WebRTC 基础架构

WebRTC 由三个主要组件组成：

• getUserMedia：访问用户的摄像头和麦克风
• RTCPeerConnection：建立和管理点对点连接
• RTCDataChannel：实现点对点数据传输

2.2 Vue 3 项目中集成 WebRTC

2.2.1 项目初始化

npm create vite@latest webrtc-demo -- --template vue-ts
cd webrtc-demo
npm install

2.2.2 实现基本的视频通话组件

<template>
  <div class="webrtc-container">
    <div class="video-grid">
      <div class="video-wrapper">
        <h3>本地视频</h3>
        <video ref="localVideo" autoplay playsinline></video>
      </div>
      <div class="video-wrapper" v-if="remoteStream">
        <h3>远程视频</h3>
        <video ref="remoteVideo" autoplay playsinline></video>
      </div>
    </div>
    
    <div class="controls">
      <button @click="startCall" :disabled="isCalling">开始通话</button>
      <button @click="endCall" :disabled="!isCalling">结束通话</button>
      <button @click="toggleCamera" :disabled="!isCalling">
        {{ cameraEnabled ? '关闭摄像头' : '打开摄像头' }}
      </button>
      <button @click="toggleMicrophone" :disabled="!isCalling">
        {{ microphoneEnabled ? '关闭麦克风' : '打开麦克风' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const localVideo = ref<HTMLVideoElement | null>(null)
const remoteVideo = ref<HTMLVideoElement | null>(null)
const localStream = ref<MediaStream | null>(null)
const remoteStream = ref<MediaStream | null>(null)
const peerConnection = ref<RTCPeerConnection | null>(null)
const isCalling = ref(false)
const cameraEnabled = ref(true)
const microphoneEnabled = ref(true)

// WebRTC 配置
const iceServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' }
  ]
}

// 获取媒体流
const getMediaStream = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
    localStream.value = stream
    if (localVideo.value) {
      localVideo.value.srcObject = stream
    }
  } catch (error) {
    console.error('Error accessing media devices:', error)
  }
}

// 创建对等连接
const createPeerConnection = () => {
  peerConnection.value = new RTCPeerConnection(iceServers)
  
  // 添加本地流到连接
  if (localStream.value) {
    localStream.value.getTracks().forEach(track => {
      peerConnection.value?.addTrack(track, localStream.value!)
    })
  }
  
  // 处理远程流
  peerConnection.value.ontrack = (event) => {
    remoteStream.value = event.streams[0]
    if (remoteVideo.value) {
      remoteVideo.value.srcObject = remoteStream.value
    }
  }
  
  // 处理 ICE 候选
  peerConnection.value.onicecandidate = (event) => {
    if (event.candidate) {
      // 这里需要通过信令服务器发送候选给对方
      console.log('ICE Candidate:', event.candidate)
    }
  }
}

// 开始通话
const startCall = async () => {
  if (!localStream.value) {
    await getMediaStream()
  }
  createPeerConnection()
  isCalling.value = true
  
  // 创建 offer
  const offer = await peerConnection.value?.createOffer()
  await peerConnection.value?.setLocalDescription(offer)
  
  // 这里需要通过信令服务器发送 offer 给对方
  console.log('Offer:', offer)
}

// 结束通话
const endCall = () => {
  peerConnection.value?.close()
  peerConnection.value = null
  remoteStream.value = null
  isCalling.value = false
  
  // 停止本地流
  if (localStream.value) {
    localStream.value.getTracks().forEach(track => track.stop())
    localStream.value = null
  }
  
  if (localVideo.value) {
    localVideo.value.srcObject = null
  }
  if (remoteVideo.value) {
    remoteVideo.value.srcObject = null
  }
}

// 切换摄像头
const toggleCamera = () => {
  if (localStream.value) {
    const videoTracks = localStream.value.getVideoTracks()
    videoTracks.forEach(track => {
      track.enabled = !track.enabled
      cameraEnabled.value = track.enabled
    })
  }
}

// 切换麦克风
const toggleMicrophone = () => {
  if (localStream.value) {
    const audioTracks = localStream.value.getAudioTracks()
    audioTracks.forEach(track => {
      track.enabled = !track.enabled
      microphoneEnabled.value = track.enabled
    })
  }
}

onMounted(() => {
  // 组件挂载时初始化
})

onUnmounted(() => {
  // 组件卸载时清理资源
  endCall()
})
</script>

<style scoped>
.webrtc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.video-wrapper {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

video {
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #000;
}

.controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

button:hover:not(:disabled) {
  background: #35495e;
}

button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}
</style>

2.3 信令服务器实现

WebRTC 需要信令服务器来建立初始连接。我们可以使用 Node.js 和 WebSocket 实现简单的信令服务器：

// 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('Client connected');

  ws.on('message', (message) => {
    // 广播消息给所有客户端
    clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', () => {
    clients.delete(ws);
    console.log('Client disconnected');
  });
});

console.log('Signaling server running on ws://localhost:8080');

2.4 集成信令服务器到 Vue 应用

// composables/useSignaling.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useSignaling(url) {
  const ws = ref(null);
  const isConnected = ref(false);

  const connect = () => {
    ws.value = new WebSocket(url);

    ws.value.onopen = () => {
      console.log('Connected to signaling server');
      isConnected.value = true;
    };

    ws.value.onclose = () => {
      console.log('Disconnected from signaling server');
      isConnected.value = false;
    };

    ws.value.onerror = (error) => {
      console.error('Signaling server error:', error);
    };
  };

  const send = (message) => {
    if (ws.value && isConnected.value) {
      ws.value.send(JSON.stringify(message));
    }
  };

  const onMessage = (callback) => {
    if (ws.value) {
      ws.value.onmessage = (event) => {
        callback(JSON.parse(event.data));
      };
    }
  };

  const disconnect = () => {
    if (ws.value) {
      ws.value.close();
    }
  };

  onMounted(() => {
    connect();
  });

  onUnmounted(() => {
    disconnect();
  });

  return {
    isConnected,
    send,
    onMessage
  };
}

2.5 数据通道使用

WebRTC 还支持点对点数据通道，可用于传输文本、文件等数据：

// 创建数据通道
const dataChannel = peerConnection.value?.createDataChannel('chat');

// 监听数据通道事件
dataChannel.onopen = () => {
  console.log('Data channel opened');
};

dataChannel.onmessage = (event) => {
  console.log('Received message:', event.data);
};

dataChannel.onclose = () => {
  console.log('Data channel closed');
};

// 发送数据
dataChannel.send('Hello from WebRTC!');

3. 最佳实践

3.1 信令服务器设计

• 可靠的信令机制：确保信令消息的可靠传递
• 房间管理：支持多房间和多人通话
• 用户认证：添加身份验证机制
• 负载均衡：考虑分布式信令服务器架构

3.2 媒体流优化

• 分辨率自适应：根据设备性能和网络条件调整分辨率
• 带宽管理：使用 RTCPeerConnection.getStats() 监控带宽使用
• 噪声抑制：启用 WebRTC 内置的噪声抑制功能
• 回音消除：启用回音消除以提高通话质量

3.3 连接管理

• ICE 服务器配置：同时使用 STUN 和 TURN 服务器
• 连接状态监控：实时监控连接状态
• 自动重连机制：处理网络中断情况
• 资源清理：及时关闭不再使用的连接和流

3.4 安全考虑

• HTTPS 部署：WebRTC 在非 HTTPS 环境下受限
• 媒体流权限管理：合理请求和管理用户媒体权限
• 数据加密：虽然 WebRTC 自带加密，但仍需注意应用层安全
• 防止 DoS 攻击：实现速率限制和连接限制

4. 常见问题与解决方案

4.1 连接建立失败

问题：ICE 候选收集失败或连接无法建立
解决方案：

• 确保 STUN/TURN 服务器配置正确
• 检查网络防火墙设置
• 实现更健壮的信令机制
• 添加连接超时处理

4.2 音视频质量问题

问题：视频卡顿、音频延迟或质量差
解决方案：

• 优化媒体流配置（分辨率、帧率）
• 使用 TURN 服务器处理 NAT 穿透问题
• 实现带宽自适应机制
• 优化设备性能（关闭不必要的应用）

4.3 兼容性问题

问题：在某些浏览器或设备上无法正常工作
解决方案：

• 测试主流浏览器（Chrome、Firefox、Safari、Edge）
• 使用 polyfill 解决部分兼容性问题
• 提供降级方案
• 检查 WebRTC API 支持情况

4.4 资源泄漏

问题：长时间通话后内存占用过高
解决方案：

• 及时关闭不再使用的连接和流
• 定期清理 ICE 候选和会话描述
• 使用 WeakRef 管理资源引用
• 实现连接池管理

5. 进一步学习资源

5.1 官方文档

• WebRTC 官方网站
• MDN WebRTC 文档
• Vue 3 官方文档

5.2 学习教程

• WebRTC 教程
• Vue 3 + WebRTC 实战

5.3 开源项目

• SimpleWebRTC
• PeerJS
• Mediasoup

5.4 工具与服务

• Twilio Video
• Agora
• Daily.co

6. 代码优化与性能提升

6.1 使用 Web Workers 处理信令逻辑

将信令处理和 WebRTC 连接管理放在 Web Worker 中，避免阻塞主线程：

// webrtc-worker.js
self.onmessage = (event) => {
  const { type, data } = event.data;
  
  switch (type) {
    case 'INIT':
      // 初始化 WebRTC 连接
      break;
    case 'CREATE_OFFER':
      // 创建 offer
      break;
    // 其他事件处理
  }
};

6.2 实现媒体流复用

对于多人通话场景，复用媒体流以减少资源占用：

// 复用本地媒体流到多个连接
const addStreamToConnections = (stream, connections) => {
  connections.forEach(connection => {
    stream.getTracks().forEach(track => {
      connection.addTrack(track, stream);
    });
  });
};

6.3 使用 AdaptiveBitrate 调整质量

根据网络状况动态调整媒体流质量：

// 监控带宽并调整分辨率
const monitorBandwidth = async (peerConnection) => {
  const stats = await peerConnection.getStats();
  // 分析带宽使用情况
  // 调整视频编码器参数
};

7. 实践练习

7.1 基础练习：一对一视频通话

1. 创建一个 Vue 3 项目，集成 WebRTC
2. 实现基本的一对一视频通话功能
3. 添加摄像头和麦克风控制
4. 实现通话结束功能

7.2 进阶练习：多人视频会议

1. 扩展基础练习，支持多人通话
2. 实现房间管理功能
3. 添加屏幕共享功能
4. 实现聊天功能（使用数据通道）

7.3 高级练习：实时协作白板

1. 使用 WebRTC 数据通道实现实时协作白板
2. 支持绘制、擦除、文本输入等功能
3. 实现多人同步编辑
4. 添加历史记录和撤销功能

8. 总结

WebRTC 为实时通信提供了强大的能力，而 Vue 3 的响应式系统和组件化设计非常适合构建复杂的实时通信应用。通过合理的架构设计和最佳实践，可以创建出高质量、高性能的实时通信应用。

在实际项目中，需要根据具体需求选择合适的架构，考虑信令服务器的设计、媒体流的优化、连接管理等方面。同时，要注意处理各种边缘情况，如网络中断、设备兼容性等问题。

随着 WebRTC 技术的不断发展，它在实时教育、远程医疗、在线会议等领域的应用将越来越广泛，掌握 Vue 3 与 WebRTC 的集成将为开发者打开更多的可能性。