@webex/web-media-effects
Advanced tools
@webex/web-media-effects - npm Package Compare versions
Comparing version 2.19.0 to 2.20.0
| { | ||
| "name": "@webex/web-media-effects", | ||
| "version": "2.19.0", | ||
| "version": "2.20.0", | ||
| "description": "Media effects for JS SDKs", | ||
@@ -18,3 +18,3 @@ "source": "src/index.ts", | ||
| "prepare": "husky install", | ||
| "prepublishOnly": "node scripts/prep-for-npm.js", | ||
| "prepublishOnly": "node scripts/prep-for-npm.js && npm run types:verify", | ||
| "test": "run-s build test:*", | ||
@@ -30,2 +30,4 @@ "test:coverage": "jest --coverage", | ||
| "transpile:watch": "tsc --watch", | ||
| "types:publish": "cd types && npm publish", | ||
| "types:verify": "tsc --project tsconfig.json --noEmit", | ||
| "watch": "rollup -c ./rollup.config.js -w" | ||
@@ -32,0 +34,0 @@ }, |
@@ -6,3 +6,3 @@ | ||
| # Introduction | ||
| ## Introduction | ||
@@ -15,3 +15,3 @@ There are three effects included in this library: | ||
| ## Common Methods | ||
| ### Common Methods | ||
@@ -42,7 +42,7 @@ The effects are built on top of a plugin interface that makes building and extending effects more straight-forward. | ||
| ## Preloading Assets | ||
| ### Preloading Assets | ||
| In an effort to optimize startup time for applying media effects, there is a preloading mechanism. This mechanism fetches critical assets, such as ONNX models for image segmentation, WASM modules for audio processing, and web workers for background processing, in advance of media availability. This ensures smoother integration of effects once the media stream is ready to improve the overall user experience. Assets can be preloaded using either a provided factory function or directly using `preloadAssets()` API. | ||
| ### Using Factory Function for Asynchronous Initialization | ||
| #### Using Factory Function for Asynchronous Initialization | ||
@@ -70,3 +70,3 @@ The library includes factory functions for scenarios that require asynchronous operations. Utilizing the async/await pattern, these functions provide a simple method for creating effects with their assets already preloaded. The factory function's second parameter is a boolean that indicates whether the assets should be preloaded. | ||
| ### Direct Use of preloadAssets() API | ||
| #### Direct Use of preloadAssets() API | ||
@@ -85,3 +85,3 @@ For more fine-grained control over the preloading process, you can also directly call the `preloadAssets()` method on each effect instance. This approach allows you to manually manage when and how assets are preloaded, providing flexibility to fit various application architectures and workflows: | ||
| # Virtual Background | ||
| ## Virtual Background | ||
@@ -96,3 +96,3 @@ The virtual background effect is a wrapper around [ladon-ts](https://www.npmjs.com/package/@webex/ladon-ts) that provides a virtual background for video calling. The virtual background may be an image, an mp4 video, or the user's background with blur applied. The blur option allows for varied levels of strength and quality where higher levels require more compute resources. | ||
| ## Options | ||
| ### Options | ||
@@ -116,3 +116,3 @@ There are a few different options that can be supplied to the constructor or `updateOptions()` method that affect the behavior | ||
| ### Mode | ||
| #### Mode | ||
@@ -125,3 +125,3 @@ The virtual background plugin applies a background effect to the original media stream by performing image segmentation on the incoming video frames. The plugin is capable of applying three different kinds of effects called modes: **background blur**, **background image replacement**, and **background video replacement**. | ||
| ## Usage | ||
| ### Usage | ||
@@ -149,7 +149,7 @@ Supply a video stream to the effect and when loaded, it will return a new stream with the effect applied. | ||
| ## Rate Estimator | ||
| ### Rate Estimator | ||
| The Rate Estimator is a utility designed to monitor and adapt to changes in the processing rate of media effects, such as frame rates for video effects. It provides insights into performance, allowing applications to respond dynamically to varying processing capabilities by emitting events based on the processing rate's performance against defined thresholds. | ||
| ### Configuration Options | ||
| #### Configuration Options | ||
@@ -166,3 +166,3 @@ Configure the Rate Estimator with the following options to tailor its behavior to your application's needs: | ||
| ### Events | ||
| #### Events | ||
@@ -177,3 +177,3 @@ The Rate Estimator emits events to indicate changes in the processing rate. You can use string values or, if using TypeScript, enums provided by `RateEstimatorEvent`. | ||
| ### Statuses | ||
| #### Statuses | ||
@@ -190,3 +190,3 @@ The Rate Estimator can be in one of the following statuses, accessible as strings or through the `RateEstimatorStatus` TypeScript enum: | ||
| ### Usage | ||
| #### Usage | ||
@@ -224,3 +224,3 @@ Instantiate the Rate Estimator with your target rate and optional configuration settings. Add timestamps periodically as frames or tasks are processed to enable the estimator to assess the current rate. | ||
| # Noise Reduction | ||
| ## Noise Reduction | ||
@@ -233,3 +233,3 @@ The noise reduction effect removes background noise from an audio stream to provide clear audio for calling. | ||
| ## Options | ||
| ### Options | ||
@@ -247,3 +247,3 @@ There are a few different options that can be supplied to the constructor or `updateOptions()` method that affect the behavior | ||
| ## Supported Bitrates | ||
| ### Supported Bitrates | ||
@@ -258,3 +258,3 @@ The noise reduction effect supports the following audio bitrates: | ||
| ## Usage | ||
| ### Usage | ||
@@ -279,7 +279,55 @@ Supply an audio track or stream to the effect, the effect will handle updating the stream on enable/disable. In the case of a track being passed, listen to the `'track-updated'` event to receive the updated track on enable/disable. | ||
| # Example | ||
| ## Publishing and Using TypeScript Definitions | ||
| The TypeScript definitions for Web Media Effects are maintained in a separate package to allow developers to use the types without importing the entire library. This package is published under the scope `@webex` on npm as `@webex/web-media-effects-types`. | ||
| ### Steps to Publish | ||
| 1. **Prepare the Types**: Run the prepare script to ensure that the latest `index.d.ts` is copied to the types directory and is ready for publication. | ||
| ```bash | ||
| npm run prepare | ||
| ``` | ||
| 2. **Publish the Package**: Navigate to the types directory and use npm to publish: | ||
| ```bash | ||
| cd types | ||
| npm publish | ||
| ``` | ||
| Ensure you are logged into npm with an account that has permissions to publish under the `@webex` scope. | ||
| ### GitHub Actions Automation | ||
| To automate the publishing process, GitHub Actions workflows are configured to handle the deployment of the types package upon changes to the main branch or manually via `workflow_dispatch` event. This ensures that the types are consistently updated and versioned in alignment with the source library. | ||
| ## Using the Published Types | ||
| Once published, the TypeScript definitions can be easily integrated into any TypeScript project. | ||
| 1. **Install the Types Package**: | ||
| To add the types to your project, run: | ||
| ```bash | ||
| npm install --save-dev @webex/web-media-effects-types | ||
| ``` | ||
| 2. **Configure TypeScript**: | ||
| In your `tsconfig.json`, ensure that your type roots or type references are configured to include the installed types: | ||
| ```json | ||
| { | ||
| "compilerOptions": { | ||
| "typeRoots": ["./node_modules/@types", "./node_modules/@webex/web-media-effects-types"] | ||
| } | ||
| } | ||
| ``` | ||
| Alternatively, you can use a direct reference in your TypeScript file if needed: | ||
| ```typescript | ||
| /// <reference types="@webex/web-media-effects-types" /> | ||
| ``` | ||
| ## Example | ||
| The example app included in this repo is designed to help test functionality and troubleshoot issues. You can run the example app by following the instructions in the [README](example/README.md) in the example folder. You can also view a live example at https://effects.webex.com. | ||
| # Development | ||
| ## Development | ||
@@ -291,3 +339,3 @@ 1. Run `yarn` to install dependencies. | ||
| ### Visual Studio Code | ||
| #### Visual Studio Code | ||
@@ -294,0 +342,0 @@ Install the recommended extensions when first opening the workspace (there should be a prompt). These plugins will help maintain high code quality and consistency across the project. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.13%
1565011
- Number of lines in readme file
- increased by17.14%
328