Add @livekit/track-processors example (#951)

Author: lukasIO

examples/nextjs/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
+    "@livekit/track-processors": "^0.3.2",
     "livekit-client": "^2.4.0",
     "livekit-server-sdk": "^1.2.7",
     "next": "^12.3.4",

examples/nextjs/pages/index.tsx

@@ -17,6 +17,10 @@ const EXAMPLE_ROUTES = {
     title: 'Clubhouse clone build with LiveKit components',
     href: () => `/clubhouse`,
   },
+  processors: {
+    title: 'Example usage of @livekit/track-processors for background blur',
+    href: () => `/processors`,
+  },
 } as const;
 
 const Home: NextPage = () => {

examples/nextjs/pages/processors.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { setLogLevel } from '@livekit/components-core';
+import {
+  GridLayout,
+  LiveKitRoom,
+  ParticipantTile,
+  TrackRefContext,
+  useLocalParticipant,
+  useToken,
+  useTracks,
+} from '@livekit/components-react';
+import type { NextPage } from 'next';
+import { ControlBarControls } from '@livekit/components-react';
+import { LocalVideoTrack, Track } from 'livekit-client';
+import { BackgroundBlur } from '@livekit/track-processors';
+
+function Stage() {
+  const cameraTracks = useTracks([Track.Source.Camera]);
+  const screenShareTrackRef = useTracks([Track.Source.ScreenShare])[0];
+
+  const [blurEnabled, setBlurEnabled] = React.useState(false);
+  const [processorPending, setProcessorPending] = React.useState(false);
+  const { cameraTrack } = useLocalParticipant();
+
+  React.useEffect(() => {
+    const localCamTrack = cameraTrack?.track as LocalVideoTrack | undefined;
+    if (localCamTrack) {
+      setProcessorPending(true);
+      try {
+        if (blurEnabled && !localCamTrack.getProcessor()) {
+          localCamTrack.setProcessor(BackgroundBlur());
+        } else if (!blurEnabled) {
+          localCamTrack.stopProcessor();
+        }
+      } finally {
+        setProcessorPending(false);
+      }
+    }
+  }, [blurEnabled, cameraTrack]);
+
+  return (
+    <>
+      <button
+        className="lk-button"
+        disabled={processorPending}
+        onClick={() => setBlurEnabled((enabled) => !enabled)}
+      >
+        Toggle Blur
+      </button>
+      {screenShareTrackRef && <ParticipantTile trackRef={screenShareTrackRef} />}
+      <GridLayout tracks={cameraTracks}>
+        <TrackRefContext.Consumer>
+          {(trackRef) => <ParticipantTile trackRef={trackRef} />}
+        </TrackRefContext.Consumer>
+      </GridLayout>
+    </>
+  );
+}
+
+const ProcessorsExample: NextPage = () => {
+  const params = typeof window !== 'undefined' ? new URLSearchParams(location.search) : null;
+  const roomName = params?.get('room') ?? 'test-room';
+  const userIdentity = params?.get('user') ?? 'test-identity';
+
+  const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, {
+    userInfo: {
+      identity: userIdentity,
+      name: userIdentity,
+    },
+  });
+
+  return (
+    <div data-lk-theme="default" style={{ height: '100vh' }}>
+      <LiveKitRoom
+        video={true}
+        audio={false}
+        token={token}
+        connect={true}
+        serverUrl={process.env.NEXT_PUBLIC_LK_SERVER_URL}
+      >
+        <Stage />
+      </LiveKitRoom>
+    </div>
+  );
+};
+
+export default ProcessorsExample;