# Blur and Background Replacement Example

**URL:** <https://community.pexip.com/t/blur-and-background-replacement-example/266>\
**Category:** JavaScript SDK\
**Created:** [June 12, 2024, 1:39pm UTC](https://community.pexip.com/t/blur-and-background-replacement-example/266 "2024-06-12T13:39:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcos.cereijo](https://dub1.discourse-cdn.com/flex005/user_avatar/community.pexip.com/marcos.cereijo/32/14_2.png) [@marcos.cereijo](https://community.pexip.com/u/marcos.cereijo)\
**Post date:** [June 12, 2024, 1:39pm UTC](https://community.pexip.com/t/blur-and-background-replacement-example/266/1 "2024-06-12T13:39:33Z")

</div>

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](https://www.npmjs.com/package/@pexip/media-processor). But the best way to understand how it works is through and example:

GitHub repository: [Media Processor Example](https://github.com/pexip/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](https://europe1.discourse-cdn.com/flex005/uploads/pexip/original/1X/781dac7e3d298f46193b72545b92c5012348a274.png)

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

![blur](https://europe1.discourse-cdn.com/flex005/uploads/pexip/original/1X/69de8a44d00383c1b579fd976dfbc50598dab7ee.png)

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](https://europe1.discourse-cdn.com/flex005/uploads/pexip/original/1X/46903ef76f0fd73788e22747f74723342400db49.png)

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

---

<div class="post-metadata">

**Author:** ![marcos.cereijo](https://dub1.discourse-cdn.com/flex005/user_avatar/community.pexip.com/marcos.cereijo/32/14_2.png) [@marcos.cereijo](https://community.pexip.com/u/marcos.cereijo)\
**Post date:** [June 19, 2024, 2:35pm UTC](https://community.pexip.com/t/blur-and-background-replacement-example/266/2 "2024-06-19T14:35:11Z")

</div>

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.](https://github.com/pexip/media-processor-example-angular)