subscribeToRemoteParticipant()

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);
  }