{"id":735,"date":"2013-10-24T08:19:23","date_gmt":"2013-10-24T12:19:23","guid":{"rendered":"http:\/\/blog.agilityfeat.com\/?p=735"},"modified":"2013-10-24T08:19:23","modified_gmt":"2013-10-24T12:19:23","slug":"10-webrtc-resources","status":"publish","type":"post","link":"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/","title":{"rendered":"10 Resources for the new WebRTC standard"},"content":{"rendered":"<h3>Bringing Real Time Communications to the browser<\/h3>\n<p><a href=\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/Screen-Shot-2013-10-24-at-4.50.46-AM.png\"><img loading=\"lazy\" src=\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/Screen-Shot-2013-10-24-at-4.50.46-AM.png\" alt=\"Screen Shot 2013-10-24 at 4.50.46 AM\" width=\"474\" height=\"354\" class=\"alignleft size-full wp-image-736\" \/><\/a><a href=\"http:\/\/www.webrtc.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebRTC<\/a> was one of the hot topics at the <a href=\"http:\/\/html5devconf.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 Developers Conference<\/a> that I attended this week, and for good reason.  WebRTC is a promising new standard that makes it easier for you to incorporate peer to peer exchange of video, audio, and data directly between two client browsers.<\/p>\n<p>What exactly does that mean?  The simplest example that people give is it allows you to create your own version of Skype or GoToMeeting directly in your browser.  With a pretty small amount of code you can request that a user share their video and audio with you, and you can share the same with them.  Suddenly you have telepresence built right into your browser!<\/p>\n<h3>It\u2019s not just for teleconferences<\/h3>\n<p>But WebRTC is about more than videoconferencing and customer support applications.  The DataChannels functionality also makes it easier to exchange data in a peer to peer network, and can be used to enable cool applications like real time gaming or data exchange through the browser.<\/p>\n<p>In future posts, I\u2019ll cover more aspects of how WebRTC will rock the world of web applications.  For now, just take my word on it.  Or get started on this long list of resources I compiled from presenters at the October 2013 HTML5 Developers Conference.<\/p>\n<h3>10 Resources to learn more about WebRTC<\/h3>\n<p>Keep in mind that WebRTC is very much on the bleeding edge of web standards right now.  As I write this it exists primarily in the latest versions of Chrome and Firefox, but the capabilities are literally growing every week.  So please keep in mind that this list may get out of date pretty quickly, but it\u2019s a starting point at least.<\/p>\n<h3>#1 Watch &#8211; Introduction to WebRTC apps<\/h3>\n<p><iframe width=\"420\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/3Ifbqaw5l_I\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>As presented by <a href=\"https:\/\/twitter.com\/cwilso\" target=\"_blank\" rel=\"noopener noreferrer\">Chris Wilson<\/a> of Google at the <a href=\"http:\/\/www.meetup.com\/sfhtml5\/\" target=\"_blank\" rel=\"noopener noreferrer\">San Francisco HTML5 Meetup<\/a><br \/>\nSlides available here: <a href=\"http:\/\/webrtcintro.appspot.com\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/webrtcintro.appspot.com<\/a><\/p>\n<p>#2 Watch &#8211; Practical guide to building WebRTC apps:<\/p>\n<p><iframe width=\"420\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/4KXABSYmKXs\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>As presented by Ben Line, CEO of <a href=\"https:\/\/vline.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">vLine<\/a> at the SF HTML5 Meetup group.  Slides available at <a href=\"http:\/\/www.slideshare.net\/vline\/a-practical\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.slideshare.net\/vline\/a-practical<\/a><\/p>\n<h3>#3 Play \u2013 Try out a sample video chat app<\/h3>\n<p>Don\u2019t forget that you may need the latest version of Chrome or Firefox in order to use any of the tools in this list.  Even better is to use the nightly releases of those browsers since they are regularly releasing changes to their implementations of WebRTC.<\/p>\n<p><a href=\"https:\/\/talky.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Talky.io Free video chat demo<\/a> (This is the app where I took the screen shot at the top of this post of me using the video capture tool in my browser)<\/p>\n<h3>#4 Dig Deeper \u2013 with the standard and code<\/h3>\n<p>Standard and background info posted at: <a href=\"http:\/\/www.webrtc.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.webrtc.org\/<\/a><\/p>\n<p><a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webrtc\/basics\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 Rocks tutorial on WebRTC<\/a><\/p>\n<h3>#5 More Watching \u2013 Real Time Conf Videos<\/h3>\n<p>You missed the Real Time Conf that recently happened in Portland, but they have posted some videos from the conference at their site.<\/p>\n<p><a href=\"http:\/\/2013.realtimeconf.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">2013.realtimeconf.com<\/a><\/p>\n<h3>#6 Be Inspired \u2013 PeerCDN<\/h3>\n<p>Very interesting example of what can be done with the DataChannel \u2013 remember, WebRTC is not all about the video!<\/p>\n<p><a href=\"https:\/\/peercdn.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Peercdn.com<\/a><\/p>\n<h3>#7 Pause \u2013 and Think<\/h3>\n<p>Your head should be swimming right now, but your creativity is the best resource you have going for you.  Take a moment and just consider how this could affect your industry.  Not every web application is going to use these new technologies, but many will and your competitors or some upstart may just use this to completely disrupt your market.  What new possibilities does this open up for your business?<\/p>\n<h3>#8 Play \u2013 Multiplayer gaming over WebRTC<\/h3>\n<p><img loading=\"lazy\" src=\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/Screen-Shot-2013-10-24-at-4.56.13-AM.png\" alt=\"Screen Shot 2013-10-24 at 4.56.13 AM\" width=\"758\" height=\"396\" class=\"alignleft size-full wp-image-737\" \/><br clear=\"left\"\/><\/p>\n<p>Mozilla created this multiplayer real-time 1st person shooter game called <a href=\"https:\/\/developer.cdn.mozilla.net\/media\/uploads\/demos\/a\/z\/azakai\/3baf4ad7e600cbda06ec46efec5ec3b8\/bananabread_1373485124_demo_package\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Banana Bread<\/a> all on top of the WebRTC data channels.  Again, WebRTC is not all about video, and this shows that you can use it to relay data peer to peer and then render that data in each browser to create a real time gaming experience.<\/p>\n<h3>#9 Explore \u2013 WebRTC api\u2019s are already being developed<\/h3>\n<p>These providers (and more probably by the time you read this) are actively developing WebRTC wrappers and api\u2019s that simplify or host the \u201csignaling\u201d process for you.  Signaling is the handshaking process that your server will need to do before it can allow two clients to connect peer to peer and exchange the audio, video, or data.<\/p>\n<p><a href=\"http:\/\/tokbox.com\/opentok\" target=\"_blank\" rel=\"noopener noreferrer\">OpenTok<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/webRTC\/webRTC.io\" target=\"_blank\" rel=\"noopener noreferrer\">webRTC.io<\/a><\/p>\n<p><a href=\"https:\/\/www.firebase.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Firebase<\/a><\/p>\n<p><a href=\"http:\/\/www.pubnub.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">PubNub<\/a> (PubNub&#8217;s api for WebRTC is in private beta as of this post<\/p>\n<h3>#10 Play \u2013 with processing in real time<\/h3>\n<p>These examples show how you can use the audio and video channels of WebRTC to do real time processing of audio\/video, right in the browser.  That\u2019s cool!<\/p>\n<p><a href=\"http:\/\/idevelop.ro\/ascii-camera\/\" target=\"_blank\" rel=\"noopener noreferrer\">ascii-camera<\/a> (It&#8217;s cool, just check it out &#8211; converts your live video stream to an ascii representation in real time)<\/p>\n<p><a href=\"http:\/\/www.webaudiodemos.appspot.com\/Vocoder\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">Vocoder demo or real time audio manipulation using WebRTC<\/a><\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/ArinSimeAscii.png\" alt=\"ArinSimeAscii\" width=\"300\" height=\"244\" class=\"alignleft size-full wp-image-738\" \/><\/p>\n<h3>Finally \u2013 be patient and stay tuned<\/h3>\n<p>WebRTC is evolving as we speak, and as I warned at the top of this post, this list may already be out of date by the time you read it.  This is definitely a great area to spend some time if you want to be on the bleeding edge of the next generation of web applications.  But the downside to the bleeding edge is all the blood.  It may take you a while to sort through it and you will need to be patient with the constant changes and improvements.  Stay tuned in though and (pardon my hype here) you\u2019ll be rewarded with an early look at the next evolution of the web browser.<\/p>\n<h3>Tap Dancing and Funk Music<\/h3>\n<p>Why not?  After the HTML5 developers conference I saw these guys on the corner of Market Street in San Francisco.  They were doing something unique (at least in my experience) \u2013 they combined funk with a guy tap dancing (he taps most at the 1:30 mark of the video).  It was a creative combination I thought.  How can you creatively combine the capabilities of WebRTC and real time communication in your business model?<\/p>\n<p><iframe width=\"420\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/xIeqtf2rd_o\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>Bringing Real Time Communications to the browser WebRTC was one of the hot topics at the HTML5 Developers Conference that I attended this week, and for good reason. WebRTC is a promising new standard that makes it easier for you to incorporate peer to peer exchange of video, audio, and data directly between two client [&hellip;]<\/p>","protected":false},"author":4,"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":[116],"tags":[19,115,108,114,87,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>10 Resources for the new WebRTC standard - 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\/2013\/10\/10-webrtc-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Resources for the new WebRTC standard - AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"og:description\" content=\"Bringing Real Time Communications to the browser WebRTC was one of the hot topics at the HTML5 Developers Conference that I attended this week, and for good reason. WebRTC is a promising new standard that makes it easier for you to incorporate peer to peer exchange of video, audio, and data directly between two client [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-24T12:19:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/Screen-Shot-2013-10-24-at-4.50.46-AM.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=\"5 minutes\">\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\":\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/agilityfeat.com\/wp-content\/uploads\/2013\/10\/Screen-Shot-2013-10-24-at-4.50.46-AM.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/#webpage\",\"url\":\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/\",\"name\":\"10 Resources for the new WebRTC standard - AgilityFeat Panama Software Test Center\",\"isPartOf\":{\"@id\":\"https:\/\/34.200.113.64\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/#primaryimage\"},\"datePublished\":\"2013-10-24T12:19:23+00:00\",\"dateModified\":\"2013-10-24T12:19:23+00:00\",\"author\":{\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c8d60d597071526db386b2b8a4afac64\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/agilityfeatpanama.com\/en\/blog\/2013\/10\/10-webrtc-resources\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/c8d60d597071526db386b2b8a4afac64\",\"name\":\"arin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/34.200.113.64\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc498e210512c707ed769986dd745896?s=96&d=mm&r=g\",\"caption\":\"arin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/735"}],"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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/comments?post=735"}],"version-history":[{"count":0,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/735\/revisions"}],"wp:attachment":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/media?parent=735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/categories?post=735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/tags?post=735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}