From 6c39b0792b59745c6beb26978d8774245fc55e92 Mon Sep 17 00:00:00 2001 From: Kamil Stasiak Date: Thu, 4 Apr 2024 15:42:01 +0200 Subject: [PATCH] Update React Client --- assets/package-lock.json | 2 +- .../devices/LocalPeerMediaContext.tsx | 52 ++-- .../components/VideoroomHomePage.tsx | 2 +- assets/src/pages/room/RoomPage.tsx | 2 +- .../room/components/MediaControlButtons.tsx | 2 +- .../room/hooks/useMembraneMediaStreaming.tsx | 270 ------------------ 6 files changed, 23 insertions(+), 307 deletions(-) delete mode 100644 assets/src/pages/room/hooks/useMembraneMediaStreaming.tsx diff --git a/assets/package-lock.json b/assets/package-lock.json index 46ed4b3c..9c463fe8 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -1087,7 +1087,7 @@ }, "node_modules/@jellyfish-dev/react-client-sdk": { "version": "0.2.1", - "resolved": "git+ssh://git@github.com/jellyfish-dev/react-client-sdk.git#837058d2eb8e38b956a10094a2cb7578828b4633", + "resolved": "git+ssh://git@github.com/jellyfish-dev/react-client-sdk.git#6179b7801626fcb69de74ae0b331d7d57ce2286c", "license": "Apache-2.0", "dependencies": { "@jellyfish-dev/ts-client-sdk": "github:jellyfish-dev/ts-client-sdk#feature/poc-2", diff --git a/assets/src/features/devices/LocalPeerMediaContext.tsx b/assets/src/features/devices/LocalPeerMediaContext.tsx index c5ccb72c..26b8be92 100644 --- a/assets/src/features/devices/LocalPeerMediaContext.tsx +++ b/assets/src/features/devices/LocalPeerMediaContext.tsx @@ -122,7 +122,7 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { trackRef.current = track || null; } - if (client.getSnapshot().status === "joined") { + if (client.status === "joined") { if (!remoteTrackIdRef.current && streamRef.current && trackRef.current) { const mediaStream = new MediaStream(); mediaStream.addTrack(trackRef.current); @@ -163,7 +163,7 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { trackRef.current = event.video?.media?.track || null; streamRef.current = event.video?.media?.stream || null; - const snapshot = client.getSnapshot(); + const snapshot = client; const cameraId = snapshot?.media?.video?.media?.deviceInfo?.deviceId || null; @@ -193,39 +193,31 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { * i jak tak to dodaję */ const joinedHandler: ClientEvents["joined"] = async () => { - - // const stream = streamRef.current || null; - // const track = trackRef.current || null; - - const snapshot = client.getSnapshot(); - - const stream = snapshot.devices.camera.stream; - const track = snapshot.devices.camera.track; + const stream = client.devices.camera.stream; + const track = client.devices.camera.track; if (cameraIntentionRef.current && !remoteTrackIdRef.current && stream && track) { await changeMediaStream(stream, track, blurRef.current, metadataActiveRef.current); } else if (cameraIntentionRef.current && lastCameraIdRef.current) { - await snapshot.deviceManager.start({ videoDeviceId: lastCameraIdRef.current }); + await client.deviceManager.start({ videoDeviceId: lastCameraIdRef.current }); } - const microphoneTrack = snapshot.devices.microphone.track; + const microphoneTrack = client.devices.microphone.track; if (microphoneIntentionRef.current && !microphoneTrack) { - await snapshot.deviceManager.start({ audioDeviceId: true }); + await client.deviceManager.start({ audioDeviceId: true }); } }; const deviceReady: ClientEvents["deviceReady"] = async (event, client) => { - const snapshot = client.getSnapshot(); - - const cameraId = snapshot.media?.video?.media?.deviceInfo?.deviceId; + const cameraId = client.media?.video?.media?.deviceInfo?.deviceId; if (event.trackType === "video" && event.mediaDeviceType === "userMedia" && cameraId) { lastCameraIdRef.current = cameraId; - const stream = snapshot?.media?.video?.media?.stream; - const track = snapshot?.media?.video?.media?.track; + const stream = client?.media?.video?.media?.stream; + const track = client?.media?.video?.media?.track; - if (snapshot.status === "joined" && event.trackType === "video" && stream && track) { + if (client.status === "joined" && event.trackType === "video" && stream && track) { workerRef.current?.postMessage({ action: "stop" }, []); // todo what is the second parameter await changeMediaStream(stream, track, blurRef.current, track.enabled); } @@ -233,9 +225,7 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { }; const devicesReady: ClientEvents["devicesReady"] = async (event, client) => { - const snapshot = client.getSnapshot(); - - const cameraId = snapshot?.media?.video?.media?.deviceInfo?.deviceId || null; + const cameraId = client?.media?.video?.media?.deviceInfo?.deviceId || null; if (cameraId) { lastCameraIdRef.current = cameraId; @@ -249,16 +239,14 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { }; const deviceStopped: ClientEvents["deviceStopped"] = async (event, client) => { - const snapshot = client.getSnapshot(); - - if (snapshot.status !== "joined" && event.trackType === "video" && event.mediaDeviceType === "userMedia") { + if (client.status !== "joined" && event.trackType === "video" && event.mediaDeviceType === "userMedia") { setStream(null); setTrack(null); streamRef.current = null; trackRef.current = null; } - if (snapshot.status === "joined" && event.trackType === "video" && event.mediaDeviceType === "userMedia" && trackRef.current && remoteTrackIdRef.current) { + if (client.status === "joined" && event.trackType === "video" && event.mediaDeviceType === "userMedia" && trackRef.current && remoteTrackIdRef.current) { if (!workerRef.current) { workerRef.current = new EmptyVideoWorker(); const canvasElement = document.createElement("canvas"); @@ -298,13 +286,11 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { }; const disconnected: ClientEvents["disconnected"] = async (client) => { - const snapshot = client.getSnapshot(); - remoteTrackIdRef.current = null; - if (snapshot.devices.microphone.stream) snapshot.devices.microphone.stop(); - if (snapshot.devices.camera.stream) snapshot.devices.camera.stop(); - if (snapshot.devices.screenShare.stream) snapshot.devices.screenShare.stop(); + if (client.devices.microphone.stream) client.devices.microphone.stop(); + if (client.devices.camera.stream) client.devices.camera.stop(); + if (client.devices.screenShare.stream) client.devices.screenShare.stop(); }; @@ -399,11 +385,11 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { }, []); const restartDevices = useCallback(() => { - const micStatus = client.getSnapshot().media?.audio?.mediaStatus; + const micStatus = client.media?.audio?.mediaStatus; if (managerInitializedRef.current && microphoneIntentionRef.current && micStatus === "OK") { toggleMicrophone(true); } - const camStatus = client.getSnapshot().media?.video?.mediaStatus; + const camStatus = client.media?.video?.mediaStatus; if (managerInitializedRef.current && cameraIntentionRef.current && camStatus === "OK") { toggleCamera(true); } diff --git a/assets/src/features/home-page/components/VideoroomHomePage.tsx b/assets/src/features/home-page/components/VideoroomHomePage.tsx index fb41cd6a..4ec9c9a4 100644 --- a/assets/src/features/home-page/components/VideoroomHomePage.tsx +++ b/assets/src/features/home-page/components/VideoroomHomePage.tsx @@ -126,7 +126,7 @@ const VideoroomHomePage: FC = () => { You are joining: {roomId} diff --git a/assets/src/pages/room/RoomPage.tsx b/assets/src/pages/room/RoomPage.tsx index e0cfa0d2..b1a792aa 100644 --- a/assets/src/pages/room/RoomPage.tsx +++ b/assets/src/pages/room/RoomPage.tsx @@ -244,7 +244,7 @@ const RoomPage: FC = ({ roomId, wasCameraDisabled, wasMicrophoneDisabled {statistics.status ? "Hide statistics" : "Show statistics"} diff --git a/assets/src/pages/room/components/MediaControlButtons.tsx b/assets/src/pages/room/components/MediaControlButtons.tsx index 4bb1dc8f..77e40433 100644 --- a/assets/src/pages/room/components/MediaControlButtons.tsx +++ b/assets/src/pages/room/components/MediaControlButtons.tsx @@ -2,7 +2,6 @@ import { FC } from "react"; import MediaControlButton, { MediaControlButtonProps } from "./MediaControlButton"; import { NavigateFunction, useNavigate, useParams } from "react-router-dom"; -import { StreamingMode } from "../hooks/useMembraneMediaStreaming"; import { useToggle } from "../hooks/useToggle"; import Microphone from "../../../features/room-page/icons/Microphone"; import MicrophoneOff from "../../../features/room-page/icons/MicrophoneOff"; @@ -27,6 +26,7 @@ import { UseCameraResult, UseMicrophoneResult, UseScreenShareResult, Client } fr import { LocalPeerContext, useLocalPeer } from "../../../features/devices/LocalPeerMediaContext.tsx"; type ControlButton = MediaControlButtonProps & { id: string }; +export type StreamingMode = "manual" | "automatic"; type Sidebar = { isSidebarOpen: boolean; diff --git a/assets/src/pages/room/hooks/useMembraneMediaStreaming.tsx b/assets/src/pages/room/hooks/useMembraneMediaStreaming.tsx deleted file mode 100644 index f80745d4..00000000 --- a/assets/src/pages/room/hooks/useMembraneMediaStreaming.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { TrackMetadata, useClient } from "../../../jellyfish.types.ts"; -import { useDeveloperInfo } from "../../../contexts/DeveloperInfoContext.tsx"; -import { selectBandwidthLimit } from "../bandwidth.tsx"; -import { - UseCameraResult, - UseMicrophoneResult, - UseScreenShareResult -} from "@jellyfish-dev/react-client-sdk"; - -export type MembraneStreaming = { - trackId: string | null; - removeTracks: () => void; - addTracks: () => void; - setActive: (status: boolean) => void; - updateTrackMetadata: (metadata: TrackMetadata) => void; - trackMetadata: TrackMetadata | null; -}; - -export type StreamingMode = "manual" | "automatic"; - -type TrackIds = { - localId: string; - remoteId: string; -}; - -export const useMembraneMediaStreaming = ( - mode: StreamingMode, - { type, device }: { - type: "screensharing", - device: UseScreenShareResult - } | { - type: "audio", - device: UseMicrophoneResult - }, - isConnected: boolean -): MembraneStreaming => { - const [trackIds, setTrackIds] = useState(null); - - const client = useClient(); - - const deviceRemoveTrackRef = useRef(device.removeTrack); - useEffect(() => { - deviceRemoveTrackRef.current = device.removeTrack; - }, [device.removeTrack]); - - const [trackMetadata, setTrackMetadata] = useState(null); - const defaultTrackMetadata = useMemo(() => ({ active: device.enabled, type }), [device.enabled, type]); - - const addTracks = useCallback( - async () => { - await device.addTrack( - defaultTrackMetadata, - selectBandwidthLimit(type, false) - ); - setTrackMetadata(defaultTrackMetadata); - }, - [defaultTrackMetadata, type] - ); - - const replaceTrack = useCallback( - async () => { - if (!trackIds || !device.stream) return; - if (!device.track) { - console.error({ stream: device.stream, type }); - throw Error("Stream has no tracks!"); - } - - await device.replaceTrack(device.track, device.stream); - }, - [device.stream, device.track, trackIds, type] - ); - - const removeTracks = useCallback(() => { - setTrackMetadata(null); - deviceRemoveTrackRef.current(); - }, []); - - useEffect(() => { - (async () => { - if (!client || !isConnected || mode !== "automatic") { - return; - } - - - const stream = device.stream; - - const localTrackId: string | undefined = device.track?.id; - - if (stream && !trackIds) { - await addTracks(); - } else if (stream && trackIds && trackIds.localId !== localTrackId) { - await replaceTrack(); - } else if (!stream && trackIds) { - removeTracks(); - } - })(); - }, [client, device.stream, device.track, device.enabled, isConnected, addTracks, mode, removeTracks, trackIds, replaceTrack, type]); - - useEffect(() => { - if (device.track?.id && device.broadcast?.trackId) { - setTrackIds({ localId: device.track?.id, remoteId: device.broadcast?.trackId }); - } else if (trackIds !== null) { - setTrackIds(null); - } - }, [device.track?.id, device.broadcast?.trackId]); - - const updateTrackMetadata = useCallback( - (metadata: TrackMetadata) => { - if (!trackIds) return; - client?.updateTrackMetadata(trackIds.remoteId, metadata); - setTrackMetadata(metadata); - }, - [client, trackIds] - ); - - const setActive = useCallback( - (status: boolean) => { - if (trackMetadata) { - updateTrackMetadata({ ...trackMetadata, active: status }); - } else { - throw Error("Track metadata is null!"); - } - }, - [trackMetadata, updateTrackMetadata] - ); - - return { - trackId: trackIds?.remoteId || null, - removeTracks, - addTracks, - setActive, - updateTrackMetadata, - trackMetadata - }; -}; - -export const useMembraneCameraStreaming = ( - mode: StreamingMode, - device: UseCameraResult, - isConnected: boolean -): MembraneStreaming => { - const [trackIds, setTrackIds] = useState(null); - - // const client = useClient(); - // const defaultTrackMetadata = useRef({ active: true, type: "camera" as const }); - - const { simulcast } = useDeveloperInfo(); - const simulcastEnabled = simulcast.status; - - useEffect(() => { - // const joinedHandler: ClientEvents["joined"] = async () => { - // const { stream, track, enabled } = client.getSnapshot().devices.camera; - // - // if (stream && track) { - // await client.addTrack( - // track, - // stream, - // { active: enabled, type: "camera" }, - // simulcastEnabled ? { enabled: true, activeEncodings: ["l", "m", "h"], disabledEncodings: [] } : undefined, - // selectBandwidthLimit("camera", simulcastEnabled) - // ); - // } - // }; - // - // client.on("joined", joinedHandler); - // - // return () => { - // client.removeListener("joined", joinedHandler); - // }; - }, []); - - - const [trackMetadata, setTrackMetadata] = useState(null); - - const addTracks = useCallback(async () => { - // if (!device.track || !device.stream) return; - // const remoteId = await client.addTrack( - // device.track, - // device.stream, - // defaultTrackMetadata, - // simulcastEnabled ? { enabled: true, activeEncodings: ["l", "m", "h"], disabledEncodings: [] } : undefined, - // selectBandwidthLimit("camera", simulcastEnabled) - // ); - // setTrackMetadata(defaultTrackMetadata); - // setTrackIds({ - // localId: device.track.id, - // remoteId - // }); - // }, [client, device.addTrack, defaultTrackMetadata, simulcastEnabled]); - // }, [device.addTrack, defaultTrackMetadata, simulcastEnabled]); - }, [device.addTrack, simulcastEnabled]); - - const replaceTrack = useCallback(async () => { - if (!trackIds || !device.stream) return; - if (!device.track) { - console.error({ stream: device.stream, type: "camera" }); - throw Error("Stream has no tracks!"); - } - - // await client.replaceTrack(trackIds.remoteId, device.track); - setTrackIds({ ...trackIds, localId: device.track.id }); - // }, [client, device.stream, device.track, trackIds]); - }, [device.stream, device.track, trackIds]); - - const removeTracks = useCallback(() => { - if (!trackIds) return; - // client.removeTrack(trackIds.localId); - setTrackMetadata(null); - // }, [client, trackIds]); - }, [trackIds]); - - useEffect(() => { - // if (!client || !isConnected || mode !== "automatic") { - // return; - // } - // const stream = device.stream; - // - // const localTrackId: string | undefined = device.track?.id; - // - // if (stream && !trackIds) { - // addTracks(); - // } else if (stream && trackIds && trackIds.localId !== localTrackId) { - // replaceTrack(); - // } else if (!stream && trackIds) { - // removeTracks(); - // } - }, [ - // client, - device.stream, - device.track, - device.enabled, - isConnected, - addTracks, - mode, - removeTracks, - trackIds, - replaceTrack - ]); - - const updateTrackMetadata = useCallback( - (metadata: TrackMetadata) => { - if (!trackIds) return; - // client?.updateTrackMetadata(trackIds.remoteId, metadata); - setTrackMetadata(metadata); - }, - // [client, trackIds] - [trackIds] - ); - - const setActive = useCallback( - (_status: boolean) => { - // if (trackMetadata) { - // updateTrackMetadata({ ...trackMetadata, active: status }); - // } else { - // throw Error("Track metadata is null!"); - // } - }, - [] - ); - - return { - trackId: trackIds?.remoteId || null, - removeTracks, - addTracks, - setActive, - updateTrackMetadata, - trackMetadata - }; -};