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 saturation


In this recipe, we will cover the process of controlling the saturation of a video being captured from the web camera using WebRTC. Saturation is rarely used as a control available to users. Although for some kinds of applications it might be very useful.

How to do it…

Perform the following steps:

  1. Add a control element to you application's main web page—using this object we will change the saturation's level:

    Saturation
    <input type="range" oninput="changeSaturation(this.valueAsNumber);" value="0" step="0.1" min="0" max="10">
  2. Add an appropriate JavaScript function:

    function changeSaturation(val) {
      var v = document.getElementById("localVideo");
      v.style.webkitFilter="saturate(" + val + ")";
    };

    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 an unprocessed video from the web camera with normal saturation. The following screenshot depicts such a situation:

  4. On the left...