diff --git a/assets/package-lock.json b/assets/package-lock.json index 553d3cb..a87c33b 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "license": "Apache-2.0", "dependencies": { - "@fishjam-dev/react-client": "^0.4.0", + "@fishjam-dev/react-client": "github:fishjam-dev/react-client-sdk", "@mediapipe/tasks-vision": "^0.10.12", "axios": "^1.6.8", "chartist": "^1.3.0", @@ -51,12 +51,12 @@ } }, "../../react-client-sdk": { - "name": "@jellyfish-dev/react-client-sdk", - "version": "0.3.1", + "name": "@fishjam-dev/react-client", + "version": "0.4.0", "extraneous": true, "license": "Apache-2.0", "dependencies": { - "@jellyfish-dev/ts-client-sdk": "^0.4.0", + "@fishjam-dev/ts-client": "file:../ts-client-sdk", "events": "3.3.0", "lodash.isequal": "4.5.0" }, @@ -1035,21 +1035,19 @@ }, "node_modules/@fishjam-dev/react-client": { "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@fishjam-dev/react-client/-/react-client-0.4.0.tgz", - "integrity": "sha512-hZBbJkuq7f+tDSi8W/ESgIw6VBwMu7Td6wP/RACmuY250Qs1aI5pFV181vZFyTtKuLBNOSE5rLpORljec7kDcg==", + "resolved": "git+ssh://git@github.com/fishjam-dev/react-client-sdk.git#b4ba0bb5d0ca2df15bde897a3ea6b94c8032ae20", "dependencies": { - "@fishjam-dev/ts-client": "^0.5.0", + "@fishjam-dev/ts-client": "github:fishjam-dev/ts-client-sdk", "events": "3.3.0", "lodash.isequal": "4.5.0" } }, "node_modules/@fishjam-dev/ts-client": { "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@fishjam-dev/ts-client/-/ts-client-0.5.0.tgz", - "integrity": "sha512-Hbcm0hcjovj8zEu9R6A5uFAVpZNLrO/ycV6W+wQyzIkJn6/sUgunqdqyRHYgsnNz2WMM1J4SI0P5tonMAvTViQ==", + "resolved": "git+ssh://git@github.com/fishjam-dev/ts-client-sdk.git#d254b040a184b9631c64e36bb80a453e0757005c", "dependencies": { "events": "^3.3.0", - "ts-proto": "^1.165.0", + "protobufjs": "^7.3.0", "typed-emitter": "^2.1.0", "uuid": "^9.0.1" } @@ -3709,9 +3707,9 @@ } }, "node_modules/protobufjs": { - "version": "7.2.5", - "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.2.5.tgz", - "integrity": "sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==", + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.0.tgz", + "integrity": "sha512-YWD03n3shzV9ImZRX3ccbjqLxj7NokGN0V/ESiBV5xWqrommYHYiihuIyavq03pWSGqlyvYUFmfoMKd+1rPA/g==", "hasInstallScript": true, "dependencies": { "@protobufjs/aspromise": "^1.1.2", diff --git a/assets/package.json b/assets/package.json index 66ae09c..5e1ed84 100644 --- a/assets/package.json +++ b/assets/package.json @@ -11,7 +11,7 @@ "preview": "vite preview" }, "dependencies": { - "@fishjam-dev/react-client": "^0.4.0", + "@fishjam-dev/react-client": "github:fishjam-dev/react-client-sdk", "@mediapipe/tasks-vision": "^0.10.12", "axios": "^1.6.8", "chartist": "^1.3.0", diff --git a/assets/src/features/devices/LocalPeerMediaContext.tsx b/assets/src/features/devices/LocalPeerMediaContext.tsx index 90b628c..f38666b 100644 --- a/assets/src/features/devices/LocalPeerMediaContext.tsx +++ b/assets/src/features/devices/LocalPeerMediaContext.tsx @@ -5,14 +5,14 @@ import { VIDEO_TRACK_CONSTRAINTS } from "../../pages/room/consts"; import { PeerMetadata, TrackMetadata, useCamera, useClient, useMicrophone, useSetupMedia } from "../../fishjam"; -import { ClientEvents, UseCameraResult, SimulcastConfig } from "@fishjam-dev/react-client"; +import { ClientEvents, CameraAPI, SimulcastConfig } from "@fishjam-dev/react-client"; import { BlurProcessor } from "./BlurProcessor"; import { selectBandwidthLimit } from "../../pages/room/bandwidth.tsx"; import { useDeveloperInfo } from "../../contexts/DeveloperInfoContext.tsx"; import { useUser } from "../../contexts/UserContext.tsx"; export type LocalPeerContext = { - video: UseCameraResult; + video: CameraAPI; init: () => void; blur: boolean; setBlur: (status: boolean, restart: boolean) => void; @@ -67,6 +67,7 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { }); const video = useCamera(); + const microphone = useMicrophone(); const [blur, setBlur] = useState(false); const processor = useRef(null); @@ -127,6 +128,9 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { .some((track) => track?.metadata?.type === "camera"); const newTrack = trackRef.current; + + const newMetadata = { active: metadataActive, type: "camera", displayName } as const; + if (!lastCameraTrack && streamRef.current && newTrack) { const mediaStream = new MediaStream(); mediaStream.addTrack(newTrack); @@ -140,8 +144,7 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { remoteTrackIdRef.current = await client.addTrack( newTrack, - mediaStream, - { active: metadataActive, type: "camera", displayName }, + newMetadata, simulcastConfig, selectBandwidthLimit("camera", simulcastEnabled) ); @@ -152,7 +155,6 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { // todo // When you replaceTrack, this does not affect the stream, so the local peer doesn't know that something has changed. // add localTrackReplaced event - const newMetadata: TrackMetadata = { active: metadataActive, type: "camera", displayName }; await client.replaceTrack(remoteTrackIdRef.current, trackRef.current, newMetadata); } else if (remoteTrackIdRef.current && !stream) { await client.removeTrack(remoteTrackIdRef.current); @@ -263,7 +265,6 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { client.removeListener("devicesReady", devicesReady); client.removeListener("deviceStopped", deviceStopped); client.removeListener("disconnected", disconnected); - }; }, [simulcast.status]); @@ -276,12 +277,15 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { const noop: () => Promise = useCallback((..._args) => Promise.resolve(), []); - const newVideo: UseCameraResult = useMemo(() => ({ + const newVideo: CameraAPI = useMemo(() => ({ stream: stream || null, track: track || null, addTrack: noop, removeTrack: noop, replaceTrack: noop, + updateTrackMetadata: noop, + muteTrack: noop, + unmuteTrack: noop, broadcast: video.broadcast, deviceInfo: video.deviceInfo, devices: video.devices, @@ -295,8 +299,6 @@ export const LocalPeerMediaProvider = ({ children }: Props) => { mediaStatus: video.mediaStatus }), [stream, track]); - const microphone = useMicrophone(); - const setDevice = useCallback(async (cameraId: string | null, microphoneId: string | null, blur: boolean) => { if (microphoneId && microphoneIntentionRef.current) { microphone.start(microphoneId); diff --git a/assets/src/fishjam.ts b/assets/src/fishjam.ts index 1fdd92c..fc4dc38 100644 --- a/assets/src/fishjam.ts +++ b/assets/src/fishjam.ts @@ -38,9 +38,9 @@ export const { peerMetadataParser: (obj) => peerMetadataSchema.parse(obj), trackMetadataParser: (obj) => trackMetadataSchema.parse(obj), reconnect: { - initialDelay: 10, // ms - delay: 200, // ms - maxAttempts: 1, + initialDelay: 200, // ms + delay: 500, // ms + maxAttempts: 5, } }, { storage: true }); diff --git a/assets/src/pages/room/components/MediaControlButtons.tsx b/assets/src/pages/room/components/MediaControlButtons.tsx index ec090ab..f69f02a 100644 --- a/assets/src/pages/room/components/MediaControlButtons.tsx +++ b/assets/src/pages/room/components/MediaControlButtons.tsx @@ -22,7 +22,7 @@ import { useMicrophone, useScreenShare } from "../../../fishjam.ts"; -import { UseCameraResult, UseMicrophoneResult, UseScreenShareResult, Client } from "@fishjam-dev/react-client"; +import { CameraAPI, MicrophoneAPI, ScreenShareAPI, Client } from "@fishjam-dev/react-client"; import { LocalPeerContext, useLocalPeer } from "../../../features/devices/LocalPeerMediaContext.tsx"; import { useUser } from "../../../contexts/UserContext.tsx"; @@ -40,9 +40,9 @@ const getAutomaticControls = ( isSidebarOpen: boolean, openSidebar: () => void, isMobileViewport: boolean, - microphone: UseMicrophoneResult, - screenShare: UseScreenShareResult, - camera: UseCameraResult, + microphone: MicrophoneAPI, + screenShare: ScreenShareAPI, + camera: CameraAPI, localPeerContext: LocalPeerContext ): ControlButton[] => [ camera.stream @@ -130,9 +130,9 @@ const getAutomaticControls = ( // todo fix manual mode const getManualControls = ( navigate: NavigateFunction, - microphone: UseMicrophoneResult, - screenShare: UseScreenShareResult, - camera: UseCameraResult, + microphone: MicrophoneAPI, + screenShare: ScreenShareAPI, + camera: CameraAPI, client: Client, displayName: string, roomId?: string @@ -402,9 +402,9 @@ const MediaControlButtons: FC = const navigate = useNavigate(); - const camera: UseCameraResult = useCamera(); - const microphone: UseMicrophoneResult = useMicrophone(); - const screenShare: UseScreenShareResult = useScreenShare(); + const camera: CameraAPI = useCamera(); + const microphone: MicrophoneAPI = useMicrophone(); + const screenShare: ScreenShareAPI = useScreenShare(); const client = useClient(); const localPeerContext = useLocalPeer();