Angular SSR应用中RTCPeerConnection未定义问题的解决咨询

问题根源在于RTCPeerConnection是浏览器专属的Web API，Angular SSR会先在Node.js服务端环境执行渲染逻辑，而Node环境中不存在这个对象，因此触发报错。以下是具体解决方法：

1. 限定代码仅在浏览器环境执行 #

使用Angular内置的isPlatformBrowser工具函数，判断当前运行环境，仅在浏览器中初始化WebRTC连接：

// 先导入依赖
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

// 在组件/服务的构造函数注入PLATFORM_ID
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

// 初始化PeerConnection的方法
initPeerConnection() {
  if (isPlatformBrowser(this.platformId)) {
    this.localConnection = new RTCPeerConnection({
      iceServers: [/* 你的ICE服务器配置 */]
    });
    // 所有WebRTC相关逻辑（如监听ICE候选、创建Offer等）都放在这个判断内
  }
}

2. 动态封装WebRTC逻辑（复杂场景适用） #

如果WebRTC相关代码量较大，可以将其封装为独立模块，仅在浏览器环境下动态导入：

async initPeerConnection() {
  if (isPlatformBrowser(this.platformId)) {
    // 动态导入WebRTC处理模块
    const { WebRTCHandler } = await import('./webrtc-handler');
    this.localConnection = WebRTCHandler.createPeerConnection({
      iceServers: [/* 你的配置 */]
    });
  }
}

3. 为服务端提供Mock对象（可选） #

如果服务端渲染必须执行到相关代码但不需要实际功能，可以创建Mock类替代：

// 定义Mock类模拟RTCPeerConnection的必要方法
class MockRTCPeerConnection {
  constructor(config?: any) {}
  createOffer() { return Promise.resolve({}); }
  setLocalDescription() { return Promise.resolve(); }
  addIceCandidate() { return Promise.resolve(); }
  // 根据业务需求添加其他需要模拟的方法
}

// 初始化时根据环境选择实例
this.localConnection = isPlatformBrowser(this.platformId)
  ? new RTCPeerConnection({ iceServers: [...] })
  : new MockRTCPeerConnection();

注：单元测试正常是因为测试环境通常会模拟浏览器API或直接在浏览器环境运行，和SSR的Node服务端环境存在差异。

内容的提问来源于stack exchange，提问作者Some of the Things