Electron+WebRTC实现跨平台通信：从技术原理到实战应用

2026-04-14 08:30:45作者：幸俭卉

在远程协作日益普及的今天，开发者面临着如何构建跨平台视频会议应用的挑战。Electron作为强大的跨平台桌面应用框架，与WebRTC（网页实时通信技术）的结合，为解决这一问题提供了理想方案。本文将深入探讨Electron+WebRTC技术原理，解决跨平台通信中的核心挑战，提供实用解决方案，并通过实战案例展示如何构建稳定高效的视频会议应用，最后展望该技术领域的未来趋势。

技术原理：Electron与WebRTC如何实现跨平台通信

WebRTC（Web Real-Time Communication）是一项实时通信技术，允许网页浏览器之间进行音频、视频和数据的实时传输，无需安装额外插件。Electron则通过将Chromium和Node.js整合到一个运行时环境中，使开发者能够使用Web技术构建跨平台桌面应用。

当这两项技术结合时，Electron提供了桌面级的系统访问能力，而WebRTC提供了实时音视频通信能力。Electron的desktopCapturer模块允许应用访问屏幕和窗口内容，这是实现屏幕共享的关键；而WebRTC则负责在不同设备之间建立点对点连接，传输音视频流。

核心工作流程

媒体捕获：通过Electron的desktopCapturer捕获屏幕或窗口内容，通过WebRTC的getUserMedia获取摄像头和麦克风输入
信号传递：通过信令服务器交换连接信息（SDP提议/应答和ICE候选者）
点对点连接：使用WebRTC的RTCPeerConnection建立直接连接
媒体流传输：通过建立的连接传输音视频数据
连接维护：监控网络状况并动态调整传输参数

避坑指南

错误：未正确配置Electron的安全策略导致媒体访问失败 解决方案：确保在BrowserWindow配置中正确设置contextIsolation和preload脚本
错误：忽视ICE服务器配置导致NAT穿透失败 解决方案：始终配置STUN/TURN服务器，推荐使用公共STUN服务器如stun:stun.l.google.com:19302
错误：在主进程中直接处理媒体流导致性能问题 解决方案：媒体处理逻辑应放在渲染进程，主进程仅负责系统资源访问

核心挑战：如何解决跨平台视频会议开发中的关键问题

开发跨平台视频会议应用面临着诸多挑战，从系统权限管理到网络条件适应，每一个环节都可能成为应用稳定性和用户体验的瓶颈。

如何解决跨平台权限管理问题

不同操作系统对屏幕捕获和媒体访问有着不同的权限要求，这是开发跨平台应用时首先要解决的问题。macOS需要明确的屏幕录制权限，Windows有自己的权限模型，而Linux则因桌面环境不同而有所差异。

核心代码解析：跨平台权限检查实现

// permission-manager.js
const { systemPreferences, dialog } = require('electron');

class PermissionManager {
  static async checkAndRequestPermissions() {
    // 检查并请求摄像头/麦克风权限
    const cameraPermission = await this._checkMediaPermission('camera');
    const micPermission = await this._checkMediaPermission('microphone');
    
    // 检查并请求屏幕捕获权限
    const screenPermission = await this._checkScreenPermission();
    
    return { cameraPermission, micPermission, screenPermission };
  }
  
  static async _checkMediaPermission(mediaType) {
    if (process.platform === 'darwin') {
      const status = systemPreferences.getMediaAccessStatus(mediaType);
      if (status !== 'granted') {
        return await systemPreferences.askForMediaAccess(mediaType);
      }
      return true;
    }
    // Windows和Linux的权限处理逻辑
    return true;
  }
  
  static async _checkScreenPermission() {
    if (process.platform === 'darwin') {
      const status = systemPreferences.getMediaAccessStatus('screen');
      if (status !== 'granted') {
        dialog.showMessageBox({
          type: 'info',
          message: '需要屏幕录制权限',
          detail: '请在系统偏好设置 > 安全性与隐私 > 屏幕录制中启用本应用',
          buttons: ['确定']
        });
        return false;
      }
      return true;
    } else if (process.platform === 'win32') {
      // Windows不需要显式权限请求，但可以检查是否有其他应用正在使用屏幕捕获
      return true;
    }
    // Linux处理逻辑
    return true;
  }
}

避坑指南

错误：假设所有平台权限模型相同 解决方案：为每个平台实现特定的权限检查和请求逻辑
错误：未处理用户拒绝权限的情况 解决方案：提供清晰的指引，告诉用户如何手动授予所需权限
错误：在应用启动时一次性请求所有权限 解决方案：采用"按需请求"策略，仅在用户需要特定功能时请求相应权限

如何解决网络波动下的音视频质量问题

网络条件的不稳定性是实时通信的主要挑战之一。视频会议应用需要能够适应不同的网络环境，在带宽有限时保持通信流畅。

核心代码解析：网络自适应视频质量控制

// network-adaptive-manager.js
class NetworkAdaptiveManager {
  constructor(peerConnection) {
    this.peerConnection = peerConnection;
    this.lastBitrate = 0;
    this.bitrateHistory = [];
    this.isMonitoring = false;
    this.statsInterval = null;
  }
  
  startMonitoring() {
    if (this.isMonitoring) return;
    
    this.isMonitoring = true;
    // 每2秒检查一次网络状况
    this.statsInterval = setInterval(async () => {
      await this._checkNetworkStats();
    }, 2000);
  }
  
  stopMonitoring() {
    this.isMonitoring = false;
    if (this.statsInterval) {
      clearInterval(this.statsInterval);
      this.statsInterval = null;
    }
  }
  
  async _checkNetworkStats() {
    try {
      const stats = await this.peerConnection.getStats();
      let bitrate = 0;
      
      stats.forEach(report => {
        if (report.type === 'outbound-rtp' && report.mediaType === 'video') {
          // 计算当前比特率
          if (report.bytesSent && report.timestamp) {
            bitrate = report.bytesSent * 8 / 1000; // kbps
          }
        }
      });
      
      // 简单的比特率历史记录，用于平滑判断网络状况
      this.bitrateHistory.push(bitrate);
      if (this.bitrateHistory.length > 5) {
        this.bitrateHistory.shift();
      }
      
      const avgBitrate = this.bitrateHistory.reduce((sum, val) => sum + val, 0) / this.bitrateHistory.length;
      
      // 如果比特率显著下降，调整视频质量
      if (this.lastBitrate > 0 && avgBitrate < this.lastBitrate * 0.7) {
        this._reduceVideoQuality();
      } else if (this.lastBitrate > 0 && avgBitrate > this.lastBitrate * 1.3) {
        this._increaseVideoQuality();
      }
      
      this.lastBitrate = avgBitrate;
    } catch (error) {
      console.error('网络状况监控失败:', error);
    }
  }
  
  _reduceVideoQuality() {
    // 获取所有发送的视频轨道
    this.peerConnection.getSenders().forEach(sender => {
      if (sender.track && sender.track.kind === 'video') {
        const params = sender.getParameters();
        if (params.encodings && params.encodings.length > 0) {
          // 降低视频比特率
          if (params.encodings[0].maxBitrate) {
            params.encodings[0].maxBitrate = Math.max(100000, params.encodings[0].maxBitrate * 0.7);
          } else {
            params.encodings[0].maxBitrate = 500000; // 设置默认较低比特率
          }
          sender.setParameters(params);
          console.log('降低视频质量，当前最大比特率:', params.encodings[0].maxBitrate);
        }
      }
    });
  }
  
  _increaseVideoQuality() {
    // 类似降低质量的逻辑，但方向相反
    // ...
  }
}

避坑指南

错误：仅依赖单一指标判断网络状况 解决方案：综合考虑比特率、丢包率和延迟等多个指标
错误：频繁调整视频质量导致画面抖动 解决方案：添加历史记录和平滑机制，避免频繁切换
错误：忽视上行和下行带宽差异 解决方案：分别监控和调整发送和接收的媒体流质量

解决方案：构建稳定高效的Electron+WebRTC应用

针对上述挑战，我们可以采用一系列经过验证的解决方案，构建出稳定高效的跨平台视频会议应用。

如何实现高效的屏幕共享

屏幕共享是视频会议的核心功能之一，但实现跨平台的高效屏幕共享面临诸多挑战，包括性能优化和用户体验。

核心代码解析：优化的屏幕共享实现

// screen-share-manager.js
const { desktopCapturer, ipcMain } = require('electron');

class ScreenShareManager {
  constructor(mainWindow) {
    this.mainWindow = mainWindow;
    this.isSharing = false;
    this.mediaStream = null;
    this.setupIpcHandlers();
  }
  
  setupIpcHandlers() {
    // 获取可用的屏幕源
    ipcMain.handle('get-screen-sources', async () => {
      return this._getScreenSources();
    });
    
    // 开始屏幕共享
    ipcMain.handle('start-screen-share', async (event, sourceId) => {
      return this._startScreenShare(sourceId);
    });
    
    // 停止屏幕共享
    ipcMain.handle('stop-screen-share', async () => {
      return this._stopScreenShare();
    });
  }
  
  async _getScreenSources() {
    try {
      const sources = await desktopCapturer.getSources({
        types: ['screen', 'window'],
        thumbnailSize: { width: 200, height: 150 },
        fetchWindowIcons: true
      });
      
      // 格式化源信息，只返回渲染进程需要的数据
      return sources.map(source => ({
        id: source.id,
        name: source.name,
        thumbnailUrl: source.thumbnail.toDataURL(),
        displayId: source.display_id,
        appIcon: source.appIcon ? source.appIcon.toDataURL() : null
      }));
    } catch (error) {
      console.error('获取屏幕源失败:', error);
      throw error;
    }
  }
  
  async _startScreenShare(sourceId) {
    if (this.isSharing) {
      await this._stopScreenShare();
    }
    
    try {
      // 根据平台设置不同的约束条件
      const constraints = this._getScreenConstraints(sourceId);
      
      this.mediaStream = await navigator.mediaDevices.getDisplayMedia(constraints);
      
      // 监听用户停止共享的事件
      this.mediaStream.getVideoTracks()[0].onended = () => {
        this.mainWindow.webContents.send('screen-share-stopped');
        this.isSharing = false;
      };
      
      this.isSharing = true;
      
      // 将媒体流ID发送到渲染进程
      return {
        streamId: this.mediaStream.id
      };
    } catch (error) {
      console.error('开始屏幕共享失败:', error);
      this.isSharing = false;
      throw error;
    }
  }
  
  _getScreenConstraints(sourceId) {
    const constraints = {
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          chromeMediaSourceId: sourceId,
          maxWidth: window.screen.width * 2,
          maxHeight: window.screen.height * 2
        },
        optional: [
          { frameRate: 30 },
          { active: true }
        ]
      },
      audio: {
        mandatory: {
          chromeMediaSource: 'desktop'
        }
      }
    };
    
    // 根据平台调整约束
    if (process.platform === 'linux') {
      // Linux上可能需要调整帧率以提高性能
      constraints.video.optional.push({ frameRate: 15 });
    }
    
    return constraints;
  }
  
  async _stopScreenShare() {
    if (!this.isSharing || !this.mediaStream) return;
    
    // 停止所有轨道
    this.mediaStream.getTracks().forEach(track => track.stop());
    this.mediaStream = null;
    this.isSharing = false;
  }
}

避坑指南

错误：不限制屏幕共享的分辨率和帧率导致性能问题 解决方案：根据设备性能和网络状况设置合理的最大分辨率和帧率
错误：忽视不同平台的屏幕捕获API差异 解决方案：为不同平台实现特定的约束条件和错误处理
错误：未正确处理用户主动停止共享的事件 解决方案：监听轨道的onended事件，及时更新共享状态

如何实现可靠的P2P连接管理

建立和维护可靠的点对点连接是视频会议应用的核心挑战，尤其在复杂网络环境下。

核心代码解析：增强型P2P连接管理器

// p2p-connection-manager.js
class P2PConnectionManager {
  constructor(signalingClient) {
    this.signalingClient = signalingClient;
    this.peerConnections = new Map(); // key: peerId, value: RTCPeerConnection
    this.localStream = null;
    this.iceServers = [
      { urls: 'stun:stun.l.google.com:19302' },
      { urls: 'stun:stun1.l.google.com:19302' },
      // 生产环境中添加TURN服务器
      // { 
      //   urls: 'turn:your-turn-server.com',
      //   username: 'username',
      //   credential: 'credential'
      // }
    ];
    
    this.setupSignalingHandlers();
  }
  
  setupSignalingHandlers() {
    // 处理新的对等连接请求
    this.signalingClient.on('peer-connected', (peerId) => {
      this.createPeerConnection(peerId);
    });
    
    // 处理收到的offer
    this.signalingClient.on('offer-received', async (peerId, offer) => {
      await this.handleOffer(peerId, offer);
    });
    
    // 处理收到的answer
    this.signalingClient.on('answer-received', async (peerId, answer) => {
      await this.handleAnswer(peerId, answer);
    });
    
    // 处理收到的ICE候选者
    this.signalingClient.on('ice-candidate-received', async (peerId, candidate) => {
      await this.handleIceCandidate(peerId, candidate);
    });
    
    // 处理对等方断开连接
    this.signalingClient.on('peer-disconnected', (peerId) => {
      this.closePeerConnection(peerId);
    });
  }
  
  setLocalStream(stream) {
    this.localStream = stream;
    // 将本地流添加到所有现有连接
    this.peerConnections.forEach((pc, peerId) => {
      this._addLocalStreamToPeerConnection(pc);
    });
  }
  
  createPeerConnection(peerId) {
    if (this.peerConnections.has(peerId)) {
      console.warn(`已存在与${peerId}的连接`);
      return this.peerConnections.get(peerId);
    }
    
    const pc = new RTCPeerConnection({ iceServers: this.iceServers });
    this.peerConnections.set(peerId, pc);
    
    // 设置ICE候选者处理
    pc.onicecandidate = (event) => {
      if (event.candidate) {
        this.signalingClient.sendIceCandidate(peerId, event.candidate);
      }
    };
    
    // 设置远程流处理
    pc.ontrack = (event) => {
      // 触发远程流事件
      this.emit('remote-stream-added', {
        peerId,
        stream: event.streams[0]
      });
    };
    
    // 连接状态变化处理
    pc.onconnectionstatechange = () => {
      this._handleConnectionStateChange(peerId, pc.connectionState);
    };
    
    // 添加本地媒体流
    if (this.localStream) {
      this._addLocalStreamToPeerConnection(pc);
    }
    
    // 创建并发送offer
    this._createAndSendOffer(peerId, pc);
    
    return pc;
  }
  
  _addLocalStreamToPeerConnection(pc) {
    this.localStream.getTracks().forEach(track => {
      pc.addTrack(track, this.localStream);
    });
  }
  
  async _createAndSendOffer(peerId, pc) {
    try {
      const offer = await pc.createOffer({
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
      });
      
      await pc.setLocalDescription(offer);
      this.signalingClient.sendOffer(peerId, offer);
    } catch (error) {
      console.error(`创建offer失败 (${peerId}):`, error);
      this.closePeerConnection(peerId);
    }
  }
  
  async handleOffer(peerId, offer) {
    let pc = this.peerConnections.get(peerId);
    if (!pc) {
      pc = this.createPeerConnection(peerId);
    }
    
    try {
      await pc.setRemoteDescription(new RTCSessionDescription(offer));
      const answer = await pc.createAnswer();
      await pc.setLocalDescription(answer);
      this.signalingClient.sendAnswer(peerId, answer);
    } catch (error) {
      console.error(`处理offer失败 (${peerId}):`, error);
      this.closePeerConnection(peerId);
    }
  }
  
  async handleAnswer(peerId, answer) {
    const pc = this.peerConnections.get(peerId);
    if (!pc) {
      console.error(`收到未知对等方${peerId}的answer`);
      return;
    }
    
    try {
      await pc.setRemoteDescription(new RTCSessionDescription(answer));
    } catch (error) {
      console.error(`处理answer失败 (${peerId}):`, error);
      this.closePeerConnection(peerId);
    }
  }
  
  async handleIceCandidate(peerId, candidate) {
    const pc = this.peerConnections.get(peerId);
    if (!pc) {
      console.error(`收到未知对等方${peerId}的ICE候选者`);
      return;
    }
    
    try {
      await pc.addIceCandidate(new RTCIceCandidate(candidate));
    } catch (error) {
      console.error(`添加ICE候选者失败 (${peerId}):`, error);
    }
  }
  
  _handleConnectionStateChange(peerId, state) {
    console.log(`与${peerId}的连接状态: ${state}`);
    
    if (state === 'failed' || state === 'disconnected') {
      // 尝试重新连接
      this.closePeerConnection(peerId);
      setTimeout(() => {
        this.createPeerConnection(peerId);
      }, 3000);
    } else if (state === 'closed') {
      this.peerConnections.delete(peerId);
      this.emit('peer-disconnected', peerId);
    }
  }
  
  closePeerConnection(peerId) {
    const pc = this.peerConnections.get(peerId);
    if (pc) {
      pc.close();
      this.peerConnections.delete(peerId);
      this.emit('peer-disconnected', peerId);
    }
  }
  
  closeAllConnections() {
    this.peerConnections.forEach((pc, peerId) => {
      pc.close();
    });
    this.peerConnections.clear();
  }
}

避坑指南

错误：未处理ICE连接失败的情况 解决方案：监听连接状态变化，在连接失败时尝试重新连接
错误：忽视TURN服务器的重要性 解决方案：在生产环境中始终配置TURN服务器，应对复杂网络环境
错误：未正确管理多个对等连接 解决方案：使用Map数据结构跟踪所有连接，确保资源正确释放

实战案例：构建跨平台视频会议应用

基于上述解决方案，我们可以构建一个功能完善的跨平台视频会议应用。以下是该应用的核心实现和关键技术点。

项目结构

video-conference-app/
├── main.js                 # 主进程
├── preload.js              # 预加载脚本
├── renderer/
│   ├── index.html          # 主界面
│   ├── assets/             # 静态资源
│   ├── js/
│   │   ├── conference.js   # 会议核心逻辑
│   │   ├── ui-manager.js   # 界面管理
│   │   └── webrtc-service.js # WebRTC服务
│   └── css/
│       └── styles.css      # 样式文件
├── src/
│   ├── managers/           # 各种管理器
│   └── services/           # 服务模块
└── package.json

核心功能实现

核心代码解析：视频会议主控制器

// conference.js - 渲染进程
class VideoConference {
  constructor() {
    this.isInConference = false;
    this.localStream = null;
    this.remoteStreams = new Map();
    this.p2pManager = null;
    this.signalingClient = null;
    this.screenShareManager = null;
    this.networkMonitor = null;
    
    this.setupEventListeners();
    this.initializeServices();
  }
  
  initializeServices() {
    // 初始化信令客户端
    this.signalingClient = new SignalingClient('wss://your-signaling-server.com');
    
    // 初始化P2P连接管理器
    this.p2pManager = new P2PConnectionManager(this.signalingClient);
    
    // 设置P2P事件处理
    this.p2pManager.on('remote-stream-added', (data) => {
      this.handleRemoteStreamAdded(data.peerId, data.stream);
    });
    
    this.p2pManager.on('peer-disconnected', (peerId) => {
      this.handlePeerDisconnected(peerId);
    });
    
    // 初始化屏幕共享管理器
    this.screenShareManager = new ScreenShareManager();
  }
  
  setupEventListeners() {
    // DOM事件监听
    document.getElementById('start-conference').addEventListener('click', () => this.startConference());
    document.getElementById('leave-conference').addEventListener('click', () => this.leaveConference());
    document.getElementById('toggle-video').addEventListener('click', () => this.toggleVideo());
    document.getElementById('toggle-audio').addEventListener('click', () => this.toggleAudio());
    document.getElementById('share-screen').addEventListener('click', () => this.toggleScreenShare());
    
    // 屏幕共享相关事件
    ipcRenderer.on('screen-share-stopped', () => {
      this.handleScreenShareStopped();
    });
  }
  
  async startConference() {
    try {
      // 检查权限
      const permissions = await ipcRenderer.invoke('check-permissions');
      if (!permissions.cameraPermission || !permissions.micPermission) {
        alert('需要摄像头和麦克风权限才能开始会议');
        return;
      }
      
      // 获取本地媒体流
      this.localStream = await navigator.mediaDevices.getUserMedia({
        video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } },
        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
      });
      
      // 显示本地视频
      this.showLocalStream();
      
      // 加入房间
      const roomId = document.getElementById('room-id').value || 'default-room';
      await this.signalingClient.joinRoom(roomId);
      
      // 设置本地流
      this.p2pManager.setLocalStream(this.localStream);
      
      // 开始网络监控
      this.networkMonitor = new NetworkAdaptiveManager(this.p2pManager.peerConnections);
      this.networkMonitor.startMonitoring();
      
      this.isInConference = true;
      this.updateUIState();
    } catch (error) {
      console.error('开始会议失败:', error);
      alert('无法开始会议: ' + error.message);
    }
  }
  
  showLocalStream() {
    const localVideo = document.getElementById('local-video');
    localVideo.srcObject = this.localStream;
    
    // 视频轨道控制
    this.videoTrack = this.localStream.getVideoTracks()[0];
    this.audioTrack = this.localStream.getAudioTracks()[0];
  }
  
  handleRemoteStreamAdded(peerId, stream) {
    this.remoteStreams.set(peerId, stream);
    
    // 创建远程视频元素
    const remoteVideosContainer = document.getElementById('remote-videos');
    const videoElement = document.createElement('video');
    videoElement.id = `remote-video-${peerId}`;
    videoElement.srcObject = stream;
    videoElement.autoplay = true;
    videoElement.playsinline = true;
    videoElement.classList.add('remote-video');
    
    remoteVideosContainer.appendChild(videoElement);
  }
  
  async toggleScreenShare() {
    if (this.screenShareManager.isSharing) {
      await ipcRenderer.invoke('stop-screen-share');
      // 恢复摄像头视频
      if (this.localStream && this.videoTrack) {
        this.videoTrack.enabled = true;
      }
    } else {
      // 获取屏幕源列表
      const sources = await ipcRenderer.invoke('get-screen-sources');
      
      // 显示屏幕选择界面
      const sourceId = await this.showScreenSourceSelector(sources);
      if (!sourceId) return;
      
      // 暂停摄像头视频
      if (this.videoTrack) {
        this.videoTrack.enabled = false;
      }
      
      // 开始屏幕共享
      const { streamId } = await ipcRenderer.invoke('start-screen-share', sourceId);
      
      // 获取屏幕共享流
      const screenStream = await navigator.mediaDevices.getUserMedia({
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: sourceId
          }
        }
      });
      
      // 替换本地流
      this.replaceTrackInAllConnections(screenStream.getVideoTracks()[0]);
    }
    
    this.updateUIState();
  }
  
  replaceTrackInAllConnections(newTrack) {
    // 在所有P2P连接中替换视频轨道
    this.p2pManager.replaceVideoTrack(newTrack);
    
    // 更新本地预览
    const localVideo = document.getElementById('local-video');
    localVideo.srcObject = new MediaStream([newTrack, this.audioTrack]);
  }
  
  // 其他方法实现...
}

// 应用初始化
document.addEventListener('DOMContentLoaded', () => {
  window.conference = new VideoConference();
});

实用技巧：提升用户体验的两个高级功能

1. 动态视频质量调整

根据参与者数量自动调整视频质量，当会议人数增加时降低单个视频流的质量，确保整体流畅性。

// 动态视频质量调整实现
class DynamicQualityManager {
  constructor(p2pManager) {
    this.p2pManager = p2pManager;
    this.participantCount = 1; // 初始化为1（本地用户）
    this.baseQuality = { width: 1280, height: 720, frameRate: 30 };
    
    // 监听参与者变化
    this.p2pManager.on('peer-connected', () => {
      this.participantCount++;
      this.adjustQuality();
    });
    
    this.p2pManager.on('peer-disconnected', () => {
      this.participantCount = Math.max(1, this.participantCount - 1);
      this.adjustQuality();
    });
  }
  
  adjustQuality() {
    let quality;
    
    if (this.participantCount <= 2) {
      // 2人会议，最高质量
      quality = { ...this.baseQuality };
    } else if (this.participantCount <= 4) {
      // 3-4人会议，中等质量
      quality = {
        width: 854,
        height: 480,
        frameRate: 24
      };
    } else if (this.participantCount <= 8) {
      // 5-8人会议，低质量
      quality = {
        width: 640,
        height: 360,
        frameRate: 15
      };
    } else {
      // 8人以上，最低质量
      quality = {
        width: 426,
        height: 240,
        frameRate: 10
      };
    }
    
    console.log(`调整视频质量: ${quality.width}x${quality.height} @ ${quality.frameRate}fps (参与者数量: ${this.participantCount})`);
    
    // 应用新的视频约束
    this.p2pManager.updateVideoConstraints(quality);
  }
}

2. 智能网络切换检测

检测用户网络类型变化（如从Wi-Fi切换到移动数据），自动调整视频质量以适应新的网络环境。

// 网络切换检测实现
class NetworkSwitchDetector {
  constructor() {
    this.previousNetworkInfo = null;
    this.startMonitoring();
  }
  
  startMonitoring() {
    // 检查浏览器是否支持network information API
    if (!navigator.connection) {
      console.warn('浏览器不支持网络信息API，无法检测网络切换');
      return;
    }
    
    // 初始网络信息
    this.previousNetworkInfo = this.getNetworkInfo();
    
    // 监听网络变化
    navigator.connection.addEventListener('change', () => {
      const newNetworkInfo = this.getNetworkInfo();
      this.detectNetworkChange(newNetworkInfo);
      this.previousNetworkInfo = newNetworkInfo;
    });
  }
  
  getNetworkInfo() {
    return {
      type: navigator.connection.type,
      effectiveType: navigator.connection.effectiveType,
      downlink: navigator.connection.downlink
    };
  }
  
  detectNetworkChange(newNetworkInfo) {
    // 检测网络类型变化
    if (this.previousNetworkInfo.type !== newNetworkInfo.type) {
      console.log(`网络类型变化: ${this.previousNetworkInfo.type} -> ${newNetworkInfo.type}`);
      this.handleNetworkChange(newNetworkInfo);
    }
    
    // 检测有效连接类型变化 (4g, 3g, 2g, slow-2g)
    if (this.previousNetworkInfo.effectiveType !== newNetworkInfo.effectiveType) {
      console.log(`网络质量变化: ${this.previousNetworkInfo.effectiveType} -> ${newNetworkInfo.effectiveType}`);
      this.handleNetworkChange(newNetworkInfo);
    }
    
    // 检测显著的带宽变化 (>50%差异)
    if (this.previousNetworkInfo.downlink && 
        Math.abs(newNetworkInfo.downlink - this.previousNetworkInfo.downlink) / this.previousNetworkInfo.downlink > 0.5) {
      console.log(`带宽变化: ${this.previousNetworkInfo.downlink}Mbps -> ${newNetworkInfo.downlink}Mbps`);
      this.handleNetworkChange(newNetworkInfo);
    }
  }
  
  handleNetworkChange(networkInfo) {
    // 根据新的网络信息发送事件，让应用调整视频质量
    const event = new CustomEvent('network-changed', { detail: networkInfo });
    document.dispatchEvent(event);
  }
}

// 使用示例
document.addEventListener('network-changed', (event) => {
  const networkInfo = event.detail;
  
  // 根据网络信息调整视频质量
  if (networkInfo.effectiveType === 'slow-2g' || networkInfo.effectiveType === '2g') {
    // 非常差的网络，可能需要禁用视频
    conference.disableVideo();
  } else if (networkInfo.effectiveType === '3g') {
    // 中等网络，降低视频质量
    conference.setVideoQuality('low');
  } else {
    // 良好网络，恢复高质量视频
    conference.setVideoQuality('high');
  }
});