Skip to content
This repository has been archived by the owner on Jul 17, 2024. It is now read-only.

Commit

Permalink
Update React Client
Browse files Browse the repository at this point in the history
  • Loading branch information
@kamil-stasiak
kamil-stasiak committed Apr 4, 2024
1 parent c4f802b commit 6c39b07
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 307 deletions.
2 changes: 1 addition & 1 deletion assets/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 19 additions & 33 deletions assets/src/features/devices/LocalPeerMediaContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -193,49 +193,39 @@ export const LocalPeerMediaProvider = ({ children }: Props) => {
* i jak tak to dodaję
*/
const joinedHandler: ClientEvents<PeerMetadata, TrackMetadata>["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<PeerMetadata, TrackMetadata>["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);
}
}
};

const devicesReady: ClientEvents<PeerMetadata, TrackMetadata>["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;
Expand All @@ -249,16 +239,14 @@ export const LocalPeerMediaProvider = ({ children }: Props) => {
};

const deviceStopped: ClientEvents<PeerMetadata, TrackMetadata>["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");
Expand Down Expand Up @@ -298,13 +286,11 @@ export const LocalPeerMediaProvider = ({ children }: Props) => {
};

const disconnected: ClientEvents<PeerMetadata, TrackMetadata>["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();
};


Expand Down Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion assets/src/features/home-page/components/VideoroomHomePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const VideoroomHomePage: FC = () => {
<span>You are joining:</span>
<span className="sm:text-2xl sm:font-medium">{roomId}</span>
<button onClick={() => {
console.log(client.getSnapshot());
console.log(client);
}}>Show state
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion assets/src/pages/room/RoomPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ const RoomPage: FC<Props> = ({ roomId, wasCameraDisabled, wasMicrophoneDisabled
{statistics.status ? "Hide statistics" : "Show statistics"}
</button>
<button onClick={() => {
console.log(client.getSnapshot());
console.log({ client });
}}>Show state
</button>

Expand Down
2 changes: 1 addition & 1 deletion assets/src/pages/room/components/MediaControlButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 6c39b07

Please sign in to comment.