Agility Feat - Custom Software Development

Did you know? – Applying Effects to WebRTC Vide...

Posted By:

Arin Sime

Did you know? – 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!

Are you ready for the real-time web?

Sign up now for regular updates from our blog and our newsletter on real-time development with frameworks like WebRTC and WebSockets.

  • Should be Empty:

  • RealTimeWeekly subscribers get a free copy of our e-book!

    comments powered by Disqus