Modifying 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.