@cloudflare/realtimekit-virtual-background 0.0.2-staging.2 → 0.0.2

package/README.md

@@ -4,10 +4,10 @@
     <img src="https://docs.realtime.cloudflare.com/logo/cf.svg" alt="Logo" width="120">
   </a>
 
-  <h3 align="center">RealtimeKit Video Background Manager</h3>
+  <h3 align="center">RealtimeKit Video Background Transformer</h3>
 
   <p align="center">
-    A Package that allows ease of use for RealtimeKit's video middlewares
+    A package that adds video background & blur to participant video feeds in your RealtimeKit Meetings.
     <br />
     <a href="https://docs.realtime.cloudflare.com"><strong>Explore the docs »</strong></a>
     <br />
@@ -38,7 +38,9 @@
 <!-- ABOUT THE PROJECT -->
 ## About The Project
 
-The goal of Video Background Transformer is to create RealtimeKit Meetings' VideoMiddlewares with ease and make it fun to play around with.
+This package provides the foundation to add video background and blur to a participant's video feed in your RealtimeKit Meeting with your custom UI implementation.
+
+If you are using the `rtk-meeting` component directly and prefer abstraction over this package, refer to [UI Kit Addons](https://www.npmjs.com/package/@cloudflare/realtimekit-ui-addons).
 
 ### Built With
 
@@ -49,24 +51,15 @@ The goal of Video Background Transformer is to create RealtimeKit Meetings' Vide
 <!-- GETTING STARTED -->
 ## Getting Started
 
-### Prerequisites
-* npm
-* Web Core Version >= 2.0 (Web Core, React Web Core, Angular Web Core etc.)
-* UI Kit Version >= 2.0 (UI Kit, React UI Kit, Angular UI Kit etc.)
-
 ### Installation
 
 ```sh
 npm install @cloudflare/realtimekit-virtual-background
 ```
 
-
-
 <!-- USAGE EXAMPLES -->
 ## Usage
 
-**_Note:_** Make sure that you are using the 2.x versions of Web Core & UI Kit.
-
 Disable the default per frame rendering of video middleware to improve speed and quality by letting this middleware control it on its own.
 
 ```ts
@@ -90,10 +83,11 @@ meeting.self.addVideoMiddleware(
     await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(imageUrl)
 );
 ```
-2. ```createBackgroundBlurVideoMiddleware``` expects ```blurLength``` as a parameter (4px by default) and blurs the background of the user by the given blurLength.
+
+2. ```createBackgroundBlurVideoMiddleware``` expects ```blurStrength``` (0-100) as a parameter (50% by default) and blurs the background of the user by the given blurStrength.
 ```ts
 meeting.self.addVideoMiddleware(
-  await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(10)
+  await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(50)
 );
 ``` 
 
@@ -125,25 +119,4 @@ const videoBackgroundTransformer = await RealtimeKitVideoBackgroundTransformer.i
     targetFps: 35,
   }
 });
-```
-
-<!-- CONTRIBUTING -->
-## Contributing
-
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-1. Fork the Project
-2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your Changes (`git commit -m 'feat: Add some AmazingFeature'`)
-4. Push to the Branch (`git push -u origin feature/AmazingFeature`)
-5. Open a Pull Request
-
-<!-- LICENSE -->
-## License
-
-Distributed under the MIT License. See [`LICENSE`](./LICENSE) for more information.
-
-
-
-<!-- MARKDOWN LINKS & IMAGES -->
-<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+```

package/package.json

@@ -1,7 +1,6 @@
 {
     "name": "@cloudflare/realtimekit-virtual-background",
-    "version": "0.0.2-staging.2",
-    "description": "A Package that allows ease of use for RealtimeKit's video middlewares",
+    "version": "0.0.2",
     "main": "./dist/index.cjs.js",
     "module": "./dist/index.es.js",
     "exports": {

package/types/client/RealtimeKitVideoBackgroundTransformer.d.ts

@@ -1,4 +1,4 @@
-import RealtimeKitMeeting from '@cloudflare/realtimekit';
+import RTKMeeting from '@cloudflare/realtimekit';
 import { SegmentationConfig } from '../core/helpers/segmentationHelper';
 import { TFLite } from '../core/hooks/useTFLite';
 export type BlendMode = 'screen' | 'linearDodge';
@@ -14,7 +14,7 @@ export type PostProcessingConfig = {
     blendMode: BlendMode;
 };
 export interface InitParams {
-    meeting: RealtimeKitMeeting;
+    meeting: RTKMeeting;
     segmentationConfig: SegmentationConfig;
     postProcessingConfig: PostProcessingConfig;
     tflite: TFLite;
@@ -28,7 +28,7 @@ export default class RealtimeKitVideoBackgroundTransformer {
      *  which can be used to create video middlewares for RealtimeKit Meetings.
      */
     static init({ meeting, segmentationConfig: passedSegmentationConfig, postProcessingConfig: passedPostProcessingConfig, }: {
-        meeting: RealtimeKitMeeting;
+        meeting: RTKMeeting;
         segmentationConfig?: Partial<SegmentationConfig>;
         postProcessingConfig?: Partial<PostProcessingConfig>;
     }): Promise<RealtimeKitVideoBackgroundTransformer>;