Applying Effects to WebRTC Video in Real Time

Did you know you can apply effects to your WebRTC video stream using WebGL Shaders?

And quite easily I might add. This is a demo I assembled in about an hour:

That’s a real time video conference call and I applied an Edge Shader to achieve that effect you see there.

The code is up on Github for anyone to examine:

This demo depends on PubNub for managing the WebRTC back-and-forth. Be sure to get your PubNub API Keys:

Publish and Subscribe keys in an existing PubNub account


The gist of it all is to replace the video element with a ThreeJS canvas which has a plane geometry with the video as a texture.

Using a ShaderMaterial to wrap the texture and apply the Edge Shader we get the expected result and since we’re using GLSL shaders we are certain to be using GPU rather than CPU. Performance win-win.

Happy Coding!

This post originally appeared on our parent company AgilityFeat’s blog

  • Pingback: Advertising & CRM()

  • datagreed

    does it change the actual videostream that is being send to another client?


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2017 KLEO Template a premium and multipurpose theme from Seventh Queen

Log in with your credentials

Forgot your details?