Applying Effects to WebRTC Video in Real Time

WebRTCVentures_WebGLEffects_preview


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/

Publish and Subscribe keys in an existing PubNub account

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!

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

CONTACT US

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

Sending

©2017 AgilityFeat Inc, custom design and development firm and parent company of WebRTC.ventures

Log in with your credentials

Forgot your details?