Make processor initialization work on track create (#1039)

.changeset/eight-turtles-tell.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Make processor initialization work on track create

examples/nextjs/pages/e2ee.tsx

@@ -9,7 +9,7 @@ import { generateRandomUserId } from '../lib/helper';
 const E2EEExample: NextPage = () => {
   const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
   const roomName = params?.get('room') ?? 'test-room';
-  const userIdentity = params?.get('user') ?? generateRandomUserId();
+  const userIdentity = React.useMemo(() => params?.get('user') ?? generateRandomUserId(), []);
   setLogLevel('warn', { liveKitClientLogLevel: 'debug' });
 
   const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, {

examples/nextjs/pages/prejoin.tsx

@@ -3,13 +3,24 @@
 import * as React from 'react';
 import { PreJoin, setLogLevel } from '@livekit/components-react';
 import type { NextPage } from 'next';
+import { Track, TrackProcessor } from 'livekit-client';
+import { BackgroundBlur } from '@livekit/track-processors';
 
 const PreJoinExample: NextPage = () => {
   setLogLevel('debug', { liveKitClientLogLevel: 'warn' });
 
+  const [backgroundBlur, setBackgroundBlur] = React.useState<
+    TrackProcessor<Track.Kind.Video> | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    setBackgroundBlur(BackgroundBlur());
+  }, []);
+
   return (
     <div data-lk-theme="default" style={{ height: '100vh' }}>
       <PreJoin
+        videoProcessor={backgroundBlur}
         defaults={{ videoDeviceId: '' }}
         onSubmit={(values) => {
           values.audioDeviceId;

examples/nextjs/pages/processors.tsx

@@ -13,7 +13,7 @@ import {
 } from '@livekit/components-react';
 import type { NextPage } from 'next';
 import { ControlBarControls } from '@livekit/components-react';
-import { LocalVideoTrack, Track } from 'livekit-client';
+import { LocalVideoTrack, Track, TrackProcessor } from 'livekit-client';
 import { BackgroundBlur } from '@livekit/track-processors';
 
 function Stage() {
@@ -23,14 +23,15 @@ function Stage() {
   const [blurEnabled, setBlurEnabled] = React.useState(false);
   const [processorPending, setProcessorPending] = React.useState(false);
   const { cameraTrack } = useLocalParticipant();
+  const [blur] = React.useState(BackgroundBlur());
 
   React.useEffect(() => {
     const localCamTrack = cameraTrack?.track as LocalVideoTrack | undefined;
     if (localCamTrack) {
       setProcessorPending(true);
       try {
         if (blurEnabled && !localCamTrack.getProcessor()) {
-          localCamTrack.setProcessor(BackgroundBlur());
+          localCamTrack.setProcessor(blur);
         } else if (!blurEnabled) {
           localCamTrack.stopProcessor();
         }

packages/react/etc/components-react.api.md

@@ -34,6 +34,7 @@ import { ScreenShareCaptureOptions } from 'livekit-client';
 import { setLogLevel as setLogLevel_2 } from 'livekit-client';
 import { SVGProps } from 'react';
 import { Track } from 'livekit-client';
+import { TrackProcessor } from 'livekit-client';
 import { TrackPublication } from 'livekit-client';
 import { TrackPublishOptions } from 'livekit-client';
 import { TranscriptionSegment } from 'livekit-client';
@@ -546,7 +547,7 @@ export interface ParticipantTileProps extends React_2.HTMLAttributes<HTMLDivElem
 export type PinState = TrackReferenceOrPlaceholder[];
 
 // @public
-export function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, ...htmlProps }: PreJoinProps): React_2.JSX.Element;
+export function PreJoin({ defaults, onValidate, onSubmit, onError, debug, joinLabel, micLabel, camLabel, userLabel, persistUserChoices, videoProcessor, ...htmlProps }: PreJoinProps): React_2.JSX.Element;
 
 // @public
 export interface PreJoinProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onError'> {
@@ -566,6 +567,8 @@ export interface PreJoinProps extends Omit<React_2.HTMLAttributes<HTMLDivElement
     persistUserChoices?: boolean;
     // (undocumented)
     userLabel?: string;
+    // (undocumented)
+    videoProcessor?: TrackProcessor<Track.Kind.Video>;
 }
 
 // Warning: (ae-internal-missing-underscore) The name "QualityExcellentIcon" should be prefixed with an underscore because the declaration is marked as @internal

packages/react/src/hooks/useLiveKitRoom.ts

@@ -6,6 +6,7 @@ import type { HTMLAttributes } from 'react';
 
 import type { LiveKitRoomProps } from '../components';
 import { mergeProps } from '../mergeProps';
+import { roomOptionsStringifyReplacer } from '../utils';
 
 const defaultRoomProps: Partial<LiveKitRoomProps> = {
   connect: true,
@@ -60,7 +61,7 @@ export function useLiveKitRoom<T extends HTMLElement>(
 
   React.useEffect(() => {
     setRoom(passedRoom ?? new Room(options));
-  }, [passedRoom]);
+  }, [passedRoom, JSON.stringify(options, roomOptionsStringifyReplacer)]);
 
   const htmlProps = React.useMemo(() => {
     const { className } = setupLiveKitRoom();

packages/react/src/prefabs/PreJoin.tsx

@@ -3,6 +3,7 @@ import type {
   LocalAudioTrack,
   LocalTrack,
   LocalVideoTrack,
+  TrackProcessor,
 } from 'livekit-client';
 import {
   createLocalAudioTrack,
@@ -22,6 +23,7 @@ import { ParticipantPlaceholder } from '../assets/images';
 import { useMediaDevices, usePersistentUserChoices } from '../hooks';
 import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 import { defaultUserChoices } from '@livekit/components-core';
+import { roomOptionsStringifyReplacer } from '../utils';
 
 /**
  * Props for the PreJoin component.
@@ -50,6 +52,7 @@ export interface PreJoinProps
    * @alpha
    */
   persistUserChoices?: boolean;
+  videoProcessor?: TrackProcessor<Track.Kind.Video>;
 }
 
 /** @alpha */
@@ -92,7 +95,7 @@ export function usePreviewTracks(
         track.stop();
       });
     };
-  }, [JSON.stringify(options), onError, trackLock]);
+  }, [JSON.stringify(options, roomOptionsStringifyReplacer), onError, trackLock]);
 
   return tracks;
 }
@@ -222,6 +225,7 @@ export function PreJoin({
   camLabel = 'Camera',
   userLabel = 'Username',
   persistUserChoices = true,
+  videoProcessor,
   ...htmlProps
 }: PreJoinProps) {
   const [userChoices, setUserChoices] = React.useState(defaultUserChoices);
@@ -279,7 +283,9 @@ export function PreJoin({
   const tracks = usePreviewTracks(
     {
       audio: audioEnabled ? { deviceId: initialUserChoices.audioDeviceId } : false,
-      video: videoEnabled ? { deviceId: initialUserChoices.videoDeviceId } : false,
+      video: videoEnabled
+        ? { deviceId: initialUserChoices.videoDeviceId, processor: videoProcessor }
+        : false,
     },
     onError,
   );

packages/react/src/utils.ts

@@ -60,3 +60,19 @@ export function warnAboutMissingStyles(el?: HTMLElement) {
     }
   }
 }
+
+/**
+ *
+ * @internal
+ * used to stringify room options to detect dependency changes for react hooks.
+ * Replaces processors and e2ee options with strings.
+ */
+export function roomOptionsStringifyReplacer(key: string, val: unknown) {
+  if (key === 'processor' && val && typeof val === 'object' && 'name' in val) {
+    return val.name;
+  }
+  if (key === 'e2ee' && val) {
+    return 'e2ee-enabled';
+  }
+  return val;
+}