{"id":1144,"date":"2015-08-14T11:22:28","date_gmt":"2015-08-14T15:22:28","guid":{"rendered":"http:\/\/blog.agilityfeat.com\/?p=1144"},"modified":"2020-11-09T23:24:04","modified_gmt":"2020-11-09T23:24:04","slug":"did-you-know-using-webgl-shaders-on-webrtc-video","status":"publish","type":"post","link":"https:\/\/agilityfeatpanama.com\/en\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/","title":{"rendered":"Did you know? &#8211; Applying Effects to WebRTC Video in Real Time"},"content":{"rendered":"<p><script src=\"https:\/\/platform.vine.co\/static\/scripts\/embed.js\"><\/script><\/p>\n<p><strong>Did you know you can apply effects to your WebRTC video stream using WebGL Shaders?<\/strong> And quite easily I might add.<\/p>\n<p>This is a demo I assembled in about an hour:<\/p>\n<p><script src=\"https:\/\/s3-us-west-2.amazonaws.com\/blogs-scripts\/vine\/vine-2015-08-004.js\"><\/script><\/p>\n<p>That&#8217;s a real time video conference call and I applied an <strong>Edge Shader<\/strong> to achieve that effect you see there.<\/p>\n<p>The code is up on Github for anyone to examine:<\/p>\n<p><a href=\"https:\/\/github.com\/agilityfeat\/WebRTC-WebGL-Shader-Demo\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/agilityfeat\/WebRTC-WebGL-Shader-Demo<\/a><\/p>\n<p>This demo depends on PubNub for managing the WebRTC back-and-forth. Be sure to get your PubNub API Keys: <\/p>\n<p><a href=\"http:\/\/www.pubnub.com\/get-started\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.pubnub.com\/get-started\/<\/a><\/p>\n<p><a href=\"\/wp-content\/uploads\/2015\/08\/pubnub_pub_sub_keys.png\"><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2015\/08\/pubnub_pub_sub_keys.png\" alt=\"Publish and Subscribe keys in an existing PubNub account\" style=\"max-width:500px; max-height:416px;\" width=\"500\" height=\"416\"\/><\/a><br clear=\"left\"\/><\/p>\n<h2>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/github.com\/stephenlb\/webrtc-sdk\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/stephenlb\/webrtc-sdk<\/a><\/li>\n<li><a href=\"http:\/\/stemkoski.github.io\/Three.js\/Video.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/stemkoski.github.io\/Three.js\/Video.html<\/a><\/li>\n<li><a href=\"http:\/\/mrdoob.github.io\/three.js\/examples\/webgl_shader.html\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/mrdoob.github.io\/three.js\/examples\/webgl_shader.html<\/a><\/li>\n<\/ul>\n<p>The gist of it all is to replace the <strong>video<\/strong> element with a ThreeJS canvas which has a plane geometry with the video as a texture.<\/p>\n<p>Using a <strong>ShaderMaterial<\/strong> to wrap the texture and apply the <strong>Edge Shader<\/strong> we get the expected result and since we&#8217;re using GLSL shaders we are certain to be using GPU rather than CPU. Performance win-win.<\/p>\n<p>Happy Coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>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&#8217;s a real time video conference call and I applied an Edge Shader to achieve that effect you see there. The code is up [&hellip;]<\/p>","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[128,57],"tags":[146,117],"jetpack_featured_media_url":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Did you know? - Applying Effects to WebRTC Video in Real Time - AgilityFeat Panama Software Test Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/agilityfeatpanama.com\/en\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Did you know? - Applying Effects to WebRTC Video in Real Time - AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"og:description\" content=\"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&#8217;s a real time video conference call and I applied an Edge Shader to achieve that effect you see there. The code is up [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agilityfeatpanama.com\/en\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/\" \/>\n<meta property=\"og:site_name\" content=\"AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-14T15:22:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-09T23:24:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agilityfeatpanama.com\/wp-content\/uploads\/2015\/08\/pubnub_pub_sub_keys.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/34.200.113.64\/#website\",\"url\":\"https:\/\/34.200.113.64\/\",\"name\":\"AgilityFeat Panama Software Test Center\",\"description\":\"AgilityFeat Panama offers customized, multilevel web and mobile software testing for a variety of industries.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/34.200.113.64\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/agilityfeatpanama.com\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\/wp-content\/uploads\/2015\/08\/pubnub_pub_sub_keys.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/agilityfeatpanama.com\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/#webpage\",\"url\":\"http:\/\/agilityfeatpanama.com\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/\",\"name\":\"Did you know? - Applying Effects to WebRTC Video in Real Time - AgilityFeat Panama Software Test Center\",\"isPartOf\":{\"@id\":\"https:\/\/34.200.113.64\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/agilityfeatpanama.com\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/#primaryimage\"},\"datePublished\":\"2015-08-14T15:22:28+00:00\",\"dateModified\":\"2020-11-09T23:24:04+00:00\",\"author\":{\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c34873e9bee22a4aab19b8a0e800aad0\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/agilityfeatpanama.com\/blog\/2015\/08\/did-you-know-using-webgl-shaders-on-webrtc-video\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c34873e9bee22a4aab19b8a0e800aad0\",\"name\":\"Jean\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/34.200.113.64\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Jean\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1144"}],"collection":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/comments?post=1144"}],"version-history":[{"count":1,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1144\/revisions"}],"predecessor-version":[{"id":1320,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/1144\/revisions\/1320"}],"wp:attachment":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/media?parent=1144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/categories?post=1144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/tags?post=1144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}