Apply filter to HTML5 video without CSS

Question

I'm looking for a way to apply some filters to a video (took from webcamera in real time), but without using any kind of CSS class.

I do not want to create a CSS class like:

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

And apply it like document.getElementById("myvideo").className = "blur". No, I'm not looking for this. I need to embed this filter into video so users can quit them. (using injected CSS is not an option).

To clearify myself: I'm not looking for solutions like this http://html5-demos.appspot.com/static/css/filters/index.html

Is there any way to do this?

Thanks

EDIT:

I have code like I post before, where I have a CSS class that I assign to my canvas to apply a filter whenever I want

Problem? Users can disable injected CSS using Developer Tools included in Chrome, or using Firebug (by disabling classes, or elements individually).

So I need a solution to apply filters like these, but without injecting CSS into my canvas element.

Answer 1

You have to apply your filters to the video data before delivering it to the browser. There are lots of ways you could do this, for example: ffmpeg supports various filters (including blur).

Anything you can do on the client can be undone by the user (the user controls the client, you don't).

Answer 2

Check out Seriously.js for a huge pile of filters that can target a canvas, video, img or other html element!

Answer 3

If you like to apply filter to a video stream from getUserMedia, you can show the video in a <Canvas> instead of <Video>.

I understand that this is not a very good solution though since it will eat alot of CPU. But you will have few limitations in what filters you can apply.