Blur and Background Replacement Example

JavaScript SDK
1

A lot of professional conferences are taking at home. In these occasions the user will want to hide their background to preserve the privacy.

There is a library publicly available that we can use for implementing this: @pexip/media-processor. But the best way to understand how it works is through and example:

GitHub repository: Media Processor Example

In this demo we will have a selector to choose the effect that we want to apply. By default No Effect is selected, so you will see the original camera feed:

none

If you change the selector to Blur, the selfie segmentation will be applied and you will see that the background is blurred.

blur

Finally, if you select Background Replacement Effect, you will see that the background is changed to the image located in public/backgrounds/background.png .

background

Feel free to clone the repository and apply it to your own projects.

2

The previous example was developed for React. In case you are using Angular, check the following example: GitHub - pexip/media-processor-example-angular: Angular example of the use of @pexip/media-processor to apply blur and background replacement in the local video.