@dytesdk/video-background-transformer

Dyte Video Background Manager

A Package that allows ease of use for Dyte's video middlewares
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License

About The Project

The goal of Video Background Transformer is to create Dyte Meetings' VideoMiddlewares with ease and make it fun to play around with.

Built With

• Dyte
• Typescript

Getting Started

Prerequisites

• npm

Installation

npm install @dytesdk/video-background-transformer

Usage

A videoBackgroundTransformer object can be created using the DyteVideoBackgroundTransformer.init() method.

const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();

Types of middlewares exposed by videoBackgroundTransformer:

1. createStaticBackgroundVideoMiddleware expects an imageUrl as a parameter and then creates the image the background for the current user.

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.

meeting.self.addVideoMiddleware(await dyteVideoBackgroundTransformer.createBackgroundBlurVideoMiddleware(10))

Note: Some browsers or their old versions might not have support for WebGL or the browser APIs that this package uses. We would recommend checking the support beforehand using:

if(DyteVideoBackgroundTransformer.isSupported()){
  const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();
  meeting.self.addVideoMiddleware(
    await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(`REPLACE_THIS_WITH_IMAGE_URL`)
  );
}

Note: Image URLs must allow CORS to avoid tainting the canvas. You can find such images on https://unsplash.com/ & https://imgur.com.

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

Distributed under the MIT License. See LICENSE for more information.