Event emitters (#73)

.tool-versions

@@ -1 +1 @@
-nodejs 18.14.2
+nodejs v20.13.1

examples/minimal-react/src/components/App.tsx

@@ -1,7 +1,7 @@
 import VideoPlayer from "./VideoPlayer";
-import { JellyfishClient, SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@jellyfish-dev/react-client-sdk";
+import { SCREEN_SHARING_MEDIA_CONSTRAINTS, Client } from "@jellyfish-dev/react-client-sdk";
 import { useState } from "react";
-import { useConnect, useDisconnect, useApi, useStatus, useTracks, useSelector } from "./client";
+import { useConnect, useDisconnect, useClient, useStatus, useTracks } from "./client";
 
 // Example metadata types for peer and track
 // You can define your own metadata types just make sure they are serializable
@@ -18,14 +18,14 @@ export const App = () => {
 
  const connect = useConnect();
  const disconnect = useDisconnect();
- const api = useApi();
+ const client = useClient();
  const status = useStatus();
  const tracks = useTracks();
 
  {
  // for e2e test
- const client = useSelector((s) => s.connectivity.client);
- (window as unknown as { client: JellyfishClient<PeerMetadata, TrackMetadata> }).client = client!;
+ const client = useClient();
+ (window as unknown as { client: Client<PeerMetadata, TrackMetadata> }).client = client!;
  }
 
  return (
@@ -58,7 +58,7 @@ export const App = () => {
  // Get screen sharing MediaStream
  navigator.mediaDevices.getDisplayMedia(SCREEN_SHARING_MEDIA_CONSTRAINTS).then((screenStream) => {
  // Add local MediaStream to webrtc
- screenStream.getTracks().forEach((track) => api.addTrack(track, screenStream, { type: "screen" }));
+ screenStream.getTracks().forEach((track) => client.addTrack(track, screenStream, { type: "screen" }));
  });
  }}
  >

examples/minimal-react/src/components/client.ts

@@ -3,5 +3,5 @@ import { PeerMetadata, TrackMetadata } from "./App";
 
 // Create a Membrane client instance
 // remember to use JellyfishContextProvider
-export const { useApi, useTracks, useStatus, useConnect, useDisconnect, useSelector, JellyfishContextProvider } =
+export const { useClient, useTracks, useStatus, useConnect, useDisconnect, useSelector, JellyfishContextProvider } =
  create<PeerMetadata, TrackMetadata>();

examples/use-camera-and-microphone-example/src/AdditionalControls.tsx

@@ -43,7 +43,9 @@ export const AdditionalControls = () => {
  <h3>Local:</h3>
  <div className="max-w-[500px]">
  {camera?.track?.kind === "video" && <VideoPlayer stream={camera?.stream} />}
- {microphone?.track?.kind === "audio" && <AudioVisualizer stream={microphone?.stream} />}
+ {microphone?.track?.kind === "audio" && (
+ <AudioVisualizer stream={microphone?.stream} trackId={microphone?.track.id} />
+ )}
  </div>
  </div>
  </div>

examples/use-camera-and-microphone-example/src/AudioVisualizer.tsx

@@ -2,11 +2,13 @@ import { useEffect, useRef, useState } from "react";
 
 type Props = {
  stream: MediaStream | null | undefined;
+ trackId: string | null;
 };
 
-export const AudioVisualizer = ({ stream }: Props) => {
+export const AudioVisualizer = ({ stream, trackId }: Props) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null);
+ const idRef = useRef<number | null>(null);
  const [canvasWidth, setCanvasWidth] = useState<number>(400);
 
  useEffect(() => {
@@ -34,9 +36,10 @@ export const AudioVisualizer = ({ stream }: Props) => {
  const dataArray = new Uint8Array(bufferLength);
 
  function renderFrame() {
- const id = requestAnimationFrame(renderFrame);
+ idRef.current = requestAnimationFrame(renderFrame);
+
  if (!canvasRef.current) {
- cancelAnimationFrame(id);
+ cancelAnimationFrame(idRef.current);
  return;
  }
 
@@ -58,7 +61,11 @@ export const AudioVisualizer = ({ stream }: Props) => {
  }
 
  renderFrame();
- }, [stream]);
+
+ return () => {
+ idRef.current && cancelAnimationFrame(idRef.current);
+ };
+ }, [stream, trackId]);
 
  return (
  <div ref={canvasParentRef} className="flex flex-row flex-nowrap justify-center border-4">

examples/use-camera-and-microphone-example/src/DeviceControls.tsx

@@ -1,5 +1,9 @@
-import { PeerStatus, UseScreenshareResult } from "@jellyfish-dev/react-client-sdk";
-import { UseMicrophoneResult, UseCameraResult } from "@jellyfish-dev/react-client-sdk";
+import {
+ PeerStatus,
+ UseMicrophoneResult,
+ UseCameraResult,
+ UseScreenShareResult,
+} from "@jellyfish-dev/react-client-sdk";
 import { TrackMetadata } from "./jellyfishSetup";
 
 type DeviceControlsProps = {
@@ -15,7 +19,7 @@ type DeviceControlsProps = {
  type: "video";
  }
  | {
- device: UseScreenshareResult<TrackMetadata>;
+ device: UseScreenShareResult<TrackMetadata>;
  type: "screenshare";
  }
 );
@@ -25,36 +29,36 @@ export const DeviceControls = ({ device, type, status, metadata }: DeviceControl
  <div className="flex flex-col gap-2">
  <button
  className="btn btn-success btn-sm"
- disabled={!!device.stream}
+ disabled={!!device?.stream}
  onClick={() => {
- device.start();
+ device?.start();
  }}
  >
  Start {type} device
  </button>
  <button
  className="btn btn-error btn-sm"
- disabled={!device.stream}
+ disabled={!device?.stream}
  onClick={() => {
- device.stop();
+ device?.stop();
  }}
  >
  Stop {type} device
  </button>
  <button
  className="btn btn-success btn-sm"
- disabled={!device.stream || device.enabled}
+ disabled={!device?.stream || device?.enabled}
  onClick={() => {
- device.setEnable(true);
+ device?.setEnable(true);
  }}
  >
  Enable {type} track
  </button>
  <button
  className="btn btn-error btn-sm"
- disabled={!device.enabled}
+ disabled={!device?.enabled}
  onClick={() => {
- device.setEnable(false);
+ device?.setEnable(false);
  }}
  >
  Disable {type} track
@@ -63,7 +67,7 @@ export const DeviceControls = ({ device, type, status, metadata }: DeviceControl
  className="btn btn-success btn-sm"
  disabled={status !== "joined" || !device?.stream || !!device?.broadcast?.trackId}
  onClick={() => {
- device.addTrack(metadata);
+ device?.addTrack(metadata);
  }}
  >
  Stream {type} track
@@ -72,7 +76,7 @@ export const DeviceControls = ({ device, type, status, metadata }: DeviceControl
  className="btn btn-error btn-sm"
  disabled={status !== "joined" || !device?.stream || !device?.broadcast?.trackId}
  onClick={() => {
- device.removeTrack();
+ device?.removeTrack();
  }}
  >
  Stop {type} track stream

examples/use-camera-and-microphone-example/src/DeviceSelector.tsx

@@ -5,36 +5,41 @@ type Props = {
  defaultOptionText: string;
  devices: MediaDeviceInfo[] | null;
  setInput: (value: string | null) => void;
- // inputValue: string | null;
+ activeDevice: string | null;
 };
 
-export const DeviceSelector = ({ name, devices, setInput, defaultOptionText }: Props) => {
+export const DeviceSelector = ({ name, devices, setInput, defaultOptionText, activeDevice }: Props) => {
  const [selectedDevice, setSelectedDevice] = useState<string | null>(null);
 
  const onOptionChangeHandler = (event: ChangeEvent<HTMLSelectElement>) => {
  setSelectedDevice(event?.target?.value);
  };
 
  return (
- <div className="flex flex-row items-center gap-2">
- <span>{name}</span>
- <select className="select w-full max-w-xs" onChange={onOptionChangeHandler} defaultValue={defaultOptionText}>
- <option disabled>{defaultOptionText}</option>
- {(devices || []).map(({ deviceId, label }) => (
- <option key={deviceId} value={deviceId}>
- {label}
- </option>
- ))}
- </select>
- <button
- className="btn btn-error btn-sm"
- disabled={!selectedDevice}
- onClick={() => {
- setInput(selectedDevice);
- }}
- >
- Change device!
- </button>
+ <div className="flex flex-col gap-2">
+ <div className="flex flex-row">
+ <span>Selected: {activeDevice}</span>
+ </div>
+ <div className="flex flex-row items-center gap-2">
+ <span>{name}</span>
+ <select className="select w-full max-w-xs" onChange={onOptionChangeHandler} defaultValue={defaultOptionText}>
+ <option disabled>{defaultOptionText}</option>
+ {(devices || []).map(({ deviceId, label }) => (
+ <option key={deviceId} value={deviceId}>
+ {label}
+ </option>
+ ))}
+ </select>
+ <button
+ className="btn btn-error btn-sm"
+ disabled={!selectedDevice}
+ onClick={() => {
+ setInput(selectedDevice);
+ }}
+ >
+ Change device!
+ </button>
+ </div>
  </div>
  );
 };