--- title: Live Streaming with WebRTC description: How to build a simple WebRTC broadcasting application in order to live stream with a USB camera image: https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/snowfall_fence.png --- [Skip to content](https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc#main-content) ![WebRTC.ventures](https://blog.webrtc.ventures/hubfs/logo-main-light.svg) - [WebRTC Services](https://webrtc.ventures/webrtc-development-services/) Show submenu for WebRTC Services - [Assess](https://webrtc.ventures/services/assess/) - [Build](https://webrtc.ventures/services/build/) - [Integrate](https://webrtc.ventures/services/integrate/) - [Test](https://webrtc.ventures/services/test/) - [Manage](https://webrtc.ventures/services/manage/) - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/) - Our Partners Show submenu for Our Partners - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/) - Stories of Success Show submenu for Stories of Success - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/) - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/) - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/) - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/) - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/) - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/) - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/) - WebRTC Resources Show submenu for WebRTC Resources - [WebRTC Live](https://webrtc.ventures/webrtc-live/) - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz) - [WebRTC.ventures Blog](https://webrtc.ventures/blog/) - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/) - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/) - [About Us](https://webrtc.ventures/our-team/) Show submenu for About Us - [Blog](https://webrtc.ventures/blog/) - [Our Team](https://webrtc.ventures/our-team/) - [Jobs](https://webrtc.ventures/jobs/) Open main navigation Close main navigation - [WebRTC Services](https://webrtc.ventures/webrtc-development-services/) Show submenu for WebRTC Services - [Assess](https://webrtc.ventures/services/assess/) - [Build](https://webrtc.ventures/services/build/) - [Integrate](https://webrtc.ventures/services/integrate/) - [Test](https://webrtc.ventures/services/test/) - [Manage](https://webrtc.ventures/services/manage/) - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/) - Our Partners Show submenu for Our Partners - [Amazon Chime SDK](https://webrtc.ventures/partners/amazon-chime-sdk/) - Stories of Success Show submenu for Stories of Success - [Remote Video Interpreting Platform with Agent Routing](https://webrtc.ventures/successes/remote-video-translation-platform/) - [WebRTC to SIP Gateway for ASL Interpreters](https://webrtc.ventures/successes/webrtc-to-sip-gateway-for-asl-interpreters/) - [Audio Listening Device to Improve Surgical Outcomes](https://webrtc.ventures/successes/audio-listening-device-to-improve-surgical-outcomes/) - [Albania’s First Telemedicine Platform](https://webrtc.ventures/successes/albanias-first-telemedicine-platform/) - [Automated Video Storytelling with the Amazon Chime SDK](https://webrtc.ventures/successes/automated-video-storytelling-with-the-amazon-chime-sdk/) - [Large Scale Video Conferencing](https://webrtc.ventures/successes/large-scale-video-conferencing/) - [Broadcasting and Webcast Control Room](https://webrtc.ventures/successes/live-video-broadcasting-and-webcast-control-room/) - WebRTC Resources Show submenu for WebRTC Resources - [WebRTC Live](https://webrtc.ventures/webrtc-live/) - [WebRTC Tips](https://www.youtube.com/playlist?list=PLayYqdnyegt3QvxX-Rt6wbFIK8727Z5Oz) - [WebRTC.ventures Blog](https://webrtc.ventures/blog/) - [Migrating From Twilio Video](https://webrtc.ventures/twilio-video/) - [WebRTC.ventures Training Program](https://webrtc.ventures/webrtc-ventures-training-program/) - [About Us](https://webrtc.ventures/our-team/) Show submenu for About Us - [Blog](https://webrtc.ventures/blog/) - [Our Team](https://webrtc.ventures/our-team/) - [Jobs](https://webrtc.ventures/jobs/) - [Contact us](https://webrtc.ventures/contact/) [Contact us](https://webrtc.ventures/contact/) Jan 29, 2016 12:00:00 AM # Live Streaming the Snowpocalypse with WebRTC [ArinSime](https://blog.webrtc.ventures/author/arinsime) Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc) Last week we had a major snowstorm on the East Coast of the United States, where I live. Over 60 centimeters of snow fell and life ground to a frozen halt. The kids were all home from school, but I still needed to work and fortunately the storm never took out power or internet where I live. [![The front steps to my house after Snowpocalypse hits Virginia.](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/snow2-300x224.png?width=300&height=224&name=snow2-300x224.png) ![The front steps to my house after Snowpocalypse hits Virginia.](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/snow2-300x224.png?width=300&height=224&name=snow2-300x224.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/snow2-1.png) The front steps to my house after Snowpocalypse hits Virginia. But it probably wasn’t my most productive couple of days of work, because I spent a large part of my day complaining to my colleagues in Latin America about how cold I was, and how much I missed living in Costa Rica. Some of my Costa Rican colleagues were even “kind” enough to turn on their webcams during our meetings and show off the warm locations they were calling me from. Jerks. 😉 [![costarica_phonecall](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/costarica_phonecall-295x300-1.jpg?width=295&height=300&name=costarica_phonecall-295x300-1.jpg) ![costarica_phonecall](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/costarica_phonecall-295x300-1.jpg?width=295&height=300&name=costarica_phonecall-295x300-1.jpg)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/costarica_phonecall.jpg) Besides just whining about the cold, I thought I should share some **live streaming** of the snow falling with my tropical friends. Since [we specialize in building **video chat** and **live event** tools at WebRTC.ventures](https://webrtc.ventures/custom-applications/), this was also a good opportunity for me to play around with various **WebRTC** tools. I decided to build a simple live web cam based on [this blog post from PubNub](https://www.pubnub.com/blog/2015-08-27-webrtc-live-video-stream-broadcasting-from-one-to-many/). In their post, Kevin Gleason shows how simple it can be to build a **Periscope** style **streaming video** application using WebRTC. It was a nice example for me to start with since I only had a few hours before the snow was supposed to start. Besides, my hands were frozen from typing chats to the Costa Ricans begging for sympathy about my impending doom. [![Example WebRTC broadcasting app from PubNub](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/PubNub_streaming_example-300x250.png?width=300&height=250&name=PubNub_streaming_example-300x250.png) ![Example WebRTC broadcasting app from PubNub](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/PubNub_streaming_example-300x250.png?width=300&height=250&name=PubNub_streaming_example-300x250.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/PubNub_streaming_example.png) Example WebRTC broadcasting app from PubNub The PubNub example shows a simple implementation of **1-to-Many broadcasting with WebRTC**, where you stream your video and audio to other users by establishing an **RTCPeerConnection** with each viewer. This is the simplest architecture for doing broadcasting, and so is a good place to start learning. Below are four things I ran into while building this simple streaming service, and are good things for you to keep in mind when designing your own WebRTC streaming service. ## #1 – SSL Encryption is required even for viewers When **PubNub** wrote that blog post, a WebRTC connection could be established under and HTTP or HTTPS connection, but that is no longer the case. Beginning in December 2015 with version **47**, [Chrome requires that you are either running under an SSL connection](https://webrtchacks.com/chrome-secure-origin-https/) or localhost in order to get access to the **GetUserMedia** library that WebRTC relies on to control the microphone and audio. This is good practice anyways for security, but it does mean you need to pay attention to that in your code. When I first ran the PubNub example as provided, I couldn’t establish a connection because the library used in the PubNub javascript was running under HTTP by default and that’s no longer permitted in Chrome. In addition to making sure you include any external javascript files under https, you also need to instruct the PubNub configuration object to pass all traffic over their **publish/subscribe** network using **SSL**. In their broadcast example, you can do that by adding the following SSL configuration statement to their “phone” configuration in *embed.html*: ## #2 – Remember how WebRTC scales **WebRTC is a peer-to-peer protocol**. In the example used by PubNub, a simple architecture is used where each viewer is establishing a **P2P** connection with my laptop serving the video feed. Only the **broadcaster** (my laptop with webcam) is sending across a **video and audio stream**, but there is still a P2P connection established. If you are building a WebRTC based **group video conferencing** application, you are often limited to around 8 participants because each participant must have a P2P connection to all other participants. [![In a group WebRTC video chat, every Peer must have a Peer to Peer connection with all others in the group video chat - that can be a lot of connections and does not scale easily!](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/webrtc_scaling-300x263-1.png?width=300&height=263&name=webrtc_scaling-300x263-1.png) ![In a group WebRTC video chat, every Peer must have a Peer to Peer connection with all others in the group video chat - that can be a lot of connections and does not scale easily!](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/webrtc_scaling-300x263-1.png?width=300&height=263&name=webrtc_scaling-300x263-1.png)](https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/webrtc_scaling-1.png) In a group WebRTC video chat, every Peer must have a Peer to Peer connection with all others in the group video chat – that can be a lot of connections and does not scale easily! In this broadcasting case, only one person is broadcasting and so each viewer only needs one Peer to Peer connection to the broadcaster, so the scaling is not so bad as a typical WebRTC group video chat. We didn’t load test against my simple webcam app, but we had a dozen viewers at once with no problem and more should be possible. There would still be an upper limit based on how many P2P connections my laptop can handle. To build something that allows for hundreds or thousands of viewers, there are alternative **WebRTC architectures** you can consider for broadcast. This webinar from [WebRTCStandards.info](https://webrtcstandards.info/) includes a [good discussion on broadcasting with WebRTC](https://www.crowdcast.io/e/webrtcstandards1). You might also look into a service like [Greta.io](https://greta.io/) to help **distribute your live video stream** to more viewers and reduce bandwidth. Greta is pretty cool, it uses the **WebRTC Data Channel** to establish a **Peer to Peer Content Delivery Network (CDN)** across your site visitors. For those who have been following the WebRTC space for a while, Greta is similar to **PeerCDN** [which Yahoo purchased in 2013](http://techcrunch.com/2013/12/17/yahoo-acquires-peercdn/) for their own use. With a simple **javascript** include on your page, Greta will transfer packets of your live video or static files between visitors to your site and take some load off your servers. ## #3 – Changing camera input sources Even though snow was falling outside, I couldn’t spend all my time whining to my teammates about the temperature. Believe me, I tried! I still had to work on Friday, which meant I couldn’t use my laptop’s camera or the live stream viewers would just watch me work. Watching me work is definitely less exciting than falling snow, but still more interesting than watching grass grow. (Note: There is actually a webcam where you can [watch someone’s grass grow](http://www.watching-grass-grow.com/)!) I plugged in a **USB camera** to my laptop and then set the camera in my window looking out at the snow fall. However I still needed to change the camera input being sent to **GetUserMedia** in order to allow me to choose which camera the viewers would see. The first thing to do was create a dropdown of all cameras attached to my computer so that I could populate a **video selector** on the *stream.html* page provided by PubNub. (Note: The getCameras javascript in this snippet is based on an [example by Sam Dutton](https://github.com/samdutton/simpl/blob/master/getusermedia/sources/js/main.js)) The PubNub example I was using encapsulates the actual GetUserMedia call inside their *webrtc.js* file, so I needed to modify that. In my code snippet above, I changed the **GetUserMedia** call in PubNub’s *webrtc.js* file to pass in a **videoSource** variable. I populated that variable with a device id from the drop down. Also, you’ll **note that I’ve set audio to false.** I only wanted to send my video to viewers of my webcam, not my audio. So I just tell GetUserMedia not to use the audio stream, only video. At this point, I have the ability to choose which of my cameras I want to stream from, so that I could keep working in my cold house while my tropical co-workers daydreamed about the snow falling outside my window. ![The Snowpocalypse cam is working! ](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/SnowpocalypseCam-300x221.png?width=300&height=221&name=SnowpocalypseCam-300x221.png) ![The Snowpocalypse cam is working! ](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/SnowpocalypseCam-300x221.png?width=300&height=221&name=SnowpocalypseCam-300x221.png) The Snowpocalypse cam is working! ## #4 – Firewalls are what makes signaling hard Up to this point, I haven’t mentioned anything about **STUN**, **TURN**, or **WebRTC Signaling**, which are the keywords when talking about how two browsers can establish a P2P **RTCPeerConnection** before a **WebRTC chat** or **broadcast** can be shared. The **PubNub** example does a nice job of abstracting all this from our view in the *webrtc.js* file. Since signaling is the hardest part of many WebRTC applications, it’s often nice to use **commercial WebRTC platforms** like **TokBox**, **Xirsys**, **Twilio Video**, or others which let you focus on integrating the actual video to your app and not worry as much about the **WebRTC signaling**. I was reminded of this when I sent my simple live web camera to a couple of clients, who were at work and behind corporate firewalls. **Firewall traversal is what STUN and TURN servers do for us in WebRTC applications** – they try to find an IP address that both participants in the **RTCPeerConnection** can use to connect directly to each other. If a firewall prevents one participant from exposing their IP address, then the **STUN** and **TURN** servers try to poke through the firewall and get an IP address that can be used for that particular device. [![WebRTC signaling](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/webrtc_stun-300x187.png?width=300&height=187&name=webrtc_stun-300x187.png) ![WebRTC signaling](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/webrtc_stun-300x187.png?width=300&height=187&name=webrtc_stun-300x187.png)](http://www.html5rocks.com/en/tutorials/webrtc/basics/) Image from [Sam Dutton’s classic WebRTC Basics post on HTML5Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/) My clients at larger companies couldn’t see the web camera, because their browsers were unable to get past their corporate networks and establish the **RTCPeerConnection** with me using the relatively simple **WebRTC** setup I was using. Beefing up the signaling used in this example or switching to a commercial WebRTC service can help a wider range of users connect to your application. In my case, snowfall video wasn’t really worth the extra effort. ## Broadcasting with WebRTC is worth the effort My simple blizzard webcam was fun, but not a full demonstration of why **WebRTC is great for broadcasting a live event.** The key thing about WebRTC is it makes it possible to create **interactive online events**. [I’ve written about this before](https://webrtc.ventures/2015/11/the-future-of-streaming-media/), and how I think it is changing the way we want to interact with online video and events. We don’t just want to watch, [we want to participate](https://webrtc.ventures/2015/11/the-future-of-streaming-media/). **Applications using WebRTC allow for truly interactive events**, because you can build it so that viewers can join you for questions during the event. [Spotlight from TokBox is a great example](https://tokbox.com/solutions/spotlight). We’ve built applications for other clients too using this same paradigm of a webinar where viewers can join the broadcast by WebRTC and participate live. **Are you interested in building tools to make events, webinars, conferences, or live streaming more interactive?** [Contact our WebRTC design and development experts](https://webrtc.ventures/contact/) and we can make your **web or mobile app** a reality! [CPaaS](https://blog.webrtc.ventures/tag/cpaas), [Managed Services](https://blog.webrtc.ventures/tag/managed-services), [Events](https://blog.webrtc.ventures/tag/events), [Video Conferencing](https://blog.webrtc.ventures/tag/video-conferencing), [Real Time Weekly](https://blog.webrtc.ventures/tag/real-time-weekly), [WebRTC Architecture](https://blog.webrtc.ventures/tag/webrtc-architecture), [Broadcasting](https://blog.webrtc.ventures/tag/broadcasting), [Medical](https://blog.webrtc.ventures/tag/medical), [WebRTC Live](https://blog.webrtc.ventures/tag/webrtc-live), [Showcase](https://blog.webrtc.ventures/tag/showcase), [Thoughts](https://blog.webrtc.ventures/tag/thoughts), [Vonage](https://blog.webrtc.ventures/tag/vonage), [Daily](https://blog.webrtc.ventures/tag/daily), [Jobs](https://blog.webrtc.ventures/tag/jobs), [Contact Centers](https://blog.webrtc.ventures/tag/contact-centers), [Telehealth](https://blog.webrtc.ventures/tag/telehealth), [Education](https://blog.webrtc.ventures/tag/education), [Technical](https://blog.webrtc.ventures/tag/technical), [General](https://blog.webrtc.ventures/tag/general), [Story of success](https://blog.webrtc.ventures/tag/story-of-success), [The WebRTC.ventures Blog](https://blog.webrtc.ventures/tag/the-webrtc-ventures-blog), [Testing](https://blog.webrtc.ventures/tag/testing), [Gaming](https://blog.webrtc.ventures/tag/gaming), [DevOps](https://blog.webrtc.ventures/tag/devops), [Symbl.ai](https://blog.webrtc.ventures/tag/symbl-ai) ## Related posts [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Broadcasting-Solutions-by-WebRTC_ventures-1.png?height=200&name=Broadcasting-Solutions-by-WebRTC_ventures-1.png)](https://blog.webrtc.ventures/2020/02/broadcasting-and-live-streaming-apps) ## [Broadcast Solutions by WebRTC.ventures](https://blog.webrtc.ventures/2020/02/broadcasting-and-live-streaming-apps) [Paige Long](https://blog.webrtc.ventures/author/paige-long) Feb 28, 2020 12:00:00 AM We talked last week about how broadcasting applications can benefit businesses in various... [Read more](https://blog.webrtc.ventures/2020/02/broadcasting-and-live-streaming-apps) [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Examples-of-Our-Work-2.png?height=200&name=Examples-of-Our-Work-2.png)](https://blog.webrtc.ventures/2019/10/examples-of-our-work) ## [Examples of Our Work](https://blog.webrtc.ventures/2019/10/examples-of-our-work) [Paige Long](https://blog.webrtc.ventures/author/paige-long) Oct 3, 2019 12:00:00 AM Using the best talent possible, WebRTC.ventures builds innovative solutions that enable the... [Read more](https://blog.webrtc.ventures/2019/10/examples-of-our-work) [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Intro-to-Virtual-Events-in-the-Pandemic.png?height=200&name=Intro-to-Virtual-Events-in-the-Pandemic.png)](https://blog.webrtc.ventures/2020/07/virtual-events-in-2020) ## [Introduction to Virtual Events in the Pandemic](https://blog.webrtc.ventures/2020/07/virtual-events-in-2020) [ArinSime](https://blog.webrtc.ventures/author/arinsime) Jul 29, 2020 12:00:00 AM As the coronavirus pandemic took hold and countries locked down, the first industry that looked at... [Read more](https://blog.webrtc.ventures/2020/07/virtual-events-in-2020) ### WebRTC.Ventures Services ... - Assess - Build - Integrate - Test - Deploy & Manage ### Contact Us ... **Video should be an opportunity, not a headache.** We’re here to build, integrate, assess and optimize, test, and even deploy and manage your live video application. [Contact us](https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc#contact) ### WebRTC Live ... View [past episodes](https://blog.webrtc.ventures/webrtc-live/) of our webinar interview series about the latest webRTC use cases and technical updates. Join our mailing list to learn about upcoming episodes! ![WebRTC Live](https://blog.webrtc.ventures/hs-fs/hubfs/Template%20Images/widged-bannet.webp?height=90&name=widged-bannet.webp) ![logo-main-light](https://blog.webrtc.ventures/hubfs/logo-main-light.svg "logo-main-light") We’re one of the few agencies in the world dedicated to WebRTC development. This dedication and experience is why so many people trust us to help bring live video application dreams to life.   ### Let's get started! ###### **[Contact us today](https://webrtc.ventures/contact/)** **[info@webrtc.ventures](mailto:info@webrtc.ventures)** ### Join our mailing list We don't e-mail often (a few times a month max), and it will be worth it when we do! Of course, we respect your privacy and will not share your contact information. © 2023 WebRTC.ventures, an [AgilityFeat](https://agilityfeat.com/) company / [Privacy Policy](https://webrtc.ventures/privacy-policy//) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "ArinSime", "url" : "https://blog.webrtc.ventures/author/arinsime" }, "dateModified" : "2024-04-03T18:22:18.550Z", "datePublished" : "2016-01-29T05:00:00.000Z", "headline" : "Live Streaming with WebRTC", "image" : [ "https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/snowfall_fence.png" ], "mainEntityOfPage" : { "@id" : "https://blog.webrtc.ventures/2016/01/live-streaming-with-webrtc", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg" } } } ```