Book Image

WebRTC Cookbook

By : Andrii Sergiienko
Book Image

WebRTC Cookbook

By: Andrii Sergiienko

Overview of this book

Table of Contents (15 chapters)
WebRTC Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Implementing the blur effect


This recipe dives into the implementation of the blur effect. If you have worked on graphic editing computer software, then you are likely familiar with this effect.

How to do it…

The following steps will help you understand how to implement the blur effect:

  1. Add a control element to the index web page of your application—using this object we will control the blur effect:

    Blur
    <input type="range" oninput="doBlur(this.valueAsNumber);" value="0" step="1" min="0" max="15">
  2. Add an appropriate JavaScript function:

    function doBlur(val) {
      var v = document.getElementById("localVideo");
      v.style.webkitFilter="blur(" + val + "px)";
    };

    We have added a px postfix for the filter's value—this is because of the blur's intensity that is setting in pixels. Here, localVideo is the ID property of the HTML video tag for the local video playback.

  3. Navigate your web browser to the web page. You will first see the raw, unprocessed video from the web camera, with no filter applied. The...