Get local media stream once when joining call

src/ConferenceCallManager.js

@@ -138,7 +138,7 @@ export class ConferenceCallManager extends EventEmitter {
     this.localParticipant = {
       local: true,
       userId: localUserId,
-      feed: null,
+      stream: null,
       call: null,
       muted: true,
     };
@@ -159,7 +159,11 @@ export class ConferenceCallManager extends EventEmitter {
     this.room = this.client.getRoom(this.roomId);
   }
 
-  join() {
+  async join() {
+    const mediaStream = await this.client.getLocalVideoStream();
+
+    this.localParticipant.stream = mediaStream;
+
     this.joined = true;
 
     this._setDebugState(this.client.getUserId(), null, "you");
@@ -698,7 +702,7 @@ export class ConferenceCallManager extends EventEmitter {
 
     this.participants.push({
       userId,
-      feed: null,
+      stream: null,
       call,
     });
 
@@ -720,28 +724,20 @@ export class ConferenceCallManager extends EventEmitter {
   }
 
   _onCallFeedsChanged = (call) => {
-    const localFeeds = call.getLocalFeeds();
+    for (const participant of this.participants) {
+      if (participant.local || participant.call !== call) {
+        continue;
+      }
 
-    let participantsChanged = false;
+      const remoteFeeds = call.getRemoteFeeds();
 
-    if (!this.localParticipant.feed && localFeeds.length > 0) {
-      this.localParticipant.call = call;
-      this.localParticipant.feed = localFeeds[0];
-      participantsChanged = true;
-    }
-
-    const remoteFeeds = call.getRemoteFeeds();
-    const remoteParticipant = this.participants.find(
-      (p) => !p.local && p.call === call
-    );
-
-    if (remoteFeeds.length > 0 && remoteParticipant.feed !== remoteFeeds[0]) {
-      remoteParticipant.feed = remoteFeeds[0];
-      participantsChanged = true;
-    }
-
-    if (participantsChanged) {
-      this.emit("participants_changed");
+      if (
+        remoteFeeds.length > 0 &&
+        participant.stream !== remoteFeeds[0].stream
+      ) {
+        participant.stream = remoteFeeds[0].stream;
+        this.emit("participants_changed");
+      }
     }
   };
 
@@ -760,28 +756,6 @@ export class ConferenceCallManager extends EventEmitter {
 
     this.participants.splice(participantIndex, 1);
 
-    if (this.localParticipant.call === call) {
-      const newLocalCallParticipant = this.participants.find(
-        (p) => !p.local && p.call
-      );
-
-      if (newLocalCallParticipant) {
-        const newCall = newLocalCallParticipant.call;
-        const localFeeds = newCall.getLocalFeeds();
-
-        if (localFeeds.length > 0) {
-          this.localParticipant.call = newCall;
-          this.localParticipant.feed = localFeeds[0];
-        } else {
-          this.localParticipant.call = null;
-          this.localParticipant.feed = null;
-        }
-      } else {
-        this.localParticipant.call = null;
-        this.localParticipant.feed = null;
-      }
-    }
-
     this.emit("participants_changed");
   };
 
@@ -832,7 +806,7 @@ export class ConferenceCallManager extends EventEmitter {
 
     this.joined = false;
     this.participants = [this.localParticipant];
-    this.localParticipant.feed = null;
+    this.localParticipant.stream = null;
     this.localParticipant.call = null;
 
     this.emit("participants_changed");

src/ConferenceCallManagerHooks.js

@@ -225,12 +225,21 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
     manager.on("participants_changed", onParticipantsChanged);
 
-    manager.join();
-
-    setState((prevState) => ({
-      ...prevState,
-      joined: true,
-    }));
+    manager
+      .join()
+      .then(() => {
+        setState((prevState) => ({
+          ...prevState,
+          joined: true,
+        }));
+      })
+      .catch((error) => {
+        setState((prevState) => ({
+          ...prevState,
+          joined: false,
+          error,
+        }));
+      });
 
     return () => {
       manager.removeListener("participants_changed", onParticipantsChanged);

src/Room.jsx

@@ -104,21 +104,21 @@ export function Room({ manager }) {
   );
 }
 
-function Participant({ userId, feed, muted, local }) {
+function Participant({ userId, stream, muted, local }) {
   const videoRef = useRef();
 
   useEffect(() => {
-    if (feed) {
+    if (stream) {
       if (muted) {
         videoRef.current.muted = true;
       }
 
-      videoRef.current.srcObject = feed.stream;
+      videoRef.current.srcObject = stream;
       videoRef.current.play();
     } else {
       videoRef.current.srcObject = null;
     }
-  }, [feed]);
+  }, [stream]);
 
   return (
     <div className={styles.participant}>