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

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

• javascript
• html
• video
• getusermedia

Share Improve this question Follow edited Jan 31, 2014 at 17:29 Fran Verona asked Jan 31, 2014 at 17:21 Fran VeronaFran Verona 5,47666 gold badges4848 silver badges8787 bronze badges 7

• could you explain a little more about what you mean by "embed this filter into video so users can quit them"? – Dpeif Commented Jan 31, 2014 at 17:25
• you can do stuff like that in a <canvas>, but it's going to be a CPU hog... – dandavis Commented Jan 31, 2014 at 17:28
• I edited my own post. (Downvoted? really? why?) – Fran Verona Commented Jan 31, 2014 at 17:29
• 1 You want a client-side solution that the user can't turn off, ever? That seems unlikely. (Also, why do you need to prevent users from doing that in the first place? So what if they can turn off blurring using some tool?) – Pekka Commented Jan 31, 2014 at 17:33
• 1 @Dpeif — I think he means "can't". – Quentin Commented Jan 31, 2014 at 17:33

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

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

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

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.