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?

huangapple go评论68阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年7月3日 10:36:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76601554.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定