---
title: Adding Effects to WebRTC Video
description: How to use WebGL to add real-time video effects to your WebRTC video chat
---

[WebRTC.ventures Blog](https://blog.webrtc.ventures)

# [Adding Effects to WebRTC Video](https://blog.webrtc.ventures/2015/08/adding-effects-to-webrtc)

 Written by [ArinSime](https://blog.webrtc.ventures/author/arinsime) | Aug 14, 2015 4:00:00 AM

## 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](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/](http://www.pubnub.com/get-started/)

<https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png>

## Resources

- [https://github.com/stephenlb/webrtc-sdk](https://github.com/stephenlb/webrtc-sdk)
- [http://stemkoski.github.io/Three.js/Video.html](http://stemkoski.github.io/Three.js/Video.html)
- [http://mrdoob.github.io/three.js/examples/webgl\_shader.html](http://mrdoob.github.io/three.js/examples/webgl_shader.html)

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](http://www.agilityfeat.com/blog/2015/08/did-you-know-using-webgl-shaders-on-webrtc-video)*

[View full post](https://blog.webrtc.ventures/2015/08/adding-effects-to-webrtc)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "ArinSime"
  },
  "dateModified" : "2024-04-03T18:40:12.488Z",
  "datePublished" : "2015-08-14T04:00:00Z",
  "headline" : "Applying Effects to WebRTC Video in Real Time",
  "image" : {
    "@type" : "ImageObject",
    "height" : 567,
    "url" : "https://45353883.fs1.hubspotusercontent-na1.net/hubfs/45353883/Imported_Blog_Media/WebRTCVentures_WebGLEffects_preview.png",
    "width" : 760
  },
  "mainEntityOfPage" : "https://blog.webrtc.ventures/2015/08/adding-effects-to-webrtc",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "WebRTC.ventures Blog"
  }
}
```