Make it possible to update transformer options without restarting the…

… processor (#32)

.changeset/large-eyes-explode.md

@@ -0,0 +1,5 @@
+---
+'@livekit/track-processors': minor
+---
+
+Replace ProcessorPipeline with ProcessorWrapper, allowing for direct transformer updates

.github/workflows/release.yaml

@@ -21,14 +21,14 @@ jobs:
           node-version: 16.x
 
       - name: Install Dependencies
-        run: yarn
+        run: pnpm i
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
-          publish: yarn release
+          publish: pnpm release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -3,33 +3,47 @@
 ## Install
 
 ```
-yarn add @livekit/track-processors
+npm add @livekit/track-processors
 ```
 
 ## Usage of prebuilt processors
 
+### Available processors
+
 This package exposes `BackgroundBlur` and `VirtualBackground` as pre-prepared processor pipelines.
 
+- `BackgroundBlur(blurRadius)`
+- `VirtualBackground(imagePath)`
+
+### Usage example
+
 ```ts
 import { BackgroundBlur } from '@livekit/track-processors';
 
 const videoTrack = await createLocalVideoTrack();
-await videoTrack.setProcessor(BackgroundBlur(10));
+const blur = BackgroundBlur(10);
+await videoTrack.setProcessor(blur);
 room.localParticipant.publishTrack(videoTrack);
 
 async function disableBackgroundBlur() {
   await videoTrack.stopProcessor();
 }
+
+async updateBlurRadius(radius) {
+  return blur.updateTransformerOptions({blurRadius: blur})
+}
+
+
 ```
 
-## Building your own processors
+## Developing your own processors
 
-A track processor consists of one or multiple transformers.
+A track processor is instantiated with a Transformer.
 
 ```ts
 // src/index.ts
 export const VirtualBackground = (imagePath: string) => {
-  const pipeline = new ProcessorPipeline([new BackgroundTransformer({ imagePath })]);
+  const pipeline = new ProcessorWrapper(new BackgroundTransformer({ imagePath }));
   return pipeline;
 };
 ```

example/index.html

@@ -92,6 +92,24 @@ <h2>LiveKit track processor sample</h2>
                 Flip Video
               </button>
 
+              <button
+                id="toggle-virtual-bg-button"
+                class="btn btn-secondary mt-1"
+                disabled
+                type="button"
+                onclick="appActions.toggleVirtualBackground()"
+              >
+                Toggle Background
+              </button>
+              <button
+                id="update-bg-button"
+                class="btn btn-secondary mt-1"
+                type="button"
+                onclick="appActions.updateVirtualBackgroundImage('/ali-kazal-tbw_KQE3Cbg-unsplash.jpg')"
+              >
+                Update Background Image
+              </button>
+
               <button
                 id="disconnect-room-button"
                 class="btn btn-danger mt-1"

example/sample.ts

@@ -32,6 +32,7 @@ const state = {
   defaultDevices: new Map<MediaDeviceKind, string>(),
   bitrateInterval: undefined as any,
   blur: BackgroundBlur(10, { delegate: 'GPU' }),
+  virtualBackground: VirtualBackground('/samantha-gades-BlIhVfXbi9s-unsplash.jpg'),
 };
 let currentRoom: Room | undefined;
 
@@ -266,7 +267,7 @@ const appActions = {
       const camTrack = currentRoom.localParticipant.getTrack(Track.Source.Camera)!
         .track as LocalVideoTrack;
       if (camTrack.getProcessor()?.name !== 'virtual-background') {
-        await camTrack.setProcessor(VirtualBackground('/samantha-gades-BlIhVfXbi9s-unsplash.jpg'));
+        await camTrack.setProcessor(state.virtualBackground);
       } else {
         await camTrack.stopProcessor();
       }
@@ -278,6 +279,26 @@ const appActions = {
       updateButtonsForPublishState();
     }
   },
+
+  updateVirtualBackgroundImage: async (imagePath: string) => {
+    if (!currentRoom) return;
+
+    try {
+      const camTrack = currentRoom.localParticipant.getTrack(Track.Source.Camera)!
+        .track as LocalVideoTrack;
+      await state.virtualBackground.updateTransformerOptions({ imagePath });
+      if (camTrack.getProcessor()?.name !== 'virtual-background') {
+        await camTrack.setProcessor(state.virtualBackground);
+      }
+    } catch (e: any) {
+      appendLog(`ERROR: ${e.message}`);
+    } finally {
+      setButtonDisabled('toggle-blur-button', false);
+      renderParticipant(currentRoom.localParticipant);
+      updateButtonsForPublishState();
+    }
+  },
+
   startAudio: () => {
     currentRoom?.startAudio();
   },

package.json

@@ -13,7 +13,7 @@
     "build": "tsup --onSuccess \"tsc --declaration --emitDeclarationOnly\"",
     "build-sample": "cd example && vite build",
     "lint": "eslint src",
-    "release": "yarn build && changeset publish",
+    "release": "pnpm build && changeset publish",
     "test": "jest",
     "sample": "vite serve example --port 8080 --open"
   },
@@ -23,10 +23,10 @@
   ],
   "dependencies": {
     "@mediapipe/holistic": "0.5.1675471629",
-    "@mediapipe/tasks-vision": "0.10.6"
+    "@mediapipe/tasks-vision": "0.10.9"
   },
   "peerDependencies": {
-    "livekit-client": "^1.12.0"
+    "livekit-client": "^1.12.0 || ^2.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",