@cloudflare/realtimekit-virtual-background 0.0.2-staging.1 → 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.1",
-    "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>;

package/README_DEV_HELP.md

@@ -1,33 +0,0 @@
-### How it is made?
-
-We are using https://github.com/Volcomix/virtual-background (Demo: https://volcomix.github.io/virtual-background/) WebGL pipeline for Chrome & Firefox, whereas using 2d canvas rendering pipeline for Safari and other such Webkit based browsers.
-
-Commit at which RealtimeKit has branched from this repo is: `99dfe4a912573a1440236a9762dcb415b86d216a`, of main branch.
-
-We have 2 pipelines because WebGL pipeline is performant whereas 2d Canvas rendering is comparatively not performant, however 2d canvas rendering based pipeline is able to draw to canvas even when tab is backgrounded in Safari which is not the case with WebGL thus making WebGL pipeline useless in Safari once user's tab is backgrounded.
-
-There are very minimal changes made to the core of Volcomix repo. If you want to check the difference between our files and theirs, diff can be checked at https://www.diffchecker.com/. We have kept the file names mostly the same for ease of use.
-
-We have mostly ignored the linting in Volcomix repo files to ensure minimum diff if we ever want to import more changes. React code was stripped to ensure compatibility with all JS frameworks.
-
-Repo's tflite models are hosted at `https://dyte-plugins.s3.ap-south-1.amazonaws.com/tf-assets/models/*`.
-
-### Caveats
-
-1. For WebKit based browsers, we would be using 2d canvas rendering instead of webgl because Safari doesn't support WebGL canvas rendering in the backgrounded tab.
-
-2. For local development, please uncomment the following line in index.html.
-```
-    <!-- <script type="module" src="/src/index.ts"></script> // For local -->
-```
-
-And comment out the following.
-
-```
-<script src="./dist/index.iife.js"></script>
-```
-
-This was done so that the repo could be deployed to Vercel without any issues.
-
-If you don't want to change index.html, you will have to perform `npm run build` after every code change.
-