webrtc: i don't want to share some user stream but wanted to receive stream from other user how to acheive that through PeerJs in angular?

Question

I have this code snippet.

startMediaStream(peer: Peer)
     {
     // Function to start the media stream (audio and video) for the participant
     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;  
    
    
    peer.on('call', (call: any) => {
        console.log(call, "call details");
        if (this.myVideoStream && this.myAudioStream) {
          call.answer(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");
      if (this.myVideoStream && this.myAudioStream) {
      const call = peer.call(data.userId, 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) => {
        // const { userId, enabled } = data;
        // Handle the video state change of the specified user
        // this.handleVideoStateChange(userId, enabled);
        console.log("video state", data);
      });
    
      this.socketService.on('audio-state-change').subscribe((data: any) => {
        // const { userId, enabled } = data;
        // Handle the audio state change of the specified user
        console.log("audio state", data);
        // this.handleAudioStateChange(userId, enabled);
      });
     });
    }

    createLocalParticipant
    (userId: string, stream: MediaStream, isLocal: boolean, container:HTMLElement)
     { 
    const video = document.createElement('video');
    video.setAttribute('id', userId);
    video.setAttribute('class', 'video-element-room'); 
    video.srcObject = stream;
    
    if (isLocal) {
      video.muted = true;
    }
    
    video.addEventListener('loadedmetadata', () => {
      video.play();
    });
    const myAudio = document.getElementById('my-audio') as HTMLAudioElement;
    myAudio.srcObject = stream;
    myAudio.volume = 1.0;
    
    container.append(video);
    
    } 

    handleCall(userId: string, call: MediaConnection, userName: any)
     { 
    // Function to handle an incoming call from another participant
      const video = document.createElement('video'); 
      const audio = document.createElement('audio'); 
      audio.setAttribute('id', audio-${userId});
    
    
    call.on('stream', (remoteStream: MediaStream) => {
      // When a stream is received from the other participant
      // let participant = this.participantStreams.find(participant => participant.id === userId);
    
      console.log(remoteStream.getAudioTracks()[0], "remotestream");
      console.log(remoteStream.getVideoTracks()[0], "remotestream");
    
      const participant = this.participantStreams.find((participant) => participant.id === userId);
      const isVideoMuted = participant ? participant.isVideoMuted : false;
      const isAudioMuted = participant ? participant.isAudioMuted : false;
    
      this.peers[userId] = { call, video, audio, isVideoMuted, isAudioMuted };
    
    
      if (participant) {
        // If the participant is already in the list, update their video and audio streams
        participant.videoStream = remoteStream.getVideoTracks()[0]
        participant.audioStream = remoteStream.getAudioTracks()[0]
      } else {
        // If the participant is not in the list, add them to the list
        const participant = {
          id: userId,
          videoStream: remoteStream.getVideoTracks()[0],
          audioStream: remoteStream.getAudioTracks()[0],
          userName: userName,
          isVideoMuted: false,
          isAudioMuted: false
        };
        this.participantStreams.push(participant);
      }
    
      this.addParticipantStream(userId, remoteStream, userName);
      
    });
    
    call.on('close', () => {
      this.removeParticipant(userId);
    });
    
    this.peers[userId] = { call, video, audio };

}

These Three functions startmediastream is used to start the user's media stream, I have another similar page by which users can join the stream but on this, I wanted to create it as a moderator so they can handle the whole call but I don't want to share that moderator stream within the call while I try to do so by turning of navigaor.mediadevice so I would end sharing my stream. but then I am unable to receive a stream of other users.

In this, I am assuming the moderator doesn't contain any camera and microphone on their system.

Answer 1

I resolved this issue by creating a fake media stream and passing it on peer. call method.