add local stream option for participants

Author: gulbikeimge

backend/session/data/participant/participant_data.py

@@ -33,6 +33,7 @@ class ParticipantData(BaseData):
     size : SizeData
     muted_video : bool
     muted_audio : bool
+    local_stream : bool
     position : PositionData
     chat : list or custom_types.chat_message.ChatMessageDict
     filters : list or filters.FilterDict
@@ -80,6 +81,9 @@ class ParticipantData(BaseData):
     muted_audio: bool = field(repr=False)
     """Whether the participants' audio is forcefully muted by the experimenter."""
 
+    local_stream: bool = field(repr=False)
+    """Whether the participants' view is using a local stream."""
+
     position: PositionData = field(repr=False)
     """Position of the participant on the canvas (frontend).
 
@@ -143,6 +147,7 @@ def asdict(self) -> ParticipantDict:
             "size": self.size.asdict(),
             "muted_video": self.muted_video,
             "muted_audio": self.muted_audio,
+            "local_stream": self.local_stream,
             "position": self.position.asdict(),
             "chat": self.chat,
             "audio_filters": self.audio_filters,

backend/session/data/participant/participant_data_factory.py

@@ -30,6 +30,7 @@ def participant_data_factory(participant_dict: ParticipantDict) -> ParticipantDa
         sizeData,
         participant_dict["muted_video"],
         participant_dict["muted_audio"],
+        participant_dict["local_stream"],
         positionData,
         participant_dict["chat"],
         participant_dict["audio_filters"],

backend/session/data/participant/participant_dict.py

@@ -28,6 +28,8 @@ class ParticipantDict(TypedDict):
         Whether the participants' video is forcefully muted by the experimenter.
     muted_audio : bool
         Whether the participants' audio is forcefully muted by the experimenter.
+    local_stream : bool
+        Whether the participants' view is using a local stream.
     audio_filters : list of filters.FilterDict
         Active audio filters for this participant.
     video_filters : list of filters.FilterDict
@@ -68,6 +70,7 @@ class ParticipantDict(TypedDict):
     participant_name: str
     muted_video: bool
     muted_audio: bool
+    local_stream: bool
     audio_filters: list[FilterDict]
     video_filters: list[FilterDict]
     chat_filters: list[ChatFilterDict]

backend/session/data/participant/participant_dict_validator.py

@@ -75,6 +75,7 @@ def is_valid_participant(data, recursive: bool = True) -> TypeGuard[ParticipantD
         and isinstance(data["lastMessageReadTime"], int)
         and isinstance(data["chat_filters"], list)
         and isinstance(data["muted_audio"], bool)
+        and isinstance(data["local_stream"], bool)
         and isinstance(data["banned"], bool)
         and isinstance(data["canvas_id"], str)
     )

backend/users/participant.py

@@ -79,7 +79,7 @@ def __init__(
             WebRTC `offer`.  Use factory instead of instantiating Participant directly.
         """
         super(Participant, self).__init__(
-            participant_id, participant_data.muted_video, participant_data.muted_audio
+            participant_id, participant_data.muted_video, participant_data.muted_audio, participant_data.local_stream
         )
         self._logger = logging.getLogger(f"Participant-{participant_id}")
         self._participant_data = participant_data

backend/users/user.py

@@ -89,6 +89,7 @@ class User(AsyncIOEventEmitter, metaclass=ABCMeta):
     _logger: logging.Logger
     _muted_video: bool
     _muted_audio: bool
+    _local_stream: bool
     _connection: ConnectionInterface | None
     _handlers: dict[str, list[Callable[[Any], Coroutine[Any, Any, MessageDict | None]]]]
     _ping_buffer: deque  # buffer of n last ping times
@@ -99,7 +100,7 @@ class User(AsyncIOEventEmitter, metaclass=ABCMeta):
     __lock: asyncio.Lock
 
     def __init__(
-        self, user_id: str, muted_video: bool = False, muted_audio: bool = False
+        self, user_id: str, muted_video: bool = False, muted_audio: bool = False, local_stream: bool = False
     ) -> None:
         """Instantiate new User base class.
 
@@ -120,6 +121,7 @@ def __init__(
         self._experiment = None
         self._muted_video = muted_video
         self._muted_audio = muted_audio
+        self._local_stream = local_stream
         self._handlers = {}
         self._ping_buffer = deque(maxlen=100)
         self._pinging = False
@@ -140,6 +142,11 @@ def muted_audio(self) -> bool:
         """bool indicating if the users audio is muted."""
         return self._muted_audio
 
+    @property
+    def local_stream(self) -> bool:
+        """bool indicating if the users video is using local stream."""
+        return self._local_stream
+
     @property
     def recorded(self) -> bool:
         """bool indicating if the users video is recorded."""

frontend/src/modals/ParticipantDataModal/ParticipantDataModal.tsx

@@ -454,6 +454,14 @@ function ParticipantDataModal({
                     handleChange("muted_video", !participantCopy.muted_video);
                   }}
                 />
+                <FormControlLabel
+                  control={<Checkbox />}
+                  label="Local Stream"
+                  checked={participantCopy.local_stream}
+                  onChange={() => {
+                    handleChange("local_stream", !participantCopy.local_stream);
+                  }}
+                />
               </Box>
             </Box>
             {/* Displays the list of filters available in the backend in a dropdown */}

frontend/src/pages/MeetingRoom/MeetingRoom.js

@@ -14,6 +14,7 @@ import {
 import { InstructionsTab } from "../../components/molecules/InstructionsTab/InstructionsTab";
 import "./MeetingRoom.css";
 import { ChatGptTab } from "../../components/molecules/ChatGptTab/ChatGptTab";
+import { getParticipantById } from "../../utils/utils";
 
 function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
   const videoElement = useRef(null);
@@ -65,8 +66,15 @@ function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
   }, [connection]);
 
   useEffect(() => {
-    setParticipantStream(localStream);
-  }, [localStream]);
+    if (sessionData) {
+      const participant = getParticipantById(participantIdParam, sessionData);
+      if (participant.local_stream) {
+        setParticipantStream(localStream);
+      } else {
+        setParticipantStream(connection.remoteStream);
+      }
+    }
+  }, [localStream, sessionData]);
 
   useEffect(() => {
     if (participantStream && videoElement.current) {
@@ -92,7 +100,7 @@ function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
               <VideoCanvas
                 connectedParticipants={connectedParticipants}
                 sessionData={sessionData}
-                localStream={localStream}
+                localStream={participantStream}
                 ownParticipantId={participantIdParam}
               />
             ) : (

frontend/src/types.ts

@@ -43,6 +43,7 @@ export type Participant = {
   size: { width: number; height: number };
   muted_video: boolean;
   muted_audio: boolean;
+  local_stream: boolean;
   position: { x: number; y: number; z: number };
   chat: ChatMessage[];
   audio_filters: Filter[];

frontend/src/utils/constants.ts

@@ -31,6 +31,7 @@ export const INITIAL_PARTICIPANT_DATA: Participant = {
   participant_name: "",
   muted_audio: true,
   muted_video: true,
+  local_stream: false,
   banned: false,
   video_filters: [],
   audio_filters: [],