in TailwindTraders.Website/Source/Tailwind.Traders.Web/ClientApp/src/pages/home/components/videoCall/CallCard.js [202:261]
subscribeToRemoteParticipant(participant) {
participant.on("displayNameChanged", () => {
console.log("displayNameChanged ", participant.displayName);
});
participant.on("participantStateChanged", () => {
console.log(
"participantStateChanged",
participant.identifier.communicationUserId,
participant.state
);
this.setState({ remoteParticipants: this.call.remoteParticipants });
});
const addToListOfAllParticipantStreams = (participantStreams) => {
if (participantStreams) {
let participantStreamTuples = participantStreams.map((stream) => {
return { stream, participant };
});
const tuplesToAdd = [];
participantStreamTuples.forEach((participantStreamTuple) => {
if (
!this.state.streams.find((v) => {
return v === participantStreamTuple;
})
) {
tuplesToAdd.push(participantStreamTuple);
}
});
this.setState({ streams: this.state.streams.concat(tuplesToAdd) });
}
};
const removeFromListOfAllParticipantStreams = (participantStreams) => {
if (participantStreams) {
let participantStreamTuples = participantStreams.map((stream) => {
return { stream, participant };
});
let arr = this.state.streams;
arr.forEach((tuple, i) => {
if (
participantStreamTuples.find((v) => {
return v === tuple;
})
) {
this.state.streams.splice(i);
}
});
this.setState({ streams: arr });
}
};
const handleVideoStreamsUpdated = (e) => {
addToListOfAllParticipantStreams(e.added);
removeFromListOfAllParticipantStreams(e.removed);
};
addToListOfAllParticipantStreams(participant.videoStreams);
participant.on("videoStreamsUpdated", handleVideoStreamsUpdated);
}