podchat-video-modifier

1.0.4 • Public • Published

PodChatVideoModifier Class

The PodChatVideoModifier class provides powerful video processing capabilities that allow you to change video stream backgrounds dynamically, apply visual effects, and add reactions. This class is particularly useful in chat or conferencing applications to enhance video communication experiences.

Features

  • Dynamic Background Replacement: Replace video backgrounds with solid colors, images, or blur effects.
  • Segmentation: Leverages the MediaPipe Selfie Segmentation library for high-quality background segmentation.
  • Visual Effects: Apply grayscale, brightness, and contrast adjustments.
  • Reactions: Add animated reactions to the video stream.
  • Mobile Support: Automatically optimizes settings for mobile devices.

Installation

Usage

Importing the Class

import PodChatVideoModifier from "podchat-video-modifier";

Initializing the Class

Create an instance of the class by passing an optional chat agent:

const videoModifier = new PodChatVideoModifier({ chatAgent });

Changing the Background

videoModifier
  .setBackgroundColor('#0000FF') // Solid blue background
  .setBrightness(1.2) // Adjust brightness
  .setContrast(1.1) // Adjust contrast
  .changeBackground();

Adding Reactions

Add reactions like emojis:

videoModifier.addReaction('🎉', 100, 200, 3000); // Add a celebratory emoji

Setting Up a Preview

Generate a preview of the video modifications:

const previewStream = await videoModifier.makePreview();

Additional Configurations

  • Set FPS:

    videoModifier.setFps(30);
  • Apply Blur Effect:

    videoModifier.setBlur(5);
  • Apply Grayscale Effect:

    videoModifier.setGrayScale(true);

Background Options

Generate a list of available background options:

const backgroundOptions = videoModifier.backgroundList();

Background Types

  1. Colors:

    • #f9c0ab
    • #f4e0af
    • #a8cd89
    • #355f2e
  2. Images:

    • https://alireza5014.github.io/webrtc-bg-modifier/example/img/1.jpg
    • https://alireza5014.github.io/webrtc-bg-modifier/example/img/2.jpg
  3. Reactions:

    • 🎉, ❤️, 👍️, 😊, 😎, 👎

Example Project Setup

  1. Load the required MediaPipe library.
  2. Import and instantiate the PodChatVideoModifier class.
  3. Call appropriate methods to customize the video stream.

Notes

  • The segmentation feature requires the MediaPipe Selfie Segmentation library to be loaded.
  • Always ensure the video stream is properly initialized before applying modifications.

License

MIT License

Readme

Keywords

none

Package Sidebar

Install

npm i podchat-video-modifier

Weekly Downloads

130

Version

1.0.4

License

MIT

Unpacked Size

6.87 MB

Total Files

29

Last publish

Collaborators

  • persian402