英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论