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); ...

Get Learning WebRTC now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.