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

Working with colors and grayscale


This recipe shows how to work with a filter that deals with the colors of the processed video. We will make a video less colorized and then make it black and white. This recipe can be used as a kind of simple special effect for a video.

How to do it…

Perform the following steps:

  1. Add the control button to the main web page of your application:

    <button onclick="doGrayScale()">do grayscale</button>
  2. Add an appropriate JavaScript function:

    function doGrayScale() {
      var v = document.getElementById("localVideo");
      v.style.webkitFilter="grayscale(50%)";
    };

    Here, localVideo is the ID property of the HTML video tag for the local video playback.

  3. Navigate your browser to the web page. You will first see an unprocessed video from the web camera. The following screenshot depicts such a situation:

  4. Now click on the do grayscale button—you will see that the image has become less colorized, as shown in the following screenshot:

    This happened because we applied the grayscale...