如何在Angular中通过PeerJS实现主持人仅接收流不共享自身媒体流

问题核心在于你把PeerJS的事件监听、Socket连接逻辑都嵌套在了navigator.mediaDevices.getUserMedia的成功回调里，主持人模式下跳过了媒体流获取，导致这些关键逻辑根本没执行；同时call.answer()和主动呼叫的判断依赖本地流存在，进一步阻断了连接建立。

以下是具体修改方案：

1. 重构startMediaStream函数，分离角色逻辑 #

给函数添加isHost参数区分主持人/普通参与者，把PeerJS和Socket的监听逻辑从媒体流回调中抽离，确保主持人也能初始化这些监听：

startMediaStream(peer: Peer, isHost: boolean = false) {
  // 初始化Peer和Socket监听，不管是否是主持人都执行
  this.setupPeerAndSocketListeners(peer, isHost);

  if (!isHost) {
    // 普通参与者才获取媒体流
    const audioConstraints = { 
      video: true,
      audio: { 
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true 
      }
    }; 
    navigator.mediaDevices.getUserMedia(audioConstraints).then((stream: MediaStream) => {
      const videoGrid: any = document.getElementById('video-grid'); 
      this.createLocalParticipant(peer.id, stream, true, videoGrid);
      this.myVideoStream = stream; 
      this.myAudioStream = stream;  
    });
  }
}

2. 独立创建Peer与Socket监听函数 #

把原来嵌套在媒体流回调里的监听逻辑单独拎出来，主持人模式下处理呼叫时不传本地流：

setupPeerAndSocketListeners(peer: Peer, isHost: boolean) {
  // 处理来电
  peer.on('call', (call: any) => {
    console.log(call, "call details");
    // 主持人直接应答，不传本地流；普通参与者传自己的流
    call.answer(isHost ? null : this.myVideoStream);

    const userId = call.peer;
    const userName = call.metadata.name;
    this.handleCall(userId, call, userName);
  });

  // 处理用户连接
  this.socketService.on('user-connected').subscribe((data: any) => {
    console.log(data, "user connected data");
    // 主持人主动呼叫时不传流；普通参与者传自己的流
    const call = peer.call(data.userId, isHost ? null : this.myVideoStream, { 
      metadata: {name: this.userName}
    });
    this.handleCall(data.userId, call, data.name);
  });

  // 以下原有逻辑保持不变
  this.socketService.on('user-disconnected').subscribe((data: any) => {
    this.removeParticipant(data.userId);
  });

  this.socketService.on('video-state-change').subscribe((data: any) => {
    console.log("video state", data);
  });

  this.socketService.on('audio-state-change').subscribe((data: any) => {
    console.log("audio state", data);
  });
}

3. 调整handleCall函数的兼容性 #

你的原有handleCall逻辑已经能正常处理远端流，只需确保调用它时不受本地流影响，上面的修改已经覆盖这一点。

关键说明 #

• PeerJS允许在call.answer()和peer.call()中传递null作为媒体流，这样依然能建立连接并接收对方的流
• 把监听逻辑从媒体流回调中抽离是核心，确保主持人能注册到所有必要的事件监听
• 主持人模式下跳过本地媒体流获取和本地参与者视频创建，避免无效操作

内容的提问来源于stack exchange，提问作者AKSHAY SHRIVASTAVA