英文:
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?
问题
以下是代码的翻译部分:
我有这段代码片段。
这三个函数 startMediaStream 用于启动用户的媒体流。我还有另一个类似的页面,用户可以加入媒体流,但在这个页面上,我想将其创建为一个主持人,这样他们可以处理整个通话,但我不想在通话中共享主持人的流。尝试通过关闭 navigator.mediaDevices 来实现,以便我停止共享我的流,但然后我无法接收其他用户的流。
在这里,我假设主持人的系统上没有摄像头和麦克风。
请注意,我已经移除了代码中的 HTML 元素和注释,只翻译了您提供的文字描述。如果您需要更多帮助或有其他问题,请随时提出。
英文:
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.
答案1
得分: 0
我通过创建一个虚拟媒体流并将其传递给 peer.call 方法来解决了这个问题。
英文:
I resolved this issue by creating a fake media stream and passing it on peer. call method.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论