In this part, we will see how to modify the media stream.

We can take this project even further. Most image sharing applications today have some set of filters that you can apply to your images to make them look even cooler. This is also possible on the Web using CSS filters to provide different effects. We can add some CSS classes that apply different filters to our <canvas> element:

<style>
      .grayscale {
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        -o-filter: grayscale(1);
        filter: grayscale(1);
      }

      .sepia {
        -webkit-filter: sepia(1);
        -moz-filter: sepia(1);
        -ms-filter: sepia(1);
        -o-filter: sepia(1);
        filter: sepia(1);
      }

      .invert {
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -ms-filter: invert(1);
        -o-filter: invert(1);
        filter: invert(1);
      }
    </style>

And, also some JavaScript to change the filter on click:

var filters = ['', 'grayscale', 'sepia', 'invert'],
      currentFilter = 0;
  document.querySelector('video').addEventListener('click', function (event) {
    if (streaming) {
      canvas.width = video.clientWidth;
      canvas.height = video.clientHeight;

      var context = canvas.getContext('2d');
      context.drawImage(video, 0, 0);

      currentFilter++;
      if(currentFilter > filters.length - 1) currentFilter = 0;
      canvas.className = filters[currentFilter];
    }
  });

When you load this page, your snapshots should change whenever you take a new snapshot of the camera. This is utilizing the power of CSS filters to modify what the canvas is outputting. The browser then takes care of everything for you, such as applying the filter and showing the new image.

With the access to apply a stream to the canvas, you have unlimited possibilities. The canvas is a low-level and powerful drawing tool, which enables features such as drawing lines, shapes, and text. For instance, add the following after the class name is assigned to the canvas to add some text to your images:

context.fillStyle = "white";
context.fillText("Hello World!", 10, 10);

When you capture an image, you should see the text—Hello World!—placed in the upper-left corner of the image. Feel free to change the text, size, or more by changing the way the code uses the Canvas API. This can be taken even further using another Canvas technology called WebGL. This technology supports the 3D rendering right inside the browser and is quite an amazing accomplishment for JavaScript. You can utilize a streaming video source as a texture in WebGL and apply video to objects in the 3D space! There are thousands of interesting examples of this technology on the Web and I suggest you to look around a bit to see just what you can do in the browser.

Self-test questions

Q1. The browser will allow camera and microphone access even if the current page is opened as a file and not being served from a web server. True or false?

Q2. Which one of the following is not a correct browser prefix?

  1. webkitGetUserMedia
  2. mozGetUserMedia
  3. blinkGetUserMedia
  4. msGetUserMedia

Q3. The getUserMedia API will call the third argument as a function if an error happens while obtaining the camera or microphone stream. True or false?

Q4. Which one of the following does constraining the video stream not help with?

  1. Securing the video stream
  2. Saving processing power
  3. Providing a good user experience
  4. Saving bandwidth

Q5. The getUserMedia API can be combined with the Canvas API and CSS filters to add even more features to your application. True or false?

Summary

You should now have a firm grasp of the different ways to capture the microphone and camera streams. We also covered how to modify the constraints of the stream and select them from a set of devices. Our last project brought all of this together and added filters and image capture to create a unique photo booth application.

In this chapter, we covered how to get access to media devices, constrain the media stream, handle multiple devices, and modify the stream data.

The MediaStream specification is a constantly moving target. There are already plans to add a wealth of new features to the API enabling even more intriguing applications built on the Web. Always keep up with the latest specifications and support from the different browser vendors while developing WebRTC applications.

Although it may not seem like much, these techniques will help us in the future. Then knowing how to modify the input stream to ensure your WebRTC application is performing correctly will be the key.