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:

https://github.com/agilityfeat/WebRTC-WebGL-Shader-Demo

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

http://www.pubnub.com/get-started/





Resources

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 RealTimeWeekly.co newsletter on real-time development with frameworks like WebRTC and WebSockets. First Name Last Name E-mail * Which list would you like to join? * AgilityFeat News RealTimeWeekly News Sign up now! Should be Empty:

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

Please enable JavaScript to view the comments powered by Disqus.

Disqus