Een kijkje achter de schermen: van Google Hangouts naar WebRTC

Door Remy - 7 September 2017

De transitie van Google Hangouts on Air naar WebRTC voor het live streamen van onze webinars is by far de grootste verandering geweest in het nog prille bestaan van WebinarGeek.

Met slechts één klik op de knop live gaan, in hoge kwaliteit uitzenden en dat allemaal zonder vertraging. Het kan allemaal niet op. Eind februari was het dan eindelijk zover...de introductie van het nieuwe WebinarGeek! Vanaf dat moment stonden wij echt op eigen benen.

En dat is best spannend. Het streamen van de live webinars verliep altijd via de servers van Google en die verantwoordelijkheid lag vanaf dat moment ineens volledig bij ons. Natuurlijk heel fijn, want nu hebben wij veel meer invloed op verschillende zaken zoals kwaliteit en stabiliteit. Maar de transitie is uiteraard niet zonder uitdagingen verlopen, wij zijn onderweg tegen verschillende dingen aangelopen. Op ons bek gegaan, maar altijd weer opgestaan. En daar beter door geworden. In dit blog deel ik graag een aantal voorbeelden met je en geef ik je een kijkje achter de schermen van deze periode.

Wat is WebRTC nou precies?

WebRTC staat voor WebRealTimeCommunication en is een functionaliteit van je browser die het mogelijk maakt om realtime audio- en video uit te wisselen met een andere browser.

Een programma als Skype maakt ook gebruik van deze techniek. Het voordeel is dat dit kan plaatsvinden zonder de installatie van extra software. De browser maakt het mogelijk dat een webpagina je camera en microfoon kan activeren en zorgt voor de standaard functionaliteiten om gegevens uit te wisselen met een andere browser.

Het grote voordeel van WebRTC is dat de vertraging bij het streamen nihil is. Het staat voor zogenaamde low latency streaming. Dat betekent dat met name bij het streamen tussen Google Chrome browsers er geen vertraging optreedt bij het uitzenden.

Google Chrome is de voorloper op het gebied van WebRTC in en heeft het doel om van deze moderne technologie een echte web "standaard" te maken.

Dit houdt in dat bijvoorbeeld voor ons binnen WebinarGeek, wij een stuk functionaliteit van de browser kunnen uitlezen en toepassen om webinar software omheen te maken. Zie WebRTC in deze als een gereedschapsbox die wij kunnen gebruiken om software mee te maken.

WebRTC maakt realtime communicatie van browser-naar-browser mogelijk

WebRTC heeft ons ten opzichte van Google Hangouts on Air veel gebracht. Zoals de mogelijkheid om zonder vertraging live te streamen, te streamen in hoge kwaliteit en te streamen direct via de browser zonder installatie van aanvullende software of ingeiwkkelde integraties met andere partijen.

WebRTC toepassen voor webinars

WebRTC is oorspronkelijk bedoeld voor videoconferencing oplossingen. Waarbij een browser in verbinding staat met een andere browser. Er vindt dus directe communicatie plaats tussen twee browsers, denk aan het voorbeeld van Skype in dit geval. 

Voor een webinar is dat niet praktisch, omdat daar heel veel mensen tegelijk aan deelnemen. Het is niet wenselijk dat vanuit jouw computer/browser tegelijkertijd verbinding wordt gemaakt met honderden andere computers. Dit zou in de praktijk ook niet echt werken. Bij een webinar is ook meer sprake van zenden vanuit één computer naar meerdere computers in plaats van directe communicatie over en weer.

Daar komt de magie van WebinarGeek kijken! Wij hebben het mogelijk gemaakt om WebRTC geschikt te maken voor het geven van webinars. Waarbij het dus mogelijk is om zonder vertraging webinars te geven en het niet nodig is om verbniding tussen alle deelnemers op te zetten.

De magie werkt als volgt: jij maakt vanuit jouw browser één verbinding met WebinarGeek en wij regelen de rest. Wij verspreiden jouw verbinding vanuit onze servers met alle kijkers, zodat alle "heavy lifting" van de verbinding aan onze kant plaatsvindt. Ook is het op die manier mogelijk om een opname te maken van alle webinars.

Dit was by far de grootste en belangrijkste uitdaging bij het implementeren van WebRTRC. Je kunt je voorstellen dat we een klein feestje hebben gevierd toen we hier de oplossing voor hadden gevonden.

Meten is weten...

Eén van de dingen die ons het meest heeft geholpen is het opslaan van informatie. Bij WebinarGeek houden wij alles bij, maar dan ook echt alles. De statistieken van elke presentator en kijker helpen ons bij het verbeteren van WebinarGeek. Elke melding die op iemands scherm komt, elk aspect van de verbinding: we kunnen het terugvinden. Eén van de dingen die wij hier bij de techniek dan ook doen is het steekproefsgewijs analyseren van webinars:

  • Hoe is de uitzending verlopen vanuit de presentator?
  • Wat voor apparaten gebruikten de kijkers om te kijken?
  • Wie heeft er niet kunnen kijken en waarom niet?
  • Was de kwaliteit voldoende afgestemd voor de presentator en de kijkers?
  • Wie heeft foutmeldingen in beeld gehad en waarom?

Deze periodieke analyses worden gedocumenteerd en wekelijks in het team besproken. Met name wordt gekeken naar zaken waarbij ofwel een aanpassing in de software nodig is om een bepaald probleem op te lossen, danwel een aanpassing in de applicatie nodig is om iets te verduidelijken. Bijvoorbeeld dat een kijker een bepaalde handeling moet verrichten.

Ik in mijn natuurlijk habitat, testen doen wij bij WebinarGeek altijd heel uitgebreid en uitvoerig

Kijkers volgen webinars vanuit honderden verschillende omstandigheden. Vanuit Nederland of het buitenland. Vanaf een computer, laptop of tablet. Draadloos of bekabeld. Via Internet Explorer, Edge, Safari, Chrome, Firefox, andere browsers, andere browser versies, de combinaties zijn hierin eindeloos. Dit maakt periodieke analyse en verbetering noodzakelijk.

Los van de steekproeven geeft ons systeem sinds augustus automatisch een melding als er iets niet goed is gegaan tijdens een webinar zoals een niet werkende microfoon, een wegvallende verbinding of een (te) groot percentage kijkers met problemen. Zo kunnen wij nog gerichter WebinarGeek beter en beter maken.

Er gaat in het WebinarGeek systeem letterlijk een "belletje" af als een webinar gaande is of is geweest waar onze aandacht is gewenst

De uitdagingen sinds de introductie van WebRTC

Wij hebben sinds de introductie van onze nieuwe streaming oplossing vele honderden verbeteringen en uitbreidingen doorgevoerd, hieronder enkele voorbeelden van dingen waar we tegenaan zijn gelopen:

Aanpassing kwaliteit

Na de introductie bleek dat de meerderheid van onze klanten succesvol in hoge kwaliteit een webinar kon geven. Sommige klanten echter liepen tegen kwaliteitsproblemen aan: stukjes ontbrekende video, wegvallende audio. Na onderzoek bleek dat dit vaak te maken had met een instabiel netwerk (draadloos internetten vanaf zolder bijvoorbeeld) of een lage internetsnelheid.

Als gevolg hiervan hebben wij tegenwoordig een automatische netwerktest op de uitzendpagina. Achter de schermen worden zodra de pagina is geladen, enkele snelheids- en netwerktestjes uitgevoerd om zo te bepalen wat de juiste kwaliteit is voor het webinar.

Lage internetsnelheid? Dan schroeven wij de kwaliteit automatisch een stukje naar beneden om ervoor te zorgen dat jouw webinar zonder problemen kan plaatsvinden.

Kantelen van scherm

Uit kijkers analyse bleek dat sommige van de mobiele kijkers wel de kijkpagina openden, maar vervolgens het webinar nooit hebben gestart. Voor mobiele apparaten is het vaak zo dat wij niet automatisch de video mogen starten, dit is een beperking die de mobiele software fabrikant oplegt aan websites met video's. Na verder onderzoek bleek het probleem tweeledig te zijn:

  • Niet alle kijkers begrepen dat zij eerst op 'play' moesten drukken.
  • Sommige kijkers kregen een afbeelding in beeld met het verzoek om het scherm te kantelen, om zo het webinar in landschapsmodus te kunnen volgen. Deze afbeelding werd niet altijd begrepen.

Als gevolg hiervan hebben wij een duidelijke en intuïtieve aanwijzing op de pagina geplaatst om de video te starten en de afbeelding voor het kantelen van het scherm opnieuw ontworpen. Sindsdien zijn deze problemen nooit meer voorgekomen!

Uit onderzoek bleek dat het linkerplaatje niet intuïtief genoeg was, de tweede werkt in de praktijk wel

Android browsers

Kijkers die mobiel kijken via Apple apparaten zijn wij altijd blij mee, het is vrij overzichtelijk daar het altijd een Apple apparaat en bijna altijd dezelfde browser betreft. Voor Android is dit anders. Er zijn niet alleen tientallen toestellen en versies in omloop, maar ook nog eens vele verschillende browsers en versies.

Uit kijkers analyse bleek dat sommige van de Android kijkers problemen hadden met het afspelen van streams. Het afspelen wilde wel, maar er was soms buffering (haperen van de stream) of de stream brak voortijdig af. Na verder onderzoek bleek dat sommige Android browsers en toestellen wel ondersteuning bieden voor livestreaming zoals wij dat doen (via HLS), maar dat dit over het algemeen bekend stond als 'matig' of 'buggy' (veel fouten).

Als gevolg hiervan hebben wij kijken vanuit Android gelimiteerd tot Android OS versies 4.1 of hoger en de Google Chrome browser (standaard aanwezig op alle toestellen die wij ondersteunen). In het Help Center houden wij een actueel overzicht bij van de browsers en de versies die wij ondersteunen

De komende tijd richten wij ons op het opschalen en kwaliteit

De ondersteuning van WebRTC in browsers wordt steeds meer uitgebreid. Daardoor wordt het voor ons mogelijk  om webinars steeds stabieler en kwalitatief nog hoger uit te zenden. Zo zal één van de aankomende versies van Google Chrome een nieuwe 'noise cancellation' techniek implementeren waardoor de geluidskwaliteit van met name de ingebouwde microfoons toe zal nemen.

Verder is het zo dat in het komende halfjaar de ondersteuning van WebRTC binnen browsers als Firefox en Safari op een dermate manier wordt geïmplementeerd dat ook wij dit kunnen toepassen binnen WebinarGeek. Op dit moment zenden wij webinars voor kijkers die kijken via niet-ondersteunde browsers nog uit met een vertraging, iets waarvan ons doel is om niet meer te hoeven doen in de toekomst.

Tot slot staat veel van onze huidige technische ontwikkeling in het teken van het verder opschalen. Ondersteuning bieden voor nog hogere kijkersaantallen, in een nog hogere kwaliteit op een zo vloeiend mogelijke manier. Een combinatie van technologische ontwikkelingen binnen browsers en innovatieve ontwikkelingen binnen WebinarGeek zullen dit mogelijk maken. Ik hou jullie op de hoogte!

Mocht je naar aanleiding van deze blog vragen of feedback hebben, aarzel niet om contact met ons op te nemen via de customer support hier rechtsonder.

Remy

Remy

Wide range of IT project experience, ranging from software development, providing training, team and security management in an international environment. Strong believer in Agile methodologies/Scrum. My passion is to build awesome stuff for the web.