Telnyx Video Processors

Telnyx Video Processors is a collection of video processing tools which can be used with Telnyx Video JavaScript SDK to apply transformations and filters to a VideoTrack.

   See it live here!

Features

The following Video Processors are provided to apply transformations and filters to a person's background.

• Virtual Background
• Background Blur

Prerequisites

• Node.js (v14+)
• NPM (v6+, comes installed with newer Node versions)

Installation

NPM

You can install directly from npm.

yarn add @telnyx/video-processors

Using this method, you can import @telnyx/video-processors like so:

Applying a background image in video

import { VideoProcessor, Camera } from '@telnyx/video-processors';

let videoElement = document.getElementById('video');
let canvasElement = document.getElementById('canvas');

const videoProcessor = new VideoProcessor();

const image = new Image(1280, 720);
image.src = './mansao.webp';

window.navigator.mediaDevices
  .getUserMedia({ video: true, audio: false })
  .then((stream) => {
    videoElement.srcObject = stream;
    videoElement.play().then(async () => {
      const { camera, canvasVideoTrack } =
        await videoProcessor.createVirtualBackgroundStream({
          videoElementId: videoElement.id,
          canvasElementId: 'canvas',
          frameRate: 20,
          image: image,
        });
      videoElement.srcObject = new MediaStream([canvasVideoTrack]);

      await camera.start();
    });
  });

Applying a background blur in video

import { VideoProcessor, Camera } from '@telnyx/video-processors';

let videoElement = document.getElementById('video');
let canvasElement = document.getElementById('canvas');

const videoProcessor = new VideoProcessor();

window.navigator.mediaDevices
  .getUserMedia({ video: true, audio: false })
  .then((stream) => {
    videoElement.srcObject = stream;
    videoElement.play().then(async () => {
      const { camera, canvasVideoTrack } =
        await videoProcessor.createGaussianBlurBackgroundStream({
          videoElementId: videoElement.id,
          canvasElementId: canvasElement.id,
          frameRate: 20,
          blurAmount: 10,
        });
      videoElement.srcObject = new MediaStream([canvasVideoTrack]);

      await camera.start();
    });
  });

Test Demo

Run yarn build Copy /lib folder into examples/ folder Navigate to examples/ folder Run npx lite-server Access the lite-server URL e.g. http://localhost:3***