BLOG
Deze blog is geschreven door Sjim Wagemakers, Tech Lead smart TV Development bij Triple. In de wereld van software- en app development worden uitdagingen vaak als obstakels beschouwd. Ik vind echter dat deze uitdagingen gezien moeten worden als kansen voor groei en innovatie. Vaak houden juist deze uitdagingen het interessant, zelfs als je dit werk al jarenlang doet. Bij Triple ontwikkelen we smart TV-apps voor veel verschillende klanten zoals NLZIET, NOS, KIJK, NewsON, VTMGO en STREAMZ. Voor deze klanten werken we met verschillende platforms. Hoewel we voornamelijk focussen op WebOS (gebruikt op LG) en Tizen (gebruikt op Samsung), ondersteunen we ook AndroidTV, Amazon FireTV, Hisense, VEWD en zelfs Roku!
Je zou kunnen denken dat smart TV-development een niche beroep is, waarbij je werkt in een obscure programmeertaal. Maar dat is niet altijd waar. We kunnen meestal moderne HTML, CSS en JavaScript gebruiken (sneak peek, later meer daarover!).
Het ontwikkelen van smart TV-apps is geweldig, juist vanwege de uitdagingen. In deze blog deel ik enkele uitdagingen die ons werk spannend maken.
Uitdaging 1: Performance
Leuk feitje: in tegenstelling tot wat de naam impliceert, zijn smart TV's vaak niet zo slim. De meeste consumenten zijn niet bereid om een groot bedrag aan hun tv uit te geven, dus fabrikanten hebben de neiging om te bezuinigen op hardware voor populaire modellen. Uiteindelijk is de belangrijkste functie van televisies om video af te spelen, en daarvoor is alleen basis-hardware nodig. Apps ontwikkelen voor smart TV's is daarom niet altijd gemakkelijk, maar we weten precies hoe we met deze uitdaging moeten omgaan.
Top-down
Bij Triple werken we met een top-down aanpak, wat betekent dat we apps creëren op basis van de allerbeste hardware-specificaties met ultieme mogelijkheden. Als een reeks apparaten de techniek die we hebben gekozen voor een functie niet ondersteunt, passen we deze aan voor die specifieke reeks. Met behulp van deze aanpak, kunnen we voor nieuwere apparaten het volledige potentieel van de beschikbare hardware benutten. Dit leidt tot een soepelere en meeslepende gebruikerservaring. Het impliceert wel dat we moeten weten waar de beperkingen voor apparaten met lagere specificaties liggen, daarom houden we constant in de gaten waar dit de gebruiker kan beïnvloeden en passen we onze apps daar op aan.
Svelte
Om de beste prestaties uit onze smart TV-apps te halen, wilden we een JavaScript-framework kiezen dat echt gericht is op prestaties, daarom kozen we Svelte als ons standaard JavaScript-framework. Het is lichtgewicht en we zien geweldige prestaties, zelfs op oudere apparaten. Svelte wordt vaak gebruikt op apparaten met beperkte hardware, zoals point-of-sale-terminals. Zo blijkt dat Svelte om deze reden ook perfect geschikt is voor gebruik op smart TV's.
Waar de meeste JavaScript-frameworks worden meegestuurd in de bundle, doet Svelte wat magie in de compileer-stap. De code compileert (ahead of time) naar op zichzelf staande frameworkloze, pure JavaScript die de DOM rechtstreeks manipuleert. Er hoeft dus geen JavaScript-framework opgenomen te worden in de bundle. Dit resulteert in kleinere bundel groottes en verbeterde runtime-prestaties. Naast geweldige prestaties voor gebruikers biedt Svelte ook een betere (zo niet de beste) developer experience 😀. Uit de 'State of JS 2022', een enquête ingevuld door duizenden Frontend Developers, bleek dat het gebruik van Svelte gestaag groeit en het de op één na beste retentie heeft. Een toenemend aantal developers werkt met Svelte en wanneer ze dat doen, hebben ze de intentie om het te blijven gebruiken. Het spreekt voor zich dat we hun enthousiasme hierover delen.
Het werken met webtechnologieën heeft een extra voordeel: we kunnen lokaal in de browser werken. Natuurlijk kunnen we dit alleen doen tot een bepaald stadium van development. Omdat alles overal moet werken, moet het ook grondig worden getest en gecontroleerd op de tv's zelf.
Uitdaging 2: Input
Hoe handig ze ook zijn in gebruik, afstandsbedieningen beperken de complexiteit van gebruikersinteractie in smart TV-apps. Terwijl een muis en een toetsenbord talloze opties bieden voor geavanceerde gebruikersinteractie, heeft een afstandsbediening slechts een beperkt aantal knoppen, die vaak zijn toegewezen aan specifieke functies zoals het navigeren door menu's of basis acties. Dit maakt aanvullende opdrachten zoals het uitvoeren van precieze bewegingen of het invoeren van tekst eenvoudigweg moeilijker uit te voeren. Als gevolg daarvan moeten we bij het ontwikkelen van smart TV-apps vaak dingen die op websites geen probleem zijn anders aanpakken, zoals navigatie.s geen probleem zijn, zoals navigatie.
Spatial navigation
Spatial navigation verwijst naar het bewegen tussen focusbare elementen in een gebruikersinterface. Het vereenvoudigt het proces van het navigeren en selecteren van opties op het scherm, waardoor het gebruiksvriendelijker wordt voor iedereen, ongeacht hun technische kennis. Als deze techniek goed presteert, zou deze voor gebruikers behoorlijk eenvoudig moeten aanvoelen. Maar 'onder de motorkap' is het allesbehalve eenvoudig. Spatial navigation is een zeer complexe techniek met veel edge cases. Laten we eens kijken hoe dit werkt. Stel je voor dat we ons focussen op één element, in dit voorbeeld een card in een rij met video's, en de gebruiker drukt op de knop ‘omhoog’. De spatial navigation library zal de DOM controleren om te identificeren of er elementen direct boven het huidige item zijn geplaatst. Het zal proberen te bepalen welke het dichtst bij is en daarop focussen. Maar wat als er geen item direct boven zit? In dat geval kan het blok erboven worden beschouwd als één geheel en kunnen we bepalen welk item binnen dat blok het dichtste bij ons huidige item is en ons vervolgens daarop focussen.
Dus, de navigatie werkt behoorlijk anders dan met een toetsenbord en muis. Tijdens de development betekent dit dat we ook anders moeten denken. Sommige LG-apparaten gebruiken een afstandsbediening met een gyroscoop, genaamd de "Magic remote". Hiermee kunnen gebruikers een cursor op het scherm verplaatsen (zoals een gewone muis op uw computer) door hun hand te bewegen en op elementen te klikken. Bij het gebruik van deze remote hebben elementen op het scherm ook een 'hover'-state nodig, een indicatie van waar de muis zich momenteel bevindt. Er zijn ook enkele smart TV's op de markt die touch-ondersteuning bieden. Dit betekent allemaal dat we ruimtelijke navigatie, klikken, scrollen en aanraken moeten ondersteunen. Om een soepele en 'zo pijnloos mogelijk' navigatie te bieden, hebben we onze eigen spatial navigation library gebouwd.
Uitdaging 3: Apparaten
Er zijn veel verschillende SmartTV apparaten op de markt. En ze werken allemaal anders. Daarom hebben we er een behoorlijk aantal in ons testlab bij Triple, waaronder LG, Samsung, Hisense, Philips, Roku, Fire TV en nog veel meer. Dit veroorzaakt ook enkele praktische problemen; omdat afstandsbedieningen meestal universeel zijn voor alle modellen van hun merk, kun je gemakkelijk per ongeluk meerdere tv's tegelijk bedienen. Daarom scheiden we in ons kantoor verschillende televisies van hetzelfde merk zoveel mogelijk. We hebben ook enkele creatieve, niet-technische oplossingen geïmplementeerd, zoals het plaatsen van een toiletpapier rol over de afstandsbediening, om het infraroodsignaal goed te kunnen richten op de juiste tv. Een beetje onorthodox, maar wel zeer efficiënt 😊. Sommige apparaten kunnen ook worden bediend via een app, dus gelukkig hebben we niet voor elke afstandsbediening een wcrol nodig.
Balans tussen functies, beperkingen en mogelijkheden
Tijdens het development proces hebben we toegang nodig tot al deze verschillende tv-modellen vanwege de vele verschillen ertussen. De meeste van hen gebruiken een oudere browserversie en de ondersteuning voor CSS en JS varieert sterk. Bijvoorbeeld: wanneer we werken aan een 'eenvoudig' card-component, waarbij alles er goed uitziet in de webbrowser en op de meeste tv's. Maar er kan één specifiek ouder model tv zijn dat een iets andere positionering of schaling heeft voor dit element. De enige manier waarop we dat zouden weten, is door functies te testen op elke ondersteunde tv. Hoewel dit slechts een voorbeeld is, komen gevallen zoals deze eigenlijk vrij vaak voor.
Vanuit ervaring weet een developer meestal welke technieken riskant kunnen zijn om te gebruiken en welke technieken breed ondersteund worden. Onze top-down benadering betekent dus dat we altijd kijken naar functies die worden ondersteund door nieuwere apparaten, zodat we de beste en meest up-to-date ervaringen op die apparaten kunnen bieden. Natuurlijk eindigen we in de praktijk vaak met uitgebreide tests op de slechtste en oudste apparaten omdat ze de meeste beperkingen hebben.
Beschikbare tools
Als smart TV Developers hebben we niet altijd dezelfde tools tot onze beschikking als Web Developers, dus moeten we vindingrijk zijn. Voor het ontwikkelen van websites is er bijvoorbeeld een geweldige tool, caniuse.com, die alle verschillen tussen browserversies laat zien. Helaas bestaat dit soort referentie niet voor smart TV's, dus hebben we zelf een soortgelijk overzicht gemaakt. Natuurlijk is het niet zo uitgebreid als caniuse.com, maar het is wel zeer nuttig, het versnelt de ontwikkeling en het vermindert fouten in de apps die we bouwen. Gelukkig zijn er development tools beschikbaar op alle apparaten. Ze worden meestal aangeboden in een oude versie van Chromium, wat betekent dat we de nieuwste functies van moderne browsers niet kunnen gebruiken. We hebben wel de mogelijkheid om op afstand te debuggen, elementen te inspecteren, JavaScript-code te debuggen, netwerkactiviteit te analyseren, prestaties te profileren en fouten bij te houden via de console; vergelijkbaar met het proces van regulier website-debuggen. Het beschikbaar hebben van al deze tools is essentieel voor een debug workflow en versnelt het oplossen van problemen. Dus hoewel we soms workarounds moeten gebruiken, zorgen we ervoor dat het eindresultaat altijd optimaal is.
Uitdaging 4: Op afstand werken
Tijdens de Covid-pandemie lockdowns werden we gedwongen om vanuit huis te werken. Voor een smart TV Developer was dit, op zijn zachtst gezegd, uitdagend. Geen van onze huizen heeft ruimte om een hele hoop tv's te plaatsen, maar we hebben ze wel bijna elke dag nodig. Om dit probleem aan te pakken, kwamen we met een creatieve oplossing (zelfs creatiever dan de eerder genoemde toiletpapierrollen op onze afstandsbedieningen 😊). We hebben twee camera's in ons testlab geïnstalleerd die op afstand kunnen worden bediend en die daarbij ook nog 360 graden kunnen draaien. Hierdoor kunnen we de camera's vanuit huis bedienen en ze op elke tv richten die we nodig hebben.
Het bedienen van de tv is een tweede uitdaging. Hiervoor hebben we een systeem geïnstalleerd met een infraroodsensor onder elke tv. Deze sensor kan worden bediend via internet door middel van een webapp of een mobiele app, waardoor we op afstand controle hebben over de tv. Hoewel dit systeem niet perfect is, stelt het ons wel in staat om ons werk voort te zetten en productief te blijven. We blijven de opstelling voortdurend verbeteren, aangezien we bij Triple een flexibel beleid voor thuiswerken handhaven.
Uitdaging 5: Videostreaming
De video player is absoluut één van de belangrijkste elementen in onze apps, de gebruikerservaring en al onze uitdagingen. Uiteindelijk draait het allemaal om video in apps zoals Netflix, NLZIET of NOS.
Als je naar het HTML-video element kijkt, lijkt het afspelen van een video eenvoudig. Gewoon wat videobestanden als source toevoegen, misschien zelfs meerdere bestanden voor volledige ondersteuning, en dat is het dan. Toch? Dat zou je denken. Helaas zijn er enkele valkuilen. Over het algemeen moet het hele bestand worden gedownload om af te spelen. Hoewel dit prima werkt voor kleinere bestanden, geldt dat niet voor video's van twee uur. En hier komt videostreaming om de hoek kijken.
Streaming oplossingen voor de optimale ervaring
Om de ervaring te verbeteren, is een goede oplossing 'progressive streaming', waarbij de metagegevens aan het begin van het videobestand worden geplaatst. Dit betekent dat de video kan beginnen met afspelen terwijl de rest nog wordt gedownload. Maar bij progressive streaming werken we nog steeds met één videobestand en één formaat voor alle apparaten. Voor een groot scherm kan de kwaliteit te laag zijn, terwijl deze weer voor een zeer klein scherm te hoog kan zijn. Als je delen van de video wilt overslaan, moet je het hele bestand downloaden tot het punt waar je naartoe wilt. Als je een internetverbinding met lage kwaliteit hebt en de videogegevens niet snel genoeg worden geladen, moet de video pauzeren en wachten op meer gegevens (‘bufferen’). En ik weet niet hoe het met jou zit, maar wachten is niet onze favoriete bezigheid.
Met videostreaming splitsen we een grote video op in meerdere kleinere stukken, ofwel: 'segmenten', en deze worden één voor één geserveerd. Op deze manier kunnen we alleen de delen van de video laden die we daadwerkelijk nodig hebben. Dus als we naar een punt halverwege de video gaan, hoeft de player alleen de segmenten in de buurt van dat punt te downloaden en vanaf daar verder te gaan. We gebruiken een afspeellijst om te bepalen welk segment waar moet worden geplaatst, zodat de speler weet wat te downloaden en af te spelen.
Adaptive Bitrate Streaming
Adaptive Bitrate Streaming (ABR) is een geavanceerde technologie die de kwaliteit van videomateriaal in real-time dynamisch aanpast, zodat je gegarandeerd een vloeiende weergave hebt, ongeacht de netwerkcondities.
🤔 Wat is Birate?
Bitrate is de hoeveelheid gegevens die per eenheid van tijd wordt verwerkt. Lees: aantal Bits per seconde. Over het algemeen betekent een hogere bitrate betere kwaliteit, maar ook een grotere bestandsgrootte. Bij Adaptive Bitrate Streaming hebben we ook meerdere bestanden (segmenten) in een stream, maar nu ook op verschillende kwaliteitsniveaus (of bitrates) voor verschillende doeleinden (zoals schermen/apparaten). En het beste gedeelte: een speler kan de geselecteerde kwaliteit aanpassen aan de beschikbare internet bandbreedte en naadloos tussen deze kwaliteitsniveaus schakelen, automatisch of door keuze van de gebruiker.
Laten we dit duidelijker uitleggen aan de hand van een voorbeeld: stel je voor dat je op de achterbank van een rijdende auto naar een video kijkt op je telefoon. Je verbinding is sterk afhankelijk van je locatie. Wanneer je begint met het kijken van de video, kan de verbinding erg goed zijn en kun je genieten van video's van de hoogste kwaliteit. Maar wanneer de auto een tunnel binnenrijdt, kan de internetverbinding wegvallen. En hier komt het trucje: wanneer de videospeler niet in staat is om de videoframes snel genoeg te downloaden voor een soepele ervaring, zal deze automatisch overschakelen naar een lagere kwaliteit. De gebruiker kan de daling in kwaliteit opmerken, maar deze ervaring is veel beter dan het pauzeren van de video om te bufferen.
Videostreaming is een complex proces, vanwege de tijdsgebonden aard en de vele processen die tegelijkertijd plaatsvinden. We hebben de video player nodig om de inhoud naadloos te leveren voor een optimale kijkervaring. Daarom is videostreaming technologie een cruciaal element voor ons, omdat we ervoor moeten zorgen dat gebruikers een consistente en ononderbroken kijkervaring hebben.
De voor- en nadelen van HTML-video-elementen
Voordat het HTML-video-element in 2007 werd geïntroduceerd, gebruikten we programma's zoals QuickTime of Shockwave om video's op websites weer te geven. Ze voelden vreemd aan op de webpagina, gewoon omdat ze dat ook waren. Het gebruik van externe plug-ins kun je zien als het maken van een gat in de webpagina en er vervolgens een videospeler achter plaatsen. Aangezien dit externe plug-ins waren, waren de spelers zelf een ‘black box’ en hadden we geen controle over wat daar gebeurde. Gelukkig veranderde alles toen Opera het HTML-video-element voorstelde in 2007.
Het HTML-video-element is het tegenovergestelde van een ‘black box’. Je kunt zelfs met de rechtermuisknop op de player klikken om het videobestand te downloaden (wat potentieel een probleem kan zijn als het gaat om de auteursrechten van die video).
Digital Rights Management
En dit brengt ons bij Digital Rights Management (DRM), wat de zaken nog ingewikkelder maakt... Uit het tijdperk van videobanden herinner je misschien nog de berichten aan het begin van de videoband waarin je 'vriendelijk' werd gevraagd om deze niet te kopiëren. Bij dvd's stopten makers met vriendelijk vragen en versleutelden ze de videobestanden. Dvd-spelers bevatten de sleutel om de inhoud te decoderen. Het was misschien niet het veiligste systeem, maar het werkte destijds. Tegenwoordig zijn de zaken veel ingewikkelder geworden.
Verschillende diensten voor verschillende apparaten
In het huidige digitale landschap is de bescherming van intellectueel eigendom en auteursrechtelijk beschermd materiaal van het grootste belang. Digital Rights Management dient als een cruciaal instrument om ervoor te zorgen dat digitale inhoud veilig blijft en beschermd is tegen ongeautoriseerde toegang of verspreiding. DRM omvat piraterijpreventie, toegangscontrole en gebruiksbeperkingen, allemaal via versleuteling. Echter, versleuteling op zich is hiervoor niet voldoende. Als de decryptiesleutel openlijk wordt overgedragen en leesbaar is voor de client, zou dit zeer beperkte beveiliging bieden. Daarom zijn er diensten die de sleutel verbergen: "Security by obscurity". Wanneer we het hebben over DRM bij streaming, verwijzen we meestal naar drie verschillende diensten:
Widevine - Door Google
Fairplay - Door Apple
Playready - Door Microsoft
Aangezien verschillende apparaten ondersteuning bieden voor verschillende diensten, biedt het gebruik van slechts één dienst meestal niet voldoende dekking. Als je wilt dat een app beschikbaar is op alle apparaten, heb je mogelijk meerdere diensten nodig. Hoe werkt een dienst als deze?
De videospeler ontvangt videomateriaal van CDN, dat mogelijk is versleuteld.
De playback application stuurt een verzoek naar de DRM-licentieserver. Dit wordt afgehandeld door een content decryption module, een stukje software in de browser of het apparaat. Dit betekent dat wij, als developers, er geen controle over hebben.
De licentie-proxyserver fungeert als een tussenpersoon tussen de playback application en de licentieserver. Het helpt bij het beheren van licentieaanvragen, voegt een extra beveiligingslaag toe en biedt schaalvoordelen.
De licentieserver controleert het verzoek en genereert een licentie met decryptiesleutels en gebruiksrechten die specifiek zijn voor de gebruiker en hun apparaat.
De licentie wordt teruggestuurd naar de playback application op het apparaat van de gebruiker en kan een reeks instructies bevatten, zoals vervaldatums, op welk apparaat het kan worden afgespeel en bijvoorbeeld of het kan worden gedownload.
De speler gebruikt de ontvangen licentie om de versleutelde inhoud te decoderen, zodat deze kan worden afgespeeld.
Eenmaal gedecodeerd kan de inhoud veilig worden afgespeeld op het apparaat van de gebruiker, wat ervoor zorgt dat deze wordt beschermd tegen piraterij en ongeautoriseerd kopiëren.
Natuurlijk is dit slechts een algemeen idee van het proces. Hoewel we genoeg weten om ermee te werken vanuit ons (het speler) perspectief, hoeven we niet elke laatste gedetailleerde stap te kennen. En dat is precies het idee achter DRM-diensten: een black box, 'security by obscurity'.
Conclusie
Samenvattend biedt development van smart TV-apps een unieke reeks uitdagingen die developers moeten overwinnen om een naadloze en boeiende gebruikerservaring te bieden. Het overwinnen van deze uitdagingen vereist niet alleen een combinatie van technische expertise, grondige planning en effectieve samenwerking, maar ook vindingrijkheid en creativiteit. We moeten buiten de gebaande paden denken. En dat is precies wat het ontwikkelen van smart TV-apps zo interessant maakt. Uiteindelijk is succesvolle ontwikkeling van smart TV-apps gebaseerd op het begrijpen van de unieke uitdagingen van het platform en het benutten van innovatieve oplossingen om hoogwaardige apps te leveren die gebruikers een meeslepende en bevredigende ervaring bieden. Bij Triple is dit wat we nastreven. En bij voorkeur ook een prettige ervaring voor developers 😊.
Ontdek de Triple Universe
Leer meer over Triple, onze cultuur of neem een kijkje tussen onze vacatures.
