--- title: Things I Wish I Knew Before Building My First WebRTC App – WebRTC.ventures description: WebRTC.ventures Senior Engineer Alberto Trastoy Gonzalez learned the hard way that WebRTC based applications are different from other web applications. WebRTC carries a unique set of challenges around interoperability, scaling, networking, security, testing, and debugging. image: https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Things-I-Wish-I-Knew-Before-Building-My-First-WebRTC-App.png --- [Skip to content](https://blog.webrtc.ventures/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app#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 22, 2021 12:00:00 AM # Things I Wish I Knew Before Building My First WebRTC App [Alberto Gonzalez](https://blog.webrtc.ventures/author/alberto-gonzalez) Share: [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.webrtc.ventures/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app) [X Twitter icon](https://twitter.com/intent/tweet?url=https://blog.webrtc.ventures/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app) [envelope icon](mailto:?body=https://blog.webrtc.ventures/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app) Naive me in 2015: Thinking WebRTC is just another browser API. Experienced me after more than five years and dozens of WebRTC applications: WebRTC based applications are different from other web applications with a unique set of challenges. But also, solutions, if you have a little experience behind you. In this post, I will review some of the things I wish I had known back then.  But first, some WebRTC basics. WebRTC is: - an open source project - a real time communications framework  - secure - updated frequently - used in many major platforms and applications today - available on all modern browsers But, many issues exist that can cause such user responses as: - “The app doesn’t work on my iPhone.” - “Hi. Hello? Can you hear me? I can hear you, but you can’t hear me.” - “Yes, I can see you, but your video is very blurry.” - “My microphone is not working.” - “I can’t connect. I think my Internet must be too slow.” My goal in this post is to give you some insights on the problems inherent to WebRTC, as well the solutions that myself and our[team at WebRTC.ventures](https://webrtc.ventures/our-team/) have used in the past. Some of the ways WebRTC is particularly different than a basic web application are: - Interoperability - Scalability - Networking - Security - Testing - Debugging/Troubleshooting Let’s take them one at a time. ## Interoperability ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Interoperability-1.png?width=439&height=171&name=Interoperability-1.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Interoperability-1.png?width=439&height=171&name=Interoperability-1.png) WebRTC was originally built for 1-1 communication. When used in this straightforward way. there should be no major issues in how devices interact with each other. Still, problems can arise. Problems: - Cameras and microphones are not equal in each device - Advanced features are not supported in some browsers and devices - Browsers – some known issues with Chrome, Edge, Firefox, and Safari - Safari has the most challenges – particularly iOS. Some features like screenshare you cannot use. Solutions: - User notifications are essential! The user needs to know what is going on or you lose all credibility.  - Advance browser detection and again, notification - Logging issues using the [WebRTC statistics API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_Statistics_API)  - [Debug](https://webrtc.ventures/2020/12/webrtclive-debugging-webrtc-apps/) issues using tools like [WebRTC Internals](https://chrome.google.com/webstore/detail/analyzertc-visualize-webr/jmichaepiaolacmdlbngnoephpomigcm?hl=en-US) or [Wireshark](https://www.wireshark.org/) ## Scalability ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Scalability.png?width=462&height=177&name=Scalability.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Scalability.png?width=462&height=177&name=Scalability.png) Mesh video architecture would be the approach my naive self would have taken to building a WebRTC application. Connecting all the users together and sending audio and video between them seems a logical way to go. But, WebRTC does not scale well if used in this way.  Problem: - If you want to have more users, you will encounter CPU and bandwidth issues Solution: - Use a Media Server to distribute the video to the participants - This will also allow more advanced features like integration with other technologies and processing video streams Problem:  - Once we solved the problem of participants’ scalability with a media server, there is a limit on how powerful a media server can be. At some point, you need more than one server. So, what if you have a whole lot of participants? Perhaps over 1,000? Solution: - Scaling Media Servers. A typical approach here is to use a dispatcher that will distribute the calls. This can be done randomly, but a better practice is to use geographical cascading. This means that the video is distributed based on where you are located. For example, if we are both in the U.S., we would both be directed to a media server in the U.S.  To solve these scalability issues, there are both open source and commercial solutions. Some of the common commercial options that we have used at WebRTC.ventures are listed below. They can scale up to one million participants, depending on the use case. - [Vonage](https://www.vonage.com/communications-apis/video/) - [Agora](https://www.agora.io/) - [Twilio](https://www.twilio.com/) - [Red5Pro](https://www.red5pro.com/) Open Source options we also use or have used: - [Jitsi](https://jitsi.org/) - [Janus](https://janus.conf.meetecho.com/) - [Kurento](https://www.kurento.org/) - [MediaSoup](https://mediasoup.org/) - [Pion](https://pion.ly/) - [Asterisk](https://www.asterisk.org/) - [FreeSwitch](https://freeswitch.com/) ## Networking Issues: Restrictive Networks ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/RestrictiveNetworks.png?width=198&height=185&name=RestrictiveNetworks.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/RestrictiveNetworks.png?width=198&height=185&name=RestrictiveNetworks.png) Because WebRTC uses UDP (User Datagram Protocol), it has more problems gaining access to restricted networks than typical web applications. Problems:  - Proxy and firewall rules  - Proxy authentication from clients required? - Proxy blocking access to IP addresses - Use of Network address translation (NAT) that hides an IP address from the public internet Solution: - Keep and continually review your checklist of requirements - Monitor the issues, keep logs, and notify - Traverse NATs using a [TURN server](https://webrtc.ventures/2020/12/webrtc-signaling-stun-vs-turn/) ## Networking Issues: Congestion ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/CongestedNetworks-1.png?width=205&height=177&name=CongestedNetworks-1.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/CongestedNetworks-1.png?width=205&height=177&name=CongestedNetworks-1.png) Similar to previous, there are technical issues that can lead to network congestion. Problems: - Too many hosts in a local network - Low bandwidth - Interference from outside sources or faulty cabling in headphones or other user devices. Solution: - WebRTC has error resilience mechanisms built in. However, there is a limit if, for example, you really do have low bandwidth. Optimizing video bandwidths will be the focus of a future blog post! - For these other issues, advance detection, monitoring, logging, and notifications are key ## WebRTC Security ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Security.png?width=295&height=201&name=Security.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Security.png?width=295&height=201&name=Security.png) WebRTC by design is secure and encrypted, but only for the ideal of 1:1. When there is a media server, the video needs to be decoded and the security can be compromised. This is common in other technologies, as well, with Zoom being the most recent focus of controversy. I went into more detail on WebRTC security and privacy issues in my blog post, [WebRTC Security Overview in 2020](https://webrtc.ventures/2020/05/webrtc-security-and-privacy/). Google Security Engineer Natalie Silvanovich was also Arin Sime’s [guest on WebRTC Live](https://webrtc.ventures/2020/11/webrtclive-webrtc-and-security/) last November. Solution: A new solution has emerged called E2EME or End-to-End Media Encryption. [E2EME](https://cosmosoftware.io/products/webrtc-end-to-end-media-encryption/) uses Insertable Streams API to use secure frames mechanism. Kudos to CoSMo software and Google for developing this. It, too, will be the focus of a future blog post. ## Web Testing ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/WebRTCventures_TestingLevels-1024x556-3.png?width=512&height=278&name=WebRTCventures_TestingLevels-1024x556-3.png) ![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/WebRTCventures_TestingLevels-1024x556-3.png?width=512&height=278&name=WebRTCventures_TestingLevels-1024x556-3.png) WebRTC testing is not as simple as regular web testing. Although we will need to do functional testing and unit testing, testing WebRTC apps has an additional set of problems. Problems: - Compatibility testing does not equal interoperability testing. There is one additional degree of complexity by having more than one user connecting with other users. - Performance testing require us to use N browsers concurrently Good news here! WebRTC.ventures is making our extensive testing expertise available to those outside of our regular development clients. We have formalized our testing, which is now available as a [standalone service](https://webrtc.ventures/webrtc-testing-services/).  ## Back to the user issues  Now that we have covered some of the common problems with WebRTC, let’s go back to the user issues I outlined earlier in this post and see if we can guess what could be the problem.   - “The app doesn’t work on my iPhone,” **said someone using Chrome on iPhone. They will not be able to successfully handle a WebRTC call. This is something we could detect in advance using a [pre-call test](https://webrtc.ventures/2020/12/pre-call-tests-live-video-apps/). Whatever the case, we must make sure the user receives a notification.** - “Hi. Hello? Can you hear me? I can hear you, but you can’t hear me,” **said someone failing to accept or blocking access to the microphone. This can be a UI issue. ** - “Yes, I can see you, but your video is very blurry,” **said someone using a video app that uses older codecs or doesn’t use SVC or simulcast.** - “My microphone is not working,” **said someone with faulty headphones. ** - “I can’t connect. I think my Internet must be too slow,” **said someone about an app that doesn’t prioritize audio and optimize available bandwidth**. Could we make our app more flexible to use just audio or can we optimize their bandwidth? Apps today have a high standard. Users expect them to work–always. And in today’s remote work environment, they *need* to work–always! Although WebRTC is a newer technology, we need to achieve a high level of reliability. As I hoped I have shown here, it is not always so easy! ***If you are considering building an WebRTC app, or you need to test an existing one, you need to turn to a team with deep experience. You can find that at WebRTC.ventures.*** [***Contact us today!***](https://webrtc.ventures/contact/) [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/How-Can-WebRTC_ventures-Help-You-4.png?height=200&name=How-Can-WebRTC_ventures-Help-You-4.png)](https://blog.webrtc.ventures/2019/08/how-can-webrtc-ventures-help-you) ## [How Can WebRTC.ventures Help You?](https://blog.webrtc.ventures/2019/08/how-can-webrtc-ventures-help-you) [Paige Long](https://blog.webrtc.ventures/author/paige-long) Aug 7, 2019 12:00:00 AM WebRTC.ventures builds and licenses custom video and voice applications for all sorts of industries... [Read more](https://blog.webrtc.ventures/2019/08/how-can-webrtc-ventures-help-you) [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Should-You-Build-Your-Mobile-WebRTC-Application-as-a-Progressive-Web-Application-PWA.png?height=200&name=Should-You-Build-Your-Mobile-WebRTC-Application-as-a-Progressive-Web-Application-PWA.png)](https://blog.webrtc.ventures/2023/10/should-you-build-your-mobile-webrtc-application-as-a-progressive-web-application-pwa) ## [Should You Build Your Mobile WebRTC Application as a Progressive Web Application (PWA)?](https://blog.webrtc.ventures/2023/10/should-you-build-your-mobile-webrtc-application-as-a-progressive-web-application-pwa) [Alberto Gonzalez](https://blog.webrtc.ventures/author/alberto-gonzalez) Oct 23, 2023 12:00:00 AM Progressive Web Applications (PWA) are a type of web application that is built to behave as a... [Read more](https://blog.webrtc.ventures/2023/10/should-you-build-your-mobile-webrtc-application-as-a-progressive-web-application-pwa) [![](https://blog.webrtc.ventures/hs-fs/hubfs/Imported_Blog_Media/Delivering-Great-Experiences-in-WebRTC-Applications.png?height=200&name=Delivering-Great-Experiences-in-WebRTC-Applications.png)](https://blog.webrtc.ventures/2023/05/delivering-great-experiences-in-webrtc-applications) ## [Delivering Great Experiences in WebRTC Applications](https://blog.webrtc.ventures/2023/05/delivering-great-experiences-in-webrtc-applications) [Mariana Lopez](https://blog.webrtc.ventures/author/mariana-lopez) May 12, 2023 12:00:00 AM At WebRTC.ventures, we believe that a technically-sound WebRTC application is insufficient if it... [Read more](https://blog.webrtc.ventures/2023/05/delivering-great-experiences-in-webrtc-applications) ### 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/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app#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" : "Alberto Gonzalez", "url" : "https://blog.webrtc.ventures/author/alberto-gonzalez" }, "dateModified" : "2024-04-03T18:21:28.628Z", "datePublished" : "2021-01-22T05:00:00.000Z", "headline" : "Things I Wish I Knew Before Building My First WebRTC App – WebRTC.ventures", "image" : [ "https://blog.webrtc.ventures/hubfs/Imported_Blog_Media/Things-I-Wish-I-Knew-Before-Building-My-First-WebRTC-App.png" ], "mainEntityOfPage" : { "@id" : "https://blog.webrtc.ventures/2021/01/things-i-wish-i-knew-before-building-my-first-webrtc-app", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.webrtc.ventures/hubfs/logo-main-light.svg" } } } ```