JavaScript is de standaard programmeertaal voor webapplicaties. Maar voor liefhebbers van Python is er goed nieuws: dankzij PyScript kun je ook in je favoriete programmeertaal webapplicaties bouwen. Hierdoor krijg je toegang tot een breed scala aan populaire Python-bibliotheken. Bovendien kun je de Python-code moeiteloos communiceren met JavaScript-code.

Webapplicaties maken doorgaans gebruik van een drie-eenheid van (programmeer)talen: HyperText Markup Language (html), Cascading Style Sheets (css) en JavaScript. Html is een opmaaktaal waarmee je de structuur en inhoud van een webpagina definieert. Met css definieer je stijlen die de vormgeving van de pagina beschrijven. En JavaScript is een programmeertaal waarmee je het gedrag van de pagina bepaalt.

Hoewel JavaScript de dominante programmeertaal is in de wereld van webapplicaties, heeft het erbuiten niet dezelfde populariteit kunnen winnen. Python daarentegen is een populaire programmeertaal in diverse domeinen, onder andere voor data-analyse, machine learning, wetenschappelijke projecten, scripting en de serverkant van webapplicaties. Hoe handig zou het zijn als je jouw kennis van Python ook in de webbrowser kunt toepassen?

1 PyScript

Dat is precies wat PyScript mogelijk maakt: Python-toepassingen ontwikkelen die in de webbrowser werken. Net zoals je JavaScript-code in een html-pagina kunt opnemen, kun je dat dankzij PyScript ook met Python-code doen. Bovendien kunnen Python- en JavaScript-objecten probleemloos met elkaar communiceren, zodat je niet gebonden bent aan PyScript, maar je Python-code kunt combineren met bestaande JavaScript-bibliotheken.

Je kunt met PyScript ook gebruikmaken van heel wat populaire Python-pakketten, zoals Beautiful Soup, Matplotlib, NumPy, Pandas of Scikit-learn. Op die manier kun je dus niet alleen je kennis van de programmeertaal Python meenemen naar je webapplicaties, maar ook die van het uitgebreide Python-ecosysteem. Als je dus vertrouwder bent met Python dan met JavaScript en je webapplicaties wilt bouwen, dan is PyScript een logische keuze.

2 Hallo wereld

Een PyScript-webapplicatie heeft drie bestanden nodig. Eerst en vooral een html-bestand, bijvoorbeeld index.html, met de structuur van je webpagina, verwijzingen naar PyScript zelf en je eigen Python-script. Een tweede bestand beschrijft de Python-omgeving waarin je applicatie draait. Hierin geef je bijvoorbeeld aan welke extra Python-pakketten je script gebruikt. Dit bestand heet pyscript.toml of pyscript.json. Tot slot is er je Python-script zelf, dat je in een Python-bestand als main.py opslaat.

Een eenvoudig html-bestand voor een PyScript-applicatie ziet er als volgt uit:

Je verwijst hier in het element head naar de css-stylesheet en JavaScript-code van PyScript. In het element script van de body verwijs je dan naar je Python-script.

3 Python-script

In de body van de html-pagina vind je het element button met een attribuut py-click dat de waarde "generate_text" heeft. Hiermee geef je aan dat bij een klik op die knop de Python-functie generate_text wordt aangeroepen. In het element script verwijs je vervolgens naar je Python-script main.py. Met type="py" geef je aan dat het om een Python-script gaat in plaats van een JavaScript-bestand. En met het attribuut config verwijs je naar het configuratiebestand waarin je definieert welke Python-pakketten PyScript voor je applicatie moet installeren. Als je bijvoorbeeld het pakket lorem-text wilt gebruiken, dan ziet het bestand pyscript.toml er als volgt uit:

Het Python-script main.py heeft de volgende inhoud:

We importeren hier dus de module lorem uit lorem-text, het pakket dat we hebben geïnstalleerd. Vervolgens importeren we ook document uit PyScript. In de functie generate_text, die wordt aangeroepen wanneer je in de webpagina op de knop klikt, krijg je via document toegang tot het volledige Document Object Model (DOM) van de webpagina. Hiermee selecteer je het element met de id output. De functie roept dan lorem.paragraph() aan om een alinea met willekeurige tekst te genereren en kent die toe aan de tekst van het geselecteerde element.

4 Webserver

Je PyScript-applicatie is nu klaar, maar je kunt het html-bestand niet gewoonweg in je webbrowser openen als een lokaal bestand. Je moet het bestand via een webserver aanbieden. Als je Python lokaal (op je computer) hebt geïnstalleerd, kun je eenvoudig de ingebouwde webserver van Python opstarten. Navigeer in een terminalvenster of opdrachtprompt naar de directory waarin je PyScript-bestanden staan en voer de volgende opdracht uit:

Dit start een webserver op poort 8000 die de inhoud van de huidige directory aanbiedt. Bezoek vervolgens in je webbrowser de url http://127.0.0.1:8000/, die verwijst naar poort 8000 op je computer zelf. Je krijgt nu een webpagina te zien met als titel Hallo wereld en een knop met als label Lorem ipsum.

Wacht even tot de hele PyScript-omgeving is ingeladen. Klik dan op de knop wanneer die niet meer grijs is. Eronder verschijnt vervolgens een alinea met willekeurige tekst. Elke keer dat je op de knop drukt, verschijnt er een nieuwe tekst omdat de functie generate_text weer wordt aangeroepen.

5 Grafieken plotten

Nu kun je ook in je webapplicaties gebruikmaken van het krachtige ecosysteem van Python-pakketten voor bijvoorbeeld datavisualisatie, zoals Matplotlib. Het principe is hetzelfde als het eerste voorbeeld met de lorem ipsum-tekst: je creëert een html-bestand met de structuur van je webpagina, een bestand met de Python-pakketten die je nodig hebt, en uiteindelijk een bestand met je Python-code. Het bestand met de afhankelijkheden, pyscript.toml, vermeldt eenvoudigweg het pakket Matplotlib:

Het html-bestand index.html ziet er als volgt uit:

In dit voorbeeld laten we de gebruiker een amplitude en periode kiezen, om vervolgens een grafiek van de sinusfunctie met die ingestelde amplitude en periode te plotten.

6 Schuifbalken

In de html-code definiëren we twee elementen input van het type range. Je webbrowser toont die als schuifbalken. We stellen voor elk element een minimum en maximum in, een stap (de waarde waarmee de schuifbalk per eenheid wordt verschoven) en een standaardwaarde. We geven beide elementen ook een label, met diezelfde standaardwaarde, zodat de gebruiker niet alleen een bolletje op een schuifbalk ziet, maar ernaast ook de waarde die daardoor wordt ingesteld.

Eronder plaatsen we dan een element div waarin de grafiek komt. We definiëren hier ook een script dat naar het Python-bestand en de configuratie met de te installeren pakketten verwijst. In de elementen input verwijzen we ook naar de in dit Python-bestand gedefinieerde functie plot_sine die wordt uitgevoerd bij elke wijziging van de invoer in het element. De webapplicatie roept de functie daardoor aan telkens als je aan de schuifbalk sleept.

7 Sinus plotten

Dan volgt uiteindelijk de code in main.py om de sinusfunctie te plotten:

De functie plot_sine haalt allereerst de waarde op van het element met de id amplitude en wijzigt de tekst van het label voor dat element naar die waarde. Daarna doet de functie hetzelfde voor het element met de id period. Deze eerste regels code synchroniseren dus elke keer de getoonde waarde met de ingestelde waarde, zodat de gebruiker onmiddellijk feedback krijgt bij het schuiven.

Daarna creëren we met NumPy’s functie arange een reeks x-waarden en vervolgens berekenen we voor elk van die x-waarden de sinusfunctie met NumPy’s functie sin. Door het argument van de sinusfunctie te vermenigvuldigen met 2π en te delen door de periode, berekenen we de sinus met de gewenste periode: de kromme wordt zo breder of smaller geplot. Door het resultaat van de sinusfunctie met de amplitude te vermenigvuldigen, wordt de kromme hoger of lager geplot.

Uiteindelijk maken we de huidige figuur leeg, plotten we de x- en y-waardes in het blauw, voegen we een raster toe en stellen we het bereik voor de x- en y-as in. Daarna tonen we de plot in het target sine, dat verwijst naar de id van het desbetreffende element div in het html-bestand. Helemaal op het einde van het Python-bestand roepen we de functie ook expliciet op. Zo wordt de grafiek ook getoond nadat de pagina is geladen, zonder dat de gebruiker eerst met een van de schuifbalken moet schuiven.

8 JavaScript in Python aanroepen

Er bestaat uiteraard al een heel ecosysteem van JavaScript-bibliotheken voor webapplicaties. Je hoeft het wiel niet opnieuw uit te vinden in Python of een Python-alternatief te zoeken als je er al een in JavaScript bij de hand hebt. Zoals we eerder al schreven, biedt PyScript volledige interoperabiliteit tussen Python- en JavaScript-code in je webapplicaties. Om JavaScript-functies in je Python-code aan te roepen, importeer je de globale JavaScript-namespace met:

Daarna gedraagt js zich in je Python-code als een Python-module en kun je alle globale JavaScript-functies aanroepen met js.naamvanfunctie.

Als je asynchrone JavaScript-functies wilt aanroepen, moet je ook de module asyncio in je Python-code importeren en de functies aanroepen met await ervoor.

9 Alles in één

Laten we dit eens illustreren met een eenvoudig voorbeeld dat de JavaScript Fetch API gebruikt om je publieke ip-adres via de website ipify op te vragen. We tonen meteen een alternatieve manier om PyScript te gebruiken door de Python-code rechtstreeks in het html-bestand te plaatsen in plaats van een afzonderlijk Python-bestand. Zo heeft onze webapplicatie maar één bestand nodig, het html-bestand:

We creëren hier in de body een element py-script met daarin de Python-code. Merk op dat dit element een attribuut async heeft, omdat we in de Python-code een asynchrone functie met await aanroepen. Zonder het attribuut async zou de code niet werken.

10 Webpagina ophalen

De code roept de globale JavaScript-functie fetch aan met als argument de url van de API van ipify. Dit is een asynchrone JavaScript-functie, vandaar dat we die aanroepen met await js.fetch(url). Van het resultaat vragen we de tekst op. Omdat dit ook een asynchrone JavaScript-functie is, moeten we dit in onze Python-code ook met await aanroepen.

Als dit succesvol is, bevat de variabele public_ip het antwoord van de webserver van ipify, namelijk je publieke ip-adres. We creëren dan een f-string met de boodschap “Mijn publieke IP-adres:” gevolgd door het betreffende ip-adres. Met de functie display (die je niet mag vergeten te importeren uit de module pyscript) toon je deze string in het html-element waarin deze Python-code wordt uitgevoerd, namelijk het paragraaf-element p. En zo krijg je wanneer je deze webpagina laadt na een korte pauze je ip-adres te zien.

11 Python REPL

Met PyScript kun je zelfs een Python REPL (read-eval-print loop) in je webpagina toevoegen: een terminalvenster waarin je Python-opdrachten uitvoert, volledig client-side in je webbrowser. De html-code hiervoor ziet er als volgt uit:

De attributen terminal en worker voor het element script zijn hier belangrijk. Het eerste attribuut toont een terminal waarin de uitvoer van de Python-functie print komt, en het tweede attribuut maakt de terminal interactief (bijvoorbeeld om de gebruiker invoer te vragen met de Python-functie input).

Als je deze webapplicatie zo zou uitvoeren, zou je in de JavaScript-console een foutmelding krijgen: “Error: Unable to use SharedArrayBuffer due insecure environment.” Om je webpagina in een veilige context te plaatsen, moet je de HTTP-headers Cross-Origin-Opener-Policy, Cross-Origin-Embedder-Policy en Cross-Origin-Resource-Policy instellen.

De eenvoudige ingebouwde webserver van Python die we in dit artikel gebruiken, doet dat niet. Maar als je het bestand mini-coi.js via deze GitHub-pagina downloadt en in dezelfde directory als je html-bestand opslaat, en in het element head van je html-pagina vóór alle scripts, links en styles hiernaar verwijst met <script src="./mini-coi.js" scope="./"></script>, werkt dit wel. Laad de pagina, wacht even tot de Python-omgeving is opgestart, en je kunt aan de slag in je interactieve Python-terminal.

QNED, het antwoord van LG op quantum dots, wordt toegepast in deze miniled lcd-tv. Dit type televisie is inmiddels erg populair geworden, ook in het subtop- en middensegment van het tv-aanbod. Heeft deze LG 65QNED91T6A genoeg in huis om de concurrentie de baas te blijven?

Deze LG-televisie past perfect in het rijtje van moderne, prima afgewerkte televisies die we dit jaar al vaker voorbij zagen komen. Het toestel is vrij slank dankzij het profiel van slechts 45mm, heeft een mooie metaalkleurige rand rondom en een vlakke rug. Aan de zijdes is de rug zoals bij de meeste toestellen wat afgeschuind. De centrale voet biedt geen verschillende draaiposities, maar het scherm staat desondanks toch 7cm hoog boven het tv-meubel, zodat een soundbar goed onder het scherm past. Het enige echt opvallende kenmerk? Het toestel is relatief zwaar, namelijk 35kg inclusief voet.

De tv beschikt over vier HDMI-poorten die allemaal de maximale HDMI 2.1-bandbreedte van 48Gbps bieden. Dat is nog steeds vrij zeldzaam, maar is wel goed nieuws voor gamers met meerdere high-end gaming-bronnen. Er is ondersteuning voor ALLM, 4K120 en VRR (AMD FreeSync en NVIDIA G-Sync) en op één poort kun je ARC/eARC gebruiken. De input-lag is iets hoger dan bij de oled-modellen, maar blijft zeer goed, 17,0ms (4K60) en 7,6ms (2K120). Wie de tv wil uitbreiden met draadloze luidsprekers, kan gebruik maken van het WiSA-protocol (Wireless Speaker and Audio Association). Je bent wel beperkt tot 2.1-configuraties, een WiSA surround-opstelling is dan helaas niet mogelijk.

Niet alle minileds zijn gelijk

Het gebruik van minileds voor de achtergrondverlichting is iets waar fabrikanten graag mee uitpakken, maar het resultaat per merk en model kan sterk uiteenlopen. Minileds verdelen de achtergrondverlichting in meer segmenten dan wanneer er gewone leds worden toegepast. Het aantal zones kan sterk verschillen, van 100 tot meer dan 1.000. Dat heeft uiteraard impact op de prestaties wat betreft contrast en helderheid.

Deze LG heeft een achtergrondverlichting met 16x10 (160) zones, en dat is vandaag de dag toch redelijk weinig. Concurrenten zitten in dit segment al op 1.500 zones. Het eigen contrast van het VA-paneel is goed, 4.800:1, maar met dat beperkt aantal zones stijgt dat nauwelijks naar 5.000:1, en dat is vooral ook omdat LG erg voorzichtig is met de dimming. Op eenvoudigere testen kan dit wel naar 35.000:1 stijgen. Naar een reden hoeven we niet ver te zoeken, agressief dimmen met zo weinig zones maakt de zonegrenzen zichtbaar, ook omdat ze soms wat traag reageren. Dat stoort erg en hierdoor is een vage halo rond heldere voorwerpen op een donkere achtergrond dan ook onvermijdelijk.

©LG Electronics

Ook op het vlak van helderheid doet de LG op veel vlakken onder voor de concurrentie. Op een 10% venster meten we in de goed gekalibreerde HDR Filmmaker mode 1.099 nits, en op het volledig wit beeld haalt hij nog 644 nits. Dat was twee jaar geleden weliswaar nog acceptabel, maar nu concurrenten vlot over de 2.000 nits gaan, is dat toch wat te beperkt. Het kleurbereik scoort wel uitstekend, daar meten we 95% P3.

Toch heeft LG nog een sterke troef in handen, namelijk de uitstekende kalibratie af fabriek. De Filmmaker mode is zowel in SDR als HDR bijzonder goed gekalibreerd. Dat betekent dat je kunt rekenen op veel schaduwnuances, een neutrale grijsschaal en mooie, natuurlijke kleurweergave. Met HDR10-beeld kan LG’s dynamische tone mapping prachtige resultaten opleveren en daarmee maakt de tv het beste van zijn kleurbereik en helderheid. Witnuances en intense kleuren worden uitstekend bewaard. Alleen heel donkere HDR10-scènes lijden wat onder het beperkte aantal zones, die beelden worden iets té donker. De QNED91 ondersteunt ook Dolby Vision, maar geen Dolby Vision IQ zoals bij de oled-modellen.

Uitstekende beeldverwerking

Naast een uitstekende kalibratie toont deze LG ook sterke prestaties voor beeldverwerking. Dat dankt de tv aan zijn Alpha 8-processor die verbeterd werd met eigenschappen en functies die vorig jaar nog exclusief voor de Alpha 9-processor waren. We kunnen zelfs zeggen dat de LG geen echte zwakke plekken meer heeft. Deinterlacen van 1080i-beelden zoals die van live tv, doet hij prima zodat je zelden nog een gekartelde rand ziet. Upscaling en ruisonderdrukking maken van oudere content mooie 4K-beelden, al kun je van oudere videocontent zoals dvd’s geen wonderen verwachten. Via een superresolutie-bewerking kan de tv wat fijn extra detail toevoegen, dat werkt goed voor HD-materiaal, maar kan bij dvd’s bijvoorbeeld wel voor een wat overbewerkt resultaat zorgen. De ruisonderdrukking kan ook kleurstroken in zachte gradiënten wegnemen.

©LG Electronics

Een lcd-paneel heeft minder bewegingsscherpte dan een oled-paneel, en dus maskeert het fijn detail in snelle actiescènes. Bewegende voorwerpen hebben soms een wazige rand of tonen een beperkt sleepspoor. LG biedt met Motion Pro verschillende opties om dat te elimineren, maar introduceren op hun beurt juist weer andere problemen, dus deze functie kun je beter uit laten staan. Heb je een hekel aan schokken in het beeld wanneer de camera snel beweegt, activeer dan de Trumotion-functie. Zeker voor sport is dat prettig, maar voor film blijft het vaak een kwestie van smaak.

Degelijke audio

De QNED91 is uitgerust met een 2.2-systeem van 40 watt, en ondersteuning voor Dolby Atmos en DTS:X. Onze filmfragmenten klonken prima met een aangename warme klank en een vleugje ruimtelijkheid. Die echte surround sound-ervaring kan je uit dit soort systeem niet halen, zelfs niet met ondersteuning voor de modernste audioformaten. Dat AI niet altijd de juiste resultaten geeft, werd hier bevestigd. De tv heeft een AI-Pro mode voor geluid, maar die klonk erg slecht, zeker voor muziek. In de muziek audiomode konden we het resultaat wél waarderingen, als loop je daar wel tegen beperkingen aan wanneer je voor hardere muziekgenres zoals metal kiest. Met het volume op ongeveer driekwart hoor je de woofer trillen in het chassis en gaat de bas uit de bocht. Al bij al een degelijk resultaat, in lijn met deze categorie. 

WebOS 24, helaas met reclame

De smart tv-omgeving van LG, WebOS, heeft veel goede punten. Zo vind je nagenoeg alle streaming-apps op dit platform, zowel internationaal als lokaal. Daarnaast heeft LG op de 2024-versie van webOS naast Airplay 2 ook Google Cast geïmplementeerd zodat je vanaf je smartphone, Android of iOS, moeiteloos content naar de tv kunt streamen. Apps en andere functies zijn gegroepeerd in zogeheten Quick Cards, zodat je gemakkelijk bepaalde functies kunt terugvinden.

©Eric Beeckmans | ID.nl

Er zijn Quick Cards voor Thuis-hub, Sport, Thuiskantoor, Games, Muziek, Toegankelijkheid en sinds kort ook voor Leren en Groeien. De lay-out van WebOS zelf is vrij eenvoudig en ook redelijk compact zodat je niet nodeloos hoeft te scrollen om iets te vinden. De Magic Remote van LG waarmee je een cursor bestuurt door naar het scherm te wijzen blijft ook een belangrijke factor in het gebruiksgemak. Aangezien smart tv-platformen nog steeds evolueren is het ook erg fijn om te weten dat LG nu vijf jaar lang de nieuwste versie van WebOS op je tv belooft te plaatsen. In dit overzichtsartikel vind je alle info over webOS.

Toch heeft LG wat ons betreft een foute beslissing genomen. De fabrikant toont namelijk nu reclame op het Home-scherm, en die reclame is in tegenstelling tot bij andere fabrikanten niet beperkt tot content, maar kan bijvoorbeeld ook een sportwinkel of automerk tonen. Dat is echt wel het laatste wat we willen. Zelfs de screensaver kan reclame tonen (al zagen daar gelukkig alleen LG’s eigen LG Channel-dienst). Je kunt de reclame uitschakelen via de instellingen, iets dat we dan ook van harte aanraden.

Conclusie

De 65QNED91T6A kan zijn miniled-beloftes niet echt waarmaken. Het aantal zones in de achtergrondverlichting is vrij laag, waardoor er maar een beperkte verbetering van het contrast is. Ook op het gebied van piekhelderheid scoort hij niet overdreven goed. Als we naar concurrenten in deze categorie kijken, zoals Hisense of TCL, dan bieden die meer zones, beter contrast en meer piekhelderheid. LG slaat de plank verder ook mis door reclame op het Home-scherm toe te laten, dat zetten we onverbiddelijk uit.

Ondanks die beperking levert de tv nog voldoende contrast en piekhelderheid, en gecombineerd met een ruim kleurbereik en zeer goede beeldverwerking levert dat alsnog erg mooie beelden. De tv is op zijn best in verlichtte woonkamer. Hij ondersteunt Dolby Vision, maar geen HDR10+. LG vangt dat uitstekend op door zijn eigen dynamische tone mapping. Dat illustreert dat goede beeldverwerking net zo belangrijk als puur contrast of piekhelderheid. WebOS is een prima smart tv-systeem met ruim aanbod apps en functies en nu ook met de garantie voor vijf jaar nieuwe versies voor het OS. De prijs is wat ons betreft echter nog iets te hoog.

Je bent aan het videobellen, maar de achtergrond ziet er slordig uit. Of misschien wil je tussendoor een kort filmpje tonen, het beeld optimaliseren of opfleuren met enkele effecten. Software die je als virtuele webcam gebruikt, maakt dit en nog veel meer mogelijk.

Er zijn al langer applicaties beschikbaar waarmee je filters, effecten en virtuele achtergronden aan je videogesprek toevoegt. De populaire mobiele app Snapchat was een van de eerste. Met uitgebreide filters en lenzen kun je in realtime beelden aanpassen. Je geeft jezelf bijvoorbeeld kattenoren of verandert de omgeving. Snapchat gebruikt Augmented Reality (AR) om digitale elementen over echte beelden te plaatsen.

Inmiddels heeft ook Artificiële Intelligentie (AI) zijn intrede gedaan om effecten nauwkeurig op bewegende gebruikers toe te passen. Videoconferentietools zoals Teams en Zoom, gebruiken AI. Denk aan machinelearning-technologieën en convolutionele neurale netwerken. Daarmee is de gebruiker van zijn achtergrond te scheiden en kan er een virtuele achtergrond worden getoond. Een green screen is niet meer nodig.

In het gratis Microsoft Teams start je bijvoorbeeld een videogesprek via Nu vergaderen / Vergadering starten. Als je op Meer en Achtergrondeffecten klikt, kun je uit tientallen achtergronden kiezen of je achtergrond vervagen. Via Nieuwe toevoegen importeer je een specifieke achtergrond, bijvoorbeeld ontworpen door een AI-beeldgenerator.

Mogelijkheden

Virtuele webcams kun je gebruiken om speciale effecten, filters en grafische overlays aan je live-video toe te voegen, of om de achtergrond te vervagen of te vervangen. Als de gebruikte software dit toelaat, kun je ook afbeeldingen of andere video’s als webcam-uitvoer gebruiken. Zo kun je bijvoorbeeld je computerscherm delen. Tijdens je live-gesprek of -stream wissel je dan tussen video’s, afbeeldingen en zelfs verschillende camera’s, zoals een HDMI-camera die je gebruikelijke videoconferentietool mogelijk niet als (web)camera herkent.

Dit alles maakt dat virtuele webcam-software niet alleen leuk is voor persoonlijk gebruik, maar ook efficiëntere videoconferenties in een zakelijke context, of professionelere videostreams naar platforms als YouTube Live en Twitch mogelijk maakt. Je kunt zelfs de camera van je smartphone als webcam gebruiken. Dat is handig als je een optimaal beeld wilt hebben of als je computer niet over een webcam beschikt.

Applicaties

Er zijn verschillende programma’s voor virtuele webcams. In dit artikel focussen we ons op software die onder Windows draait en ook beschikbaar is als mobiele app. Op die manier kun je je smartphone of tablet als webcam gebruiken. Populaire applicaties zijn onder meer FineCam en ManyCam, die we beide kort voorstellen. Daarnaast besteden we aandacht aan een gratis opensource-alternatief: OBS Studio. Met deze tool combineer je meerdere videobronnen en creëer je scènes en overgangen. Dit maakt het bij uitstek geschikt voor live-streaming en schermopnames. OBS Studio ondersteunt bovendien een virtuele webcamfunctie, waardoor je OBS-uitvoer in videoconferentie-apps kunt gebruiken.

FineCam: set-up

Download FineCam. Met een druk op Install zet je de software op je pc. De gratis versie heeft een watermerk in de video. Wil je deze weg hebben? Dan heb je de betaalde Pro-versie nodig. Deze kost eenmalig zo’n 60 euro en ondersteunt ook resoluties van 1080p en hoger.

Na het opstarten kun je via het pijlknopje linksboven je aangesloten webcam selecteren. Een andere optie is om een mobiel Apple- of Android-apparaat te kiezen. Je moet dan wel de mobiele app van FineCam op dit apparaat draaien. Als het apparaat met hetzelfde netwerk is verbonden, druk je op de mobiele app op Connect en bevestig je met Agree in de desktop-app om een verbinding te maken. Het camerabeeld verschijnt dan direct in het applicatievenster.

FineCam: configuratie

FineCam kun je op verschillende manieren aansturen. We beperken ons tot de opties die ook in de gratis versie beschikbaar zijn. Zo kun je bijvoorbeeld het camerabeeld verplaatsen over de achtergrond, maar niet schalen. Bovenaan vind je knoppen om in- en uit te zoomen, het beeld te keren of te roteren en de vorm in te stellen, zoals Rectangle of Circle. Met Adjustment onderaan optimaliseer je de licht- en kleurinstellingen met schuifregelaars, zoals Brightness, Contrast, Saturation en White Balance.

Je kunt ook op Filter klikken om een van de ruim dertig vooraf ingestelde beeldweergaves te selecteren. Is je eigen fysieke achtergrond niet geschikt voor videobellen? Kies dan via Background uit twintig virtuele achtergronden. Of ontwerp je eigen achtergrond door bij AI Generated Background een prompt voor de AI-beeldgenerator in te voeren.

Kies je via Theme een lay-out waarbij je eigen webcambeeld niet het volledige scherm bedekt, dan kun je met Content tegelijkertijd andere inhoud tonen. Denk aan een webpagina, applicatievenster, video (ook via een YouTube-url), iPhone-beeld, PowerPoint-presentatie, tekst of eigen foto. In je videoconferentietool selecteer je FineShare FineCam om de virtuele camera te gebruiken. Mogelijk moet je nog bevestigen met de blauwe knop Virtual Camera rechtsonder in FineCam.

ManyCam: set-up

FineCam bevat ook de knop Multi-scenes waarmee je meerdere virtuele opzetten klaarzet en snel schakelt. Helaas is deze functie alleen beschikbaar in de Pro-versie. Een goed alternatief is dan ManyCam voor Windows en macOS. De betaalde versies zijn er vanaf ongeveer 45 euro per jaar. Je hebt dan geen watermerk en meer effecten, hogere resoluties (full HD tot 4K) en meerdere simultane videobronnen.

We beperken ons hier tot de gratis versie mét watermerk. Start de tool en klik op de plusknop in het hoofdvenster. In het uitklapvenster bij Camera’s selecteer je de gewenste (web)cam. In het rechtervenster kun je allerlei beeldinstellingen aanpassen, zoals Zoomen, Corner Radius, Ondoorzichtigheid en diverse opties bij Color Adjustment.

ManyCam: configuratie

In de gratis versie van ManyCam kun je maximaal twee presets klaarzetten, elk met verschillende beelden en instellingen. Klik op de plusknop in het tweede vakje onderaan het camerabeeld. Je kunt nu een andere camera selecteren of kiezen uit diverse opties, zoals Afbeeldingen en video’s, PowerPoint, PDF, YouTube URL en Desktop. Bij meerdere beeldschermen kun je zelf aangeven welk scherm je live wilt tonen. Andere opties zijn hier onder meer Gebied onder cursors (handig voor het volgen van je muisbewegingen) en App-venster. Net als bij FineCam kun je hier ook een mobiel apparaat gebruiken, waarmee je smartphone of tablet als webcam werkt.

Een preset verwijder je eenvoudig via het prullenbakicoon. Met het knopje met de drie puntjes stel je een visueel overgangseffect in bij het schakelen tussen presets. Er zijn nog vele andere effecten beschikbaar via de toverstaf bovenaan. Kies uit verschillende rubrieken, zoals GIFS (druk op het plusknopje om eigen afbeeldingen te gebruiken), Animals, Emojis en Face Accessories. Via Asset Store download je extra items.

OBS Studio: set-up

Zowel FineCam als ManyCam zijn gebruiksvriendelijke programma’s, maar helaas zijn de mogelijkheden in de gratis versies beperkt en wordt je video ontsierd door een watermerk. Een volledig gratis alternatief is OBS Studio. Download de tool (beschikbaar voor Windows, macOS en Linux) en installeer deze. Bij de opstart merk je al snel dat er veel functies zijn. We beperken ons hier tot enkele leuke opties voor het gebruik van een virtuele camera.

Allereerst controleer je de videoresolutie. Klik rechtsonder op Instellingen en open de rubriek Video. Stel de Basisresolutie bij voorkeur in op die van je monitor (bijvoorbeeld 1920x1080 en 16:9). De Uitvoerresolutie stel je normaal gesproken op dezelfde waarden in, tenzij je videoconferentietool andere waarden voorstelt. Bevestig met OK.

Linksonder in het hoofdvenster merk je dat OBS Studio al één scène heeft aangemaakt. Rechtsklik op deze scène en noem deze bijvoorbeeld Virtuele webcam. Nu moet je natuurlijk nog de gewenste bronnen aan je virtuele webcambeeld toevoegen.

OBS Studio: bronnen

Standaard heeft OBS Studio al één bron toegevoegd: Vensteropname. Je mag deze selecteren en met het prullenbakicoon verwijderen. Druk vervolgens op de plusknop en kies Video opname-apparaat om je fysieke webcam toe te voegen. Kies Nieuwe maken en geef deze als naam bijvoorbeeld Mijn webcam. Bevestig met OK en kies de juiste webcam bij Apparaat. Resolutie/FPS Type staat standaard op die van het apparaat, maar je kunt hier ook Aangepast kiezen. Klik op Video Instellen om allerlei beeldinstellingen te optimaliseren.

Na je bevestiging met OK verschijnt het webcambeeld op je canvas en kun je dit met de muis verplaatsen, roteren en schalen. Dit is vooral interessant als je nog andere content (bronnen) wilt toevoegen. Klik op (De)activeren om de video in één keer zichtbaar of onzichtbaar te maken.

Voor extra content klik je op het plusknopje bij Bronnen en voeg je onderdelen toe zoals Afbeelding, Beeldschermopname, Browser, Diashow, Vensteropname (van een nader te bepalen app) of Mediabron (om bijvoorbeeld een eigen videobestand te tonen). Elk van de toegevoegde bronnen kun je vervolgens positioneren en schalen op je canvas.

Wil je snel kunnen afwisselen tussen een beeld waarin je zelf prominent op de voorgrond staat met een applicatievenster verkleind op de achtergrond, en andersom? Maak dan twee scènes aan. Klik met rechts op je eerste scène, kies Dupliceren en noem deze bijvoorbeeld Applicatie (webcam). Vervolgens schaal je de objecten (bronnen) van de andere scène naar wens. Klik ook met rechts op zo’n object, want er zijn nog veel meer opties. Zo kun je bijvoorbeeld via Volgorde / Naar boven verplaatsen een object in één keer naar de voorgrond halen.

OBS Studio: camera

Vanuit ditzelfde contextmenu kun je nog veel andere bewerkingen uitvoeren. Bij Transformeren bijvoorbeeld vind je opties om het geselecteerde beeld te spiegelen of te draaien, en bij Filters kun je via de plusknop allerlei beeldeffecten toepassen.

Hoe krijg je de klaargemaakte scènes uit OBS Studio in je videoconferentie-app? Dit is wellicht eenvoudiger dan je denkt. Druk rechtsonder in OBS Studio op Start virtuele camera en selecteer in de videoconferentie-app OBS Virtual Camera (bij Skype bijvoorbeeld via Instellingen / Audio en Video, in het uitklapmenu bij Camera). De scène die op dat moment binnen OBS Studio actief is, komt nu in beeld. Een scène-wissel is niet moeilijker dan in OBS Studio de gewenste scène te selecteren.

Onder het camerabeeld bij Scène-overgangen kun je bovendien een transitie-effect instellen dat bij een scène-wissel ook binnen je videoconferentie-app te zien zal zijn. Je kunt op elk moment op Stop virtuele camera drukken om de videostream vanuit OBS Studio te onderbreken.