Die Seitenleiste

Was macht Arc also besonders und unterscheidet ihn von allen anderen Webbrowsern? Arc verabschiedet sich vom herkömmlichen Browser-Interface. Statt einer Reihe von Tabsoben im Browserfenster setzt Arc auf eine praktische Seitenleiste, in der man die Lieblingslinks anheften und durch geöffnete Tabs scrollen können. Der Browser profitiert zudem von einem automatischen Aufräumdienst. Alle 12 Stunden schließt er alle geöffneten Tabs, um Unordnung und Kopfschmerzen zu begrenzen.

Es mag trivial klingen, aber die Seitenleiste bringt Ordnung in das Chaos des Web-Browsing. Oben sehe ich meine “Favoriten”, also die Webseiten, die ich am häufigsten nutze, wie zum Beispiel meinen Notiz-Hub in Notion. Favoriten sind in all meinen Bereichen sichtbar.

Darunter habe ich Tabs angeheftet, die für meinen Arbeitsbereich wesentlich sind. Ich habe Arc so eingestellt, dass er alle offenen Tabs alle 12 Stunden archiviert, aber die angehefteten Tabs bleiben geöffnet, bis ich sie manuell schließe.

Bei den anderen Webbrowsern öffnete öffnet man jeden Tag diesen und sah eine Flut von Links aus vergangenen Tagen und Wochen. Die Tabs erinnerten einen daran, wie sehr man im Rückstand lag. Standardmäßig schließt Arc alle geöffneten Tabs alle 12 Stunden. Meiner Meinung nach, wenn ein Tab es wert ist, behalte ich es, indem ich es in den angehefteten Bereich ziehe. Andernfalls kann ich problemlos mit einer sauberen Oberfläche weitersurfen.

Der untere Teil der Seitenleiste ist der Bereich, in dem geöffnete Tabs erscheinen. Ich wechsle zwischen Tabs, indem ich scrolle oder eine Tastenkombination verwende, was das Browsen zum Kinderspiel macht. Und ich muss nicht mehr die Augen zusammenkneifen, um den Titel einer Webseite oben im Fenster zu lesen. Arcs Seitenleiste zeigt mehr vom Titel als ein herkömmlicher Browser, was es einfacher macht, den richtigen Tab zu finden.

Spaces

Das wirkliche Werkzeug für fortgeschrittene Anwenderorganisationen ist hier Spaces, das einem ermöglicht, schnell zwischen verschiedenen Modi in Arc zu wechseln. Die Bezeichnung der Spaces erinnert an die virtuelle Desktop-Funktion von Mac, wobei die Arc-Spaces gleichzeitig starke Ähnlichkeiten mit den Tab-Gruppen in Safari aufweisen. Jeder Space kann eine unterschiedliche Auswahl an Pins und Tabs, eine andersfarbige Seitenleiste oder sogar verschiedene Benutzerkonten haben. Wenn man persönliche und berufliche Angelegenheiten getrennt halten möchten, die Idee des offenen Kontextwechsels mögen, mehrere Konten im selben Browser zu verwalten, sind Spaces eine wahre Rettung. Spaces sind eine gute Idee, und Arc setzt sie wirklich gut um. So kann beispielsweise ein Bereich für Reisen und ein anderer für Arbeitsinhalte erstellt werden. Dabei greift Arc das Konzept von dem Webbrowser Vivaldi auf.

Durch die Boost-Funktion können Benutzer:innen verschiedene Schriftarten auf praktisch jeden Text anwenden und Farben für jeden Teil einer Webseite anpassen. Dieser Zustand lässt sich selbstverständlich für spätere Verwendungszwecke speichern. Zusätzlich besteht die Möglichkeit, Abschnitte aus dem Sichtfeld zu entfernen, eine Funktion, die durch Skripte weiter verfeinert werden kann. Weitere nützliche Funktionen von Arc umfassen die Bild-in-Bild-Unterstützung für z.B. Google-Meet-Anrufe sowie ein integriertes Notizen-Tool.

Das Betriebssystem für das Internet

Viele ehemals eigenständige Programme haben ihren Weg in Webbrowser gefunden: E-Mails, Textdokumente, Kalender, Planungstabellen, Content-Management-Systeme. Hinzu kommen Nachrichten, soziale Netzwerke, KI-Chatbots, Videokonferenzen, To-do-Listen und, wenn gewünscht, sogar Videobearbeitung – alles im Browser. Die Entwickler von Arc und einige andere argumentieren deshalb, dass ein Browser wie ein Betriebssystem für das Internet sein sollte. Konkret bedeutet dies beispielsweise, einen anderen Ansatz für Tabs zu wählen. Die seitliche Anordnung in Arc ermöglicht eine bessere Lesbarkeit des Inhalts eines einzelnen Tabs, selbst wenn viele gleichzeitig geöffnet sind.

Die integrierten Mediensteuerelemente waren das erste Feature von Arc, die beim ersten Blick auch gleich auffallen. Wenn man beispielsweise einen Twitch-Stream oder einen Spotify-Song abspielt und dann zu einem anderen Tab wechselt, erscheint ein kleiner Player unten in der Seitenleiste, der es einem ermöglicht, Titel zu pausieren oder zu überspringen. Ein Klick auf den Player bringt einem direkt zum Tab zurück. Beim Wechsel von Google Meet werden auch Mikrofon- und Lautsprechersteuerelemente in der Seitenleiste angezeigt. So einfach! So hilfreich! So viel besser als das verborgene Menü in Chrome, das man oft vergisst.

Auch der bereits erwähnte Bild-in-Bild-Modus von Arc, der das, was man gerade ansieht, in einem kleinen Overlay-Fenster anzeigt, wenn man zwischen Tabs wechselt oder zu einer anderen App geht. Derzeit ist es ein sehr grundlegendes Werkzeug – es erfasst den Videoplayer und platziert ihn über anderen Tabs – aber The Browser Company hat anscheinend noch große Pläne für dieses Feature. Features wie diese machen Arc eher zu einem Betriebssystem als zu einem Browser.

In naher Zukunft stellt sich das Unternehmen vor, dass alles, was man tun, mit dem Web verbunden sein wird. Selbst die meisten nativen Apps sind jetzt nur Hüllen um Web-Apps. Warum also alles auf dem Desktop verwalten? Deshalb betrachtet Arc die Seitenleiste als einen App-Starter, und deshalb gibt es einen Ort zum Speichern und Durchsuchen der Screenshots und Downloads, damit man mehr erledigen kann, ohne die App zu verlassen. The Browser Company hat sogar zwei neue Apps in Arc integriert: Notes und Easels. Notes sind einfach, nur eine Möglichkeit, schnell eine leere Seite zu öffnen und Dinge aufzuschreiben. Jede Seite erhält ihre eigene URL, damit man sie speichern oder mit anderen teilen können. Easels sind viel leistungsstärker und gewähren einen Einblick in die wahren Ambitionen von Arc. Ein Easel ist im Wesentlichen eine Tafel, ein leerer Raum, auf dem man schreiben, zeichnen oder Bilder und Videos hinzufügen kann. Man kann sogar einen Screenshot durch eine Live-Version jeder Webseite ersetzen und ein Easel in eine Echtzeitansicht von vielen Websites gleichzeitig verwandeln. Jedes Easel ist teilbar und kollaborativ.

Arc Search

Mit Arc Search bringt The Browser Company eine neue iOS-Suchmaschinen-App an den Start. Arc Search kombiniert Browser, Suchfunktionen und Künstliche Intelligenz (KI) zu einer innovativen Suchmaschine. Durch die Funktion “Browse for me” erstellt Arc Search eine spezielle Webseite basierend auf der Suchanfrage. Ein Beispiel des US-Technikportals The Verge verdeutlicht dies anhand eines American Football-Spiels. Arc Search durchsuchte das Web und lieferte innerhalb weniger Sekunden eine Vielzahl von Informationen, darunter das Endergebnis, den entscheidenden Spielzug, verwandte Nachrichten, verschiedene Links und weitere kurze Fakten zum Spiel. “In dieser Idee von The Browser Company steckt die Vorstellung, dass ein Browser, eine Suchmaschine, ein KI-Chatbot und eine Website keine getrennten Elemente sind.” Es gibt jedoch auch einen Abschnitt namens “Dive Deeper” am Ende mit einer Auswahl von Links. Im Gegensatz zu KI-Chatbots mit Webzugang wie Copilot und Perplexity AI stellt sich Arc Search vor, dass die KI Webseiten erkundet, indem sie für jede Suchanfrage eine neue Website erstellt.

Gleichzeitig markiert Arc Search eine bedeutende Veränderung für den Arc-Browser. Im vergangenen Herbst erhielt der Browser neue, KI-basierte Funktionen. Während die bisher nur auf dem iPhone verfügbare mobile App von The Browser Company hauptsächlich als Begleit-App für den Desktop diente – eine Möglichkeit, auf offene Tabs zuzugreifen und nicht viel mehr – bereitet sich das Unternehmen mit der Einführung von Arc für Windows-Nutzer darauf vor, sein eigenes plattformübergreifendes Synchronisierungssystem namens Arc Anywhere einzuführen und einige dieser KI-gesteuerten Funktionen für Arc auf anderen Plattformen verfügbar zu machen, berichtet The Verge. Zukünftig wird Arc Search nur noch als Arc bezeichnet und die einzige mobile App des Unternehmens sein, so der CEO von The Browser Company, Josh Miller, laut The Verge.

Miller zufolge besteht noch viel Potenzial für Arc Search, um noch “intelligenter” zu werden. Die zugrunde liegenden KI-Modelle stammen aus einer Mischung von OpenAI und anderen Quellen.

Fazit

Auf gewisse Weise ist Arc eher wie ChromeOS als Chrome. Es versucht, den Browser zu erweitern und zur einzigen App zu machen. In einer Welt, in der alle Apps Webanwendungen sind und alle Dateien URLs sind, wer braucht wirklich mehr als einen Browser? Arc hat recht: Wir brauchen ein Betriebssystem für das Internet, ein Werkzeug, das es uns erleichtert, zwischen Apps zu arbeiten, uns beim Organisieren hilft und einige plattformweite Tools hinzufügt, um alles besser zu machen. Die App wird deutlich nützlicher sein, wenn sie auf Mobilgeräten und Windows verfügbar. Tabs sind passé. Es lebe die Seitenleiste.

Zum Weiterschauen

• Meet Act II of Arc Browser A browser that browses for you | The Browser Company
• Why Everyone Is OBSESSED With Arc Browser | Enrico Tartarotti

Quellen

• https://arc.net/
• https://www.golem.de/news/arc-browser-chrome-alternative-bietet-viele-vivaldi-komfortfunktionen-2307-176236.html
• https://www.theverge.com/23462235/arc-web-browser-review
• https://www.businessinsider.com/arc-web-browser-review-not-using-chrome-2023-8
• https://vivaldi.com/de/
• https://www.zeit.de/digital/internet/2023-10/arc-browser-tabs-ordnung-webbrowser-test
• https://www.heise.de/news/Arc-Search-verspricht-eine-neuartige-Suchmaschinenerfahrung-9612387.html

Fotos/Videos

• Headerbild – Logo/Hintegrundbild: https://arc.net/
• Alle weiteren Artikelfotos: https://arc.net/

The post Arc Browser – Der Webbrowser für das aufgeräumte Internet appeared first on Mobile USTP MKL.

Im Zuge der Masterklasse Mobile des Studiengangs Interactive Technologies, haben wir beschlossen zusammen ein AR Multiplayer Game zu entwickeln. Ausschlaggebend dafür war die Vorgabe, dass ein gemeinsames kreatives Projekt mit allen Teammitgliedern erstellt werden soll. Da sich ein Spiel sehr gut in einzelne Bereiche aufteilen lässt und der Umfang angemessen schien, haben wir uns für dieses gemeinsame Projekt entschieden.

Die Idee

Nach dem Beschluss ein Multiplayer AR Game in Unity realisieren zu wollen, haben wir mit dem Brainstorming begonnen. Schnell haben wir uns für den Tech Stack mit der Game Engine Unity, dem Framework AR Foundation und dem Multiplayer Server Photon entschieden, dazu später mehr. Folgende Spielideen kamen auf:

• ARtillery Game: Jeder Spieler besitzt eine kanone und muss den richtigen winkel finden, um die anderen zu zerstören, vielleicht unter Beeinflussung von echten Wind (sensoren/mikro?) Beispiel: https://rb.gy/g377b
• AR Zombie Apocalypse, einer ist Zombie und kann andere infizieren. Ziel: Zombies müssen in einem Zeitraum alle anderen infizieren (hide & seek)
• AR Treasure Hunt / Geocaching, Zusammenarbeiten um Rätsel zu lösen und schatz zu finden, oder einer versteckt, anderer sucht usw, z.B.: https://t.ly/yt6eA
• Rube Goldberg Machine, z.B.: https://t.ly/0AiCV
• Rennspiel: zufällig generierte strecken in realen Umgebungen, im Stil von Micro Machines (https://bit.ly/3MsMmnl)

Schlussendlich hat der Mehrheit die Idee mit den kleinen Autos, ähnlich zu Micro Machines sehr gefallen und Idee wurde weiter zu einer Art Rocket League in AR mit Modellautos geformt.

Das Konzept

In diesem Multiplayer-Spiel treten 2 vs 2 Spielern gegeneinander an, um mit kleinen Autos den Ball ins gegnerische Tor zu schießen. Das Spielfeld und die anderen Objekten werden in der Realität platziert. Am Spielfeld gibt es zudem eine Bombe von der man sich fernhalten sollte.

Es soll einfach möglich sein, dass jeder mit einem Smartphone, irgendwo in der echten Umgebung ein Spiel erstellen kann und andere Spieler einlädt. Das Spielprinzip sollte leicht zugänglich sein und dennoch durch die Mixed Reality beeindrucken.

Innovative Technologie: Mit Augmented Reality auf Smartphones nutzt das Spiel eine moderne Technologie, um eine realistische Spielumgebung zu schaffen. Spieler können das Spielfeld in ihrer realen Umgebung platzieren, wobei das Spiel sehr vom Chaosfaktor lebt.

Multiplayer-Erlebnis: Das Projekt ermöglicht ein intensives Multiplayer-Spiel mit Teams von 2 gegen 2. Dies fördert die soziale Interaktion und den Wettbewerb unter den Spielern, was besonders in der heutigen Gaming-Kultur beliebt ist.

Spannendes Gameplay: Das Konzept des Spiels, bei dem Spieler mit Autos einen Ball ins Tor schießen, ist einfach zu verstehen und gleichzeitig herausfordernd, was das Spiel für eine breite Zielgruppe zugänglich macht.

Lernpotenzial: Die Entwicklung eines AR-Multiplayer-Spiels erfordert komplexe Fähigkeiten in Bereichen wie 3D-Modellierung, Netzwerkkommunikation und AR-Technologien. Dieses Projekt bot eine hervorragende Möglichkeit für uns Studenten, wertvolle Erfahrungen und Fähigkeiten zu sammeln.

Insgesamt kombiniert Car Kickers AR auf geschickte Weise Technologie, Wettbewerb und Spaß, was es zu einem simplen und chaosorientierten Projekt für unsere Masterklasse machte.

Gruppendynamik

Erst vergangenes Semester konnten wir erste Erfahrungen zur gemeinsamen Zusammenarbeit in der großen Runde sammeln. Im Zuge einer Extreme Programming Week haben wir eine Progressive Web App entwickelt, mit der man Schnitzeljagden realisieren kann. Das Projekt war herausfordernd und sehr lehrreich, mehr dazu könnt ihr im Blogartikel PinGo – oder die einwöchige Entstehung eines Location-Based-Service nachlesen.

Die Personen kannten sich untereinander schon gut und Aufgaben wurden passend je nach Wunsch verteilt. Da jedoch regelmäßige Meetings fehlten und durch den Workload des laufenden Semesters wurden Aufgaben teils aus den Augen verloren. Schnell wurde klar, dass einige mehr Zeit investierten als andere, was jedoch bei solchen Projektarbeiten ein vorhersehbares Phänomen ist.

Projektmanagement

Das Projektmanagement hat Christoph übernommen, da er die Idee einbrachte. Es wurde gemeinsam beschlossen, auf die All-In-One Software Notion zu setzen, welche für Notizen, Aufgaben, Projekte und Zusammenarbeit dient. Darin wurde das gesamte Projektmanagement abgewickelt.

Das Team wurde in unterschiedliche Aufgabenbereiche eingeteilt:

Development & Physics: Mindestens ein oder zwei Teammitglieder sollten sich auf AR-Tracking und die grundlegende Spiellogik konzentrieren. Sie würden sich mit AR Foundation beschäftigen und sicherstellen, dass das Spielfeld richtig in die reale Welt projiziert wird.

Game Design: Diese Abteilung ist für die Konzeption und Gestaltung des Spiels verantwortlich. Game Designer erstellen das Spielszenario, entwerfen die Spielmechanik, Level und Charaktere, und definieren die Spielregeln.

Multiplayer: Ein oder zeit Teammitglieder sollten sich auf den Multiplayer-Aspekt spezialisieren. Das beinhaltet das Arbeiten mit Photon oder einem ähnlichen Netzwerkdienst, um die Synchronisation zwischen Spielern herzustellen.

Mindestens ein Mitglied sollte sich auch um Backend-Systeme kümmern, die für das Speichern von Spielerdaten, Fortschritten und Ranglisten notwendig sind.

User Interface & Sound Design: Ein Mitglied sollte sich auf die Benutzeroberfläche (UI) und die User Experience (UX) konzentrieren, um sicherzustellen, dass das Spiel intuitiv und ansprechend ist.

AR Development: Im Fokus steht hier die Integration der Augmented Reality Funktionalität über das Framework AR Foundation und das Beheben von möglich Problemen des eigentlich Spiels.

Nach der Teameinteilung wurden sämtliche Tasks erstellt, aufgeteilt und priorisiert:

Anfangs wurde noch mit Sprint gearbeitet:

Dies wurde jedoch schnell aus den Augen verloren, da es aufgrund anderer Prioritäten während des Semester unrealistisch war, in regelmäßigen Abständen an dem Spiel zu arbeiten.

Die Umsetzung

Das Softwareprojekt wurde in der Game-Engine Unity umgesetzt. Die AR Aspekte werden mit dem Framework AR Foundation integriert. Das ganze Projekt lässt sich sowohl für Apple als auch Android Geräte bereitstellen.

Unser Tech Stack

Szenen

Die Oberflächen teilen teilt sich auf in:

• Hauptmenü – Scene_Main_Menu
• Quickmatch – Scene_Lobby
• Auto Auswahl – Scene_Player_Selection
• Lobby – Scene_Lobby
• Gameplay – Scene_Gameplay

Player

Das Prefab für den Spieler beinhaltet neben dem eigentlichen 3D-Modell auch das Skript Car Controller, mit dem die Steuerung realisiert wurde, sowie Sound und Animationen:

Scripts

Natürlich sind auch sehr viele Scripts entstanden, grob unterteilt wurde hier das Verhalten folgender Aspekte programmiert:

• AR: Marker-Based und Markerless Verhalten
• Networking und Spawn Management
• Player Movement und Verhalten
• UI und Menü

Genutzte Tutorials

Folgende Tutorials haben maßgeblich zur Entwicklung beigetragen:

• AR Tutorial #1 (Udemy)
• AR Tutorial #2 (Youtube)
• AR Foundation Examples
• Build forAndroid Phone
• Build for Apple Phone
• Medium-Artikel
• Udemy Kurs #1
• Udemy Kurs #2

Projektevernissage

Auf der Projektevernissage erhielten wir durchweg positives Feedback zu unserem AR-Spiel “Car Kickers AR”. Die Besucher:innen fanden den Einsatz von Augmented Reality und den Multiplayer-Aspekt besonders spannend. Dank einer kurzen Erklärung durch unser Team konnten alle schnell ins Spiel einsteigen. Allerdings war die Steuerung der Fahrzeuge mit dem virtuellen Lenkrad aufgrund hoher Sensibilität problematisch, was die Spielerfahrung beeinträchtigte. Ein weiterer Kritikpunkt war, dass die Fahrzeuge gelegentlich am Rand steckenblieben, was das Spielvergnügen einschränkte. Trotzdem wurde die Möglichkeit, vor Ort direkt mit anderen Besucher:innen am virtuellen Spielfeld zu interagieren, als sehr positiv bewertet. Viele zeigten Interesse an der Möglichkeit zum Download des Spiels aus einem App Store, was für die Attraktivität unseres Spiels spricht.

Auf einem Flipchat wurde ganz analog das Feedback der Besucher:innen gesammelt. Unsere Fragen waren folgende:

Wählt euer Lieblingsfahrzeug?

In der Projektevernissage präsentierten wir eine Vielfalt von Designs für auswählbare Fahrzeuge. Besucher:innen wurden aufgefordert, ihre bevorzugten Designs zu wählen, die letztendlich im Spiel integriert werden. Vier Fahrzeuge mit einem eher verspielten Design, darunter Zug- und Schiffautos, kristallisierten sich als besonders beliebt heraus. Dieses Feedback beeinflusst maßgeblich die endgültige Auswahl und Gestaltung der Fahrzeuge im Spiel.

Wie findest du die Steuerung?

Unsere eigenen Tests und das Feedback der Besucher:innen zeigten Probleme mit unserer Steuerung. Eine gezeichnete Stimmungsumfrage mit drei Gesichtszuständen – fröhlich, neutral und traurig – ergab im Durchschnitt eher neutrale oder traurige Gesichter. Empfohlen wurde, die Steuerung zu ändern, beispielsweise von einem Lenkrad auf einen Joystick umzusteigen.

Welches Feature würdet ihr euch noch wünschen?

• Jedes Fahrzeug hat eine einzigartige Fähigkeit.
• Einen Map Marker.
• Stats, also ein bestimmter Aspekt eines fiktiven Charakters (Auto) darstellt,
• die z.B. durch Zahlen repräsentiert werden.
• Zuschauer:innen können während einem Spiel Hindernisse reinwerfen.
• Eine Rampe oder Fallen wie eine Banane als Hindernis.
• Eine Optionsmöglichkeit, wo man die Geschwindkeit der Fahrzeuge auswählen kann.
• Pilze die man sammeln kann um mit einem Fahrzeug schneller fahren zu können.
• Der Ball bounced am Rand wieder zurück, damit dieser nicht vom Feld fällt.
• Das Fahrzeug soll am Rand nicht stehen können.

Ein Demo-Video einer Testrunde bei der Projektevernissage (16.01.2024)

Herausforderungen & Learnings

Augmented Reality: Die Integration von AR gestaltet sich dank bereits etablierter Frameworks für Unity sehr leicht und ist auch in kostenlosen Video Tutorials schnell erlernbar. Das Platzieren eines Spielfeld per Marker funktionierte in einem ersten Prototypen problemlos. An der FH wurde dies jedoch schnell zum Problem aufgrund der spiegelnden Untergründe, weshalb die Spielfeld Platzierung von Malek auf ein Marker-based Modell mit QR Code umgebaut wurde.

Multiplayer Game: Die Integration von Photon lässt sich schnell anhand zahlreicher Tutorials realisieren. Da das manuelle Joinen in Lobbies etwas komplexer ist, haben wir uns vorerst für ein Quickmatch entschieden. Dabei wird automatisch ein Match gehostet, wenn noch keines existiert. Sollte bereits eines bestehen, wird automatisch gejoined und über den SpawnManager der Spieler im entsprechenden Team platziert.

Physik: Durch AR-Realisierung verhält sich die Skalierung und Physikberechnung von 3D Objekten sehr merkwürdig. Dies hatten wir nicht am Schirm und bedurfte viel Anpassungen und absurden Werten bei Geschwindigkeit und Masse.

Mögliche zukünftige Features

Links

• Repository für Car Kickers AR

The post Car Kickers AR appeared first on Mobile USTP MKL.

WebAssembly

WebAssembly eröffnet Entwickler:innen die Möglichkeit, leistungsstarke Funktionen aus anderen Sprachen direkt ins Web zu integrieren. In den vergangenen Jahren haben kreative Köpfe diese Möglichkeiten intensiv genutzt, um das volle Potenzial von WebAssembly auszuschöpfen.

WebAssembly ist im Wesentlichen ein binäres Anweisungsformat. Obwohl das zunächst kompliziert klingen mag, lässt es sich als eine gemeinsame Sprache definieren, die von Browsern verstanden und nahezu in nativer Geschwindigkeit ausgeführt werden kann. Im Gegensatz zu JavaScript, das hauptsächlich eine textbasierte Skriptsprache ist, ist WebAssembly als Low-Level-Sprache konzipiert, die es ermöglicht, Hochsprachen wie C, C++ oder Rust in ein binäres Format zu kompilieren, das im Browser ausgeführt werden kann.

Traditionelle Webanwendungen verlassen sich stark auf JavaScript für ihre Funktionalität. Obwohl JavaScript vielseitig und zugänglich ist, hat es bestimmte Einschränkungen bei leistungsintensiven Aufgaben wie 3D-Rendering, Videobearbeitung oder wissenschaftlichen Simulationen.

WebAssembly begegnet diesen Einschränkungen, indem es eine Möglichkeit bietet, solche Aufgaben mit auszuführen. Dies wird erreicht, indem WebAssembly näher am Maschinencode ist und Hardware-Ressourcen effizienter nutzt.

Funktionsweise von WebAssembly

Um WebAssembly besser zu verstehen, werfen wir einen vereinfachten Blick darauf, wie es funktioniert:

Kompilierung: Wir schreiben einen Code in einer Hochsprache wie C, C++, Rust usw. Dann kompilieren wir diesen Code in eine WebAssembly-Binärdatei (mit der Erweiterung .wasm). Diese Binärdatei ist stark optimiert für eine schnelle Ausführung.

Laden: Wenn wir eine Webseite laden, die ein WebAssembly-Modul enthält, lädt der Browser die .wasm-Datei genauso wie jede andere Ressource.

Ausführung: Einmal geladen, wird der WebAssembly-Code von der virtuellen Maschine des Browsers ausgeführt. Er läuft nahezu mit nativer Geschwindigkeit, da er dem Maschinencode näher ist, den die CPU Ihres Computers versteht.

Integration: WebAssembly kann nahtlos mit JavaScript interagieren. Wire können WebAssembly-Funktionen von JavaScript aus aufrufen und umgekehrt, was eine reibungslose Integration in bestehende Webanwendungen ermöglicht.

Vorteile von WebAssembly

Geschwindigkeit: Wasm erreicht im Browser nahezu native Leistung, indem es von gängigen Fähigkeiten der Hardware nutzt. Ein weiterer Faktor für die Geschwindigkeit von Wasm ist, dass der Code selbst ein effizientes Binärformat auf niedriger Ebene ist, das schneller von Browsern geladen und ausgeführt werden kann

Sicherheit: Wasm wird in einer speichersicheren, abgeschotteten Umgebung ausgeführt, die Datenkorruption und Sicherheitsverletzungen verhindern. Wasm gewährt keinen Zugriff auf die Umgebung, in der der Code ausgeführt wird. Wasm kann auf Systemressourcen zugreifen und E/A durchführen, wenn dies erlaubt wird.

Portabilität: Wasm ist plattformunabhängig, die Architektur von Wasm versucht, keine Annahmen über die zugrunde liegende Hardware zu treffen, auf der es ausgeführt wird. Dies bedeutet, dass Wasm darauf ausgelegt ist, sowohl von gängigen als auch von modernen Hardwarekomponenten zu profitieren. Wasm ist im Web immer verbreiteter geworden, aber es ist möglich, es außerhalb des Webs auszuführen, dank seiner plattformunabhängigen Architektur.

ffmpeg.wasm

Wie auf der GitHub-Seite des Projekts angegeben, ist ffmpeg.wasm eine WebAssembly- und JavaScript-Portierung von FFmpeg. Es handelt sich dabei um eine Open-Source-Software-Suite, die mehrere Bibliotheken und Programme zur Verwaltung von Audio-, Video-, Streams- und anderen Mediendateien enthält. All diese Tools können über die ffmpeg-Befehlszeile aufgerufen und ausgeführt werden. Für einen guten Einstieg in die Welt von FFmpeg kann folgenden Web-Guide der Association of Moving Image Archivists (AMIA) aus Los Angelese empfohlen werden. Hier werden die wichtigsten Bestandteile von FFmpeg anhand von praxistauglichen Beispielen veranschaulicht.

FFmpeg ist in C-Code programmiert und kann klarerweise nicht nativ im Browser ausgeführt werden. Wie funktioniert also ffmpeg.wasm? Auf einer höheren Ebene funktioniert ffmpeg.wasm, indem der ursprüngliche C-Code in WebAssembly transpiliert wird. Da WebAssembly im Browser ausgeführt werden kann, bringt es die Medienverarbeitungsfunktionen von FFmpeg direkt zum Client ins Web.

Daher ermöglicht ffmpeg.wasm die Verarbeitung von Video- und Audioinhalten in JavaScript-basierten Webanwendungen. Im Detail ermöglicht es Video- und Audioaufzeichnung, Formattranskodierung, Video- und Audio-Bearbeitung sowie Video-Skalierung. Obwohl es eine auf WebAssembly basierende Bibliothek ist, können wir diese in JavaScript-Code genauso verwenden wie jede andere npm-Bibliothek. Das ist die Stärke von Wasm. Da es nach Wasm übersetzt wird, können wir ffmpeg.wasm direkt in Ihrem Browser nutzen, ohne sich um Leistungsprobleme sorgen zu müssen.

Wenn Sie beispielsweise Transcoding-Anwendungen im Browser bereitstellen möchten, müssen Sie die Videoclips jetzt nicht mehr über das Netzwerk an einen Server senden. Stattdessen können Sie dies lokal und sogar ohne Internetverbindung durchführen.

Achitektur von ffmpeg.wasm

Multimedia-Transkodierung ist eine ressourcenintensive Aufgabe, die Sie nicht im Hauptthread ausführen möchten. Daher übertragen wir diese Aufgabe in ffmpeg.wasm standardmäßig an den Web Worker (ffmpeg.worker). Dadurch sind fast alle Funktionsaufrufe in ffmpeg.wasm asynchron, und es wird empfohlen, die Syntax von async/await zu verwenden.

Das Konzept von ffmpeg-core in ffmpeg.wasm ist wie der Motor eines Autos. Es ist nicht nur der wichtigste Teil von ffmpeg.wasm, sondern auch ein austauschbares Bauteil. Derzeit pflegen wir einen Single-Thread-Kern (@ffmpeg/core) und eine Multi-Thread-Version (@ffmpeg/core-mt). Man kann einen eigenen Kern erstellen (z. B. einen Kern nur mit x264-Bibliothek, um die Dateigröße von ffmpeg-core.wasm zu minimieren) mithilfe der Build-Skripte im Repository von ffmpeg.wasm.

ffmpeg.worker lädt den WebAssembly-Code (ffmpeg-core) von CDN herunter und initialisiert ihn in WorkerGlobalScope. Für jede zu verarbeitende Eingabevideodatei müssen wir sie zuerst im Dateisystem von ffmpeg-core platzieren und das Ergebnis auch aus dem Dateisystem von ffmpeg-core lesen, sobald es fertig ist.

Wenn wir eine Multi-Thread-Version von ffmpeg-core verwenden, werden von ffmpeg-core innerhalb von ffmpeg.worker mehr Web Worker erstellt.

Die wichtigsten Schritte bei ffmpeg.wasm

Um ffmpeg.wasm im jeweiligen JavaScript Projekt verwenden zu können, muss das Package @ffmpeg/core per npm oder yarn installiert werden.

npm install @ffmpeg/core
yarn add @ffmpeg/core

Nun kann bereits auf die komplette Funktionalität von ffmpeg.wasm im Projekt zugegriffen werden. Ein kurzes Beispiel dazu, wo eine Videodate „test.avi“ in ein „test.mp4“ mittels JavaScript Code transcodiert wird.

ffmpeg.load()

Ist eine erforderliche API, die zu Beginn aufgerufen werden muss, bevor FFmpeg verwendet wird. Was in dieser API passiert, ist:

• Download von ffmpeg-core.js vom Remote-Server
• Instanziierung des wasm-Codes von ffmpeg.wasm.

Abhängig von Ihrer Netzwerkgeschwindigkeit und der Hardware der Host-Maschine kann dieser Vorgang mehrere Minuten dauern.

Dateisystem (FS)

Wenn wir uns die API von ffmpeg.wasm ansehn, finden wir z.B. `ffmpeg.FS()`, um Dateisystemoperationen durchzuführen. (In ffmpeg.wasm verwenden wir MEMFS / Memory File System.) Wir können uns dieses FS wie eine virtuelle Festplatte vorstellen, auf der wir die Eingabedatei ablegen und die Ausgabedatei aus dem ffmpeg.wasm-Befehl ziehen können. Dies ist wesentlich, da wir minimale Änderungen am FFmpeg-Quellcode vornehmen und die größtmögliche Ähnlichkeit zur ursprünglichen Befehlszeilenschnittstelle beibehalten möchten. Einige Befehlsoperationen, die man z.B. verwenden kann:

ffmpeg.FS('writeFile', 'filename', data)

Schreibt eine Datei in das MEMFS als Input für ffmpeg.wasm.

ffmpeg.FS('readFile', 'filename')

List eine Datei aus MEMFS als Output für ffmpeg.wasm.

ffmpeg.wasm ffmpeg.FS('unlink', 'filename')

Löscht eine Datei in MEMFS.

ffmpeg.FS('readdir', '/')

Listet die Dateien innerhalb des angegebenen Pfads.

Die vollständige Doku der File System API findet man auf emscripten.

Web Workers

Wenn wir `ffmpeg.run()` ausführen, werden möglicherweise viele Web Workers erstellt. Dies ist eine normale Situation, da Web Workers Threads in FFmpeg simulieren, was gut ist, da wir nicht möchten, dass ffmpeg.wasm unseren Hauptthread blockiert.

SharedArrayBuffer

Um das Konzept der Web Worker von ffmpeg.wasm umzusetzen, muss der Speicher gemeinsam genutzt werden. Dazu müssen wir SharedArrayBuffer-Objekte von einem Agenten im Cluster zu einem anderen verwenden (ein Agent ist entweder das Hauptprogramm der Webseite oder einer ihrer Webworker).

SharedArrayBuffer ist ein ziemlich neuer Datentyp in JavaScript, der derzeit von den meisten Browsern aus Sicherheitsgründen noch nicht vollständig unterstützt wird. Das ist auch das Problem bei der Verwendung von ffmpeg.was in einer mobilen Umgebung. Um in ffmpeg.wasm pthread / mutli-threading-Unterstützung zu ermöglichen, um die Geschwindigkeit zu erhöhen, ist es ein erforderlicher Datentyp.

Keine vollständige Nutzung der CPU-Fähigkeiten

Die meisten Bibliotheken, die mit ffmpeg arbeiten (z. B. x264), verwenden Assemblersprache wie x86, um den Prozess zu beschleunigen. Aber leider kann WebAssembly diesen x86-Assemblercode nicht direkt verwenden, da er nicht kompatibel ist oder bestimmte Anweisungen nicht unterstützt werden. Es ist noch ein langer Weg, da sich ffmpeg.wasm noch in einem frühen Stadium, obwohl es im Vergleich zur ursprünglichen Version noch sehr langsam ist, aber mit dem Wachstum und der Entwicklung von WebAssembly wird es immer nützlicher werden.

DIY Web Transcoder für lokale Mediendateien

Um die beschrieben Funktionalitäten von ffmpeg.wasm etwas praktischer darzustellen, wurde ein kleiner adaptierbarer Web Transcoder für Mediendateien (Audio & Video), die lokal vorhanden sind, umgesetzt. Der gesamte Encodingprozess erfolgt clientseitig vollständig im Browser und dafür wird der Web Assembly Build von FFmpeg.wasm verwendet. Für das Frontend wurde React, Ant Design 4.x (UI) und Next.js verwendet.

Metadaten

Für das Transcoding können jede Art an Audio- und Videodaten (lokal) geladen werden. Die einzige Beschränkung bezieht sich auf die Dateigröße seitens von Web Assembly von 2 GB.  Metadaten von der eingelesenen Datei werden mittels einem Web Assembly Build dem Medieninfo Tool ffprobe anzeigt. (Funktioniert leider derzeit nur mit Medien mit dem Container .mov & .mp4).

Transcoding

Mit dem Konfigurator kann der gewünschte Export der Mediendatei durchgeführt werden. Dabei stehen folgende Einstellungsmöglichkeiten zur Verfügung.

• Container der Mediendatei für Audio und Video
• Video Codec
• Audio Codec

Nach Auswahl der gewünschten Optionen wird das FFmpeg Kommando generiert (siehe Screenshot), transcodiert und nach erfolgreichem Export zum Download angeboten.(Aufgrund von Einschränkungen seitens ffmpeg.wasm funktioniert das Transcoding derzeit nur bei Videos bis zu einer Auflösung von 1920x1080px).

Das Projekt “DIY Web-Transcoder” kann man hier probieren:

• https://multimedia-wunderwerkzeug.vercel.app/
• https://github.com/untitled-soundtrack/multimedia_wunderwerkzeug

Fazit

Die Unterschiede bei den Transcoding-Zeiten zwischen ffmpeg.wasm und der Standalone-Version von FFmpeg sind derzeit noch enorm groß.

• FFmpeg in Terminal (Standalone): speed=~34.1x
• Ffmpeg.wasm im Web Browser: speed=~4.26x (Screenshot darunter)

Derzeit ist außerdem die Verarbeitung von Videos mit einer Auflösung größer als 1920x1080px nicht möglich.

In den kommenden Jahren wird voraussichtlich eine erhebliche Verbesserung erfolgen, da eine große Community an der Entwicklung beteiligt ist.

Trotzdem eignet sich ffmpeg.wasm ideal für eine schnelle und unkomplizierte Umwandlung von Mediendateien, ohne die Notwendigkeit einer aufwendigeren Installation von FFmpeg oder anderer Transcoding-Software. Darüber hinaus ermöglicht es die schnelle Generierung von Transcoding-Presets, um bestimmte Produktionsstandards in einem Unternehmen einzuhalten.

Quellen

• https://webassembly.org/
• https://medium.com/appfoster/a-guide-to-webassembly-what-you-need-to-know-319d28bf5195
• https://ffmpegwasm.netlify.app/
• https://www.slashcam.de/news/single/FFmpeg-direkt-im-Browser-nutzen—FFMPEG-WASM-17603.html
• https://amiaopensource.github.io/ffmprovisr/
• https://jeromewu.github.io/ffmpeg-wasm-a-pure-webassembly-javascript-port-of-ffmpeg/
• https://caniuse.com/sharedarraybuffer
• https://ffmpeg.org/ffprobe.html

Bilder

• https://www.heritageopendays.org.uk/ – Header-Hintergrundbild: BFI / Darren Brade 
• https://amiaopensource.github.io/ffmprovisr/
• https://ffmpegwasm.netlify.app/
• https://caniuse.com/sharedarraybuffer

The post Flexibles Multimediawerkzeug mit WebAssembly & FFmpeg appeared first on Mobile USTP MKL.

Pingo ist ein Webprojekt, das innerhalb einer Woche von unserer Masterklasse während der Extreme Programming Week entwickelt wurde. Das Hauptziel von Pingo ist es, unseren Nutzer:innen eine interaktive Karte zur Verfügung zu stellen, auf der sie verschiedene “Geostops” erkunden können. Diese Geostops umfassen versteckte Naturjuwelen, kulturelle Highlights und historische Sehenswürdigkeiten. Um sicherzustellen, dass Pingo reibungslos funktioniert und ein großartiges Erlebnis bietet, setze ich Cypress als Testing-Framework ein.

Mit Cypress können wir automatisierte Tests für Pingo erstellen, um sicherzustellen, dass alle Funktionen einwandfrei funktionieren. Das bedeutet, dass wir sicherstellen können, dass die Karte einwandfrei funktioniert, die Geostops korrekt angezeigt werden und die Benutzerfreundlichkeit gewährleistet ist.

Im Vordergrund haben wir Ionic und Angular eingesetzt, um das Frontend zu gestalten und zu steuern. Gleichzeitig haben wir im Backend auf NestJS gesetzt, um die Funktionalitäten unserer Anwendung zu unterstützen und zu erweitern.

Frontend & Backend

Ionic und Angular sind bekanntermaßen eine perfekte Kombination, wenn es darum geht, mobile und webbasierte Anwendungen zu entwickeln. Ionic bietet eine umfangreiche Sammlung von UI-Komponenten und Tools, die die Gestaltung und Benutzeroberflächen-Entwicklung erleichtern. Angular hingegen bietet ein solides Framework für die Strukturierung und Organisation des Codes. Die Integration dieser beiden Technologien ermöglichte es uns, eine benutzerfreundliche und ansprechende Oberfläche für Pingo zu erstellen.

Auf der anderen Seite haben wir NestJS im Backend verwendet. NestJS ist ein leistungsstarkes und modulares Framework für die Entwicklung von Node.js-Anwendungen. Es ermöglicht uns, APIs und Backend-Services effizient zu erstellen und zu verwalten. Mit NestJS konnten wir sicherstellen, dass unsere Anwendung zuverlässig und skalierbar ist, was für eine interaktive Karte wie Pingo von großer Bedeutung ist.

Installation

Um Cypress in unserem Frontend-Ordner zu installieren, verwenden wir den beliebten Package Manager “yarn”. Mit nur wenigen Befehlen könnt auch ihr Cypress in eurem Projekt nutzen.

Verwendet den folgenden Befehl, um Cypress in eurem Frontend-Ordner zu installieren:

yarn add cypress --dev

Dadurch wird Cypress als Entwicklungspaket hinzugefügt, sodass ihr es für eure Tests nutzen könnt.

Nachdem ihr diese Schritte abgeschlossen habt, ist Cypress in eurem Projekt installiert und einsatzbereit.

Typescript

Die Verwendung von TypeScript in unserem Projekt ist eine großartige Möglichkeit, um unseren Code robuster und besser wartbar zu machen. Allerdings erfordert dies auch einige Anpassungen in der tsconfig.json-Datei, um sicherzustellen, dass TypeScript alles korrekt erkennt und funktioniert.

Zuerst einmal müsst ihr sicherstellen, dass ihr die tsconfig.json-Datei eures Projekts öffnet. Diese Datei enthält die Konfigurationseinstellungen für TypeScript.

In der tsconfig.json könnt ihr verschiedene Compiler-Optionen festlegen, die das Verhalten von TypeScript beeinflussen. Zum Beispiel könnt ihr die Zielversion von JavaScript, den Modulstandard und die Ausgabeoptionen festlegen. Hier ist ein einfaches Beispiel:

Außerdem müssen hier auch etwaige Plugins für Typenerkennung ergänzt werden. Für Pingo habe ich folgende Plugins installiert:

Cypress Real Events
Cypress Standard-Ereignisse werden simuliert. Das bedeutet, dass alle Ereignisse wie cy.click oder cy.type von Javascript abgefeuert werden. Deshalb sind diese Ereignisse nicht vertrauenswürdig (event.isTrusted ist falsch) und sie können sich etwas anders verhalten als echte native Ereignisse. In manchen Fällen kann es jedoch unmöglich sein, simulierte Ereignisse zu verwenden, z.B. um eine native Meldung zu füllen oder in die Zwischenablage zu kopieren. Dieses Plugin behebt dieses Problem.

Cypress Steps plugin
Ein kleines Cypress-Hilfsprogramm, das Ihre Testschritte in die Zeitleiste und die Fehlerprotokolle einfügt.

Diese Optionen können je nach den Anforderungen eures Projekts angepasst werden. Stellt sicher, dass ihr die Datei speichert und euer Projekt neu erstellt oder den TypeScript-Compiler neu startet, damit die Änderungen wirksam werden.

Projektstruktur anpassen

Es ist wichtig, die Projektstruktur anzupassen, damit Cypress die richtigen Dateien und Ordner finden kann. Cypress erstellt automatische eine vordefinierte Ordnerstruktur, diese kann jedoch wie folgt ergänzt werden:

• e2e: Hier kannst du die Testdaten ablegen.
• screenshots/videos: Erstellte Fotos/Video von den Testdurchläufen.
• support: Dieser Ordner enthält allgemeine Unterstützungsdateien für deine Tests.
• commands: Die Konfigurationsdatei für Custom Commands.

Cypress starten

Verwende den folgenden Befehl, um das Cypress zu öffnen:

yarn cypress open

Dieser Befehl startet den Cypress-Testrunner und öffnet ein Fenster, indem du den gewünschten Browser und deine Tests (e2e specs) auswählen und ausführen kannst.

Tests schreiben

Beim erstmaligen Starten von Cypress kann mithilfe der GUI ein Testfile (*.cy.ts) im Ordner cypress/e2e/ erstellt werden. Ein Testbeispielcode für ein Loginversuch mit falschen Daten sieht so aus:

Um eine große Bandbreite an möglichen Testinputs liefern zu können, können mithilfe der Fixtures (*.json) Objekte für die jeweiligen Testfälle gelesen und abgearbeitet werden. Ein Beispiel dafür station.json:

Custom Commands

Benutzerdefinierte Befehle ermöglichen es dir, häufig verwendete Aktionen oder Funktionen in deinen Tests zu abstrahieren und wiederzuverwenden. Dies ist besonders nützlich, wenn du komplexe Workflows in deinen Tests erstellen möchtest oder wenn du dieselben Aktionen in mehreren Tests ausführst.

Wie erstellt man benutzerdefinierte Befehle?

Die Erstellung von benutzerdefinierten Befehlen in Cypress ist relativ einfach.

In der Regel erstellst du einen Ordner namens commands in deinem Cypress-Verzeichnis, um deine benutzerdefinierten Befehle zu organisieren. 

Schreibe deine benutzerdefinierten Befehle: In diesem Ordner kannst du nun TypeScript-Dateien (mit der Endung .ts) erstellen, die deine benutzerdefinierten Befehle definieren. Das Beispiele wäre eine kleine Funktion, die die Cypress get-Funktion erweitert:

Ergänze außerdem den neuen Command in e2e.ts.

Nachdem du deine benutzerdefinierten Befehle erstellt hast, kannst du sie einfach in deinen Tests verwenden, indem du den Befehlsnamen aufrufst. Zum Beispiel:

cy.getByDataCy('app-button_profile').click();

e2e Test Cases

Login mit falschen und richtigen Userdaten
Eine der grundlegenden Funktionen von Pingo ist die Benutzeranmeldung. Daher habe ich umfangreiche Tests entwickelt, um sicherzustellen, dass Benutzer sich problemlos anmelden können, sowohl mit korrekten als auch mit falschen Anmeldeinformationen. Dies stellt sicher, dass unser Anmeldesystem sicher und zuverlässig ist.

Registrierung mit falschen und richtigen Daten
Neben der Anmeldung habe ich auch Tests für die Benutzerregistrierung entwickelt. Es wird überprüft, ob die Registrierung mit korrekten Daten erfolgreich ist und ob unser System fehlerhafte oder unzulässige Daten ordnungsgemäß abweist. Dies gewährleistet, dass neue Benutzerkonten korrekt erstellt werden.

Logout des aktuellen Users
Das Abmelden ist genauso wichtig wie die Anmeldung.

Aktualisierung der Daten des eingeloggten Users
Benutzer müssen in der Lage sein, ihre Profile zu aktualisieren. Die Tests stellen sicher, dass Benutzer ihre Profilinformationen korrekt ändern können und dass diese Änderungen im System gespeichert werden.

Teste Onboarding und Tutorial
Ein reibungsloses Onboarding und ein hilfreiches Tutorial sind entscheidend für die Benutzererfahrung.

Erstelle Pingos mit mehreren Stationen
Eine der Hauptfunktionen von Pingo ist die Erstellung von “Pingos” mit mehreren Stationen und unterschiedlichen Typen. Die Tests stellen sicher, dass Benutzer problemlos komplexe Pingos erstellen können und dass diese auf der Karte korrekt angezeigt werden.

Besuche Pingos und deren Station auf der Karte
Dies stellt sicher, dass die Kartendarstellung korrekt funktioniert.

Teste API Calls und deren richtige Darstellung im Frontend
Das gewährleistet, dass unsere Anwendung effizient mit dem Backend kommuniziert und die richtigen Informationen bereitstellt.

Fazit

Abschließend lässt sich sagen, dass Cypress ein äußerst leistungsfähiges Werkzeug für schnelle End-to-End-Tests im Frontend von Ionic- und Angular-Anwendungen ist. Die bemerkenswerte Benutzerfreundlichkeit und die ausgezeichnete Dokumentation auf cypress.io haben den Einstieg in dieses Testing-Framework mühelos gemacht. Ich konnte Tests problemlos erstellen und unsere Anwendungen umfassend überprüfen.

Allerdings möchte ich darauf hinweisen, dass die Nachstellung von Swipe- und Touch-Bewegungen auf der Oberfläche eine Herausforderung darstellte, die Cypress derzeit nicht vollständig abdeckt.

Learning: Dennoch hat Cypress zweifellos meinen Einstieg in die Entwicklung von Testprozessen und Workflows ermöglicht und wird weiterhin eine wertvolle Ressource für Frontend-Testing bleiben.

The post Cypress Testing mit Pingo appeared first on Mobile USTP MKL.

In diesem Artikel werden wir auch einen Schwerpunkt auf Cypress legen. Wir werden erläutern, warum Cypress eine gute Wahl ist und es mit anderen Frameworks vergleichen. Außerdem werden wir die Testkonzepte beleuchten, die mit Cypress umgesetzt werden können.

Übersicht über Testing Frameworks für JavaScript und Frontend

Bevor wir uns in die Details vertiefen, werfen wir einen Blick auf einige der gängigsten Testing Frameworks für JavaScript und Frontend-Entwicklung:

Jest
Jest ist ein weit verbreitetes JavaScript-Testing-Framework, das sich hervorragend für Unit-Tests eignet. Es wird oft in Kombination mit React-Anwendungen verwendet und bietet eine einfache Syntax und leistungsstarke Testfunktionen.

Unit-Tests (Komponententests)
Sind Tests, bei denen einzelne Komponenten oder Units eines Programms isoliert getestet werden. Diese Komponenten können Funktionen, Methoden oder Klassen sein. Das Hauptziel von Unit-Tests besteht darin, sicherzustellen, dass jede einzelne Komponente ordnungsgemäß funktioniert und die erwarteten Ergebnisse liefert, unabhängig von anderen Teilen des Codes.

Mocha
Mocha ist ein äußerst flexibles und anpassbares JavaScript-Testframework. Es unterstützt verschiedene Assertion-Libraries wie Chai und kann sowohl für Unit- als auch für Integrationstests verwendet werden.

Integrationstests
Sind eine Art von Softwaretests, bei denen mehrere Komponenten oder Module einer Anwendung zusammengeführt und als Einheit getestet werden, um sicherzustellen, dass sie reibungslos miteinander interagieren. Das Hauptziel von Integrationstests besteht darin, sicherzustellen, dass die verschiedenen Teile einer Anwendung korrekt zusammenarbeiten und die erwarteten Ergebnisse liefern, wenn sie zusammengefügt werden.

Jasmine
Jasmine ist ein Behavior-Driven Development (BDD)-Framework für JavaScript, das klare und leicht verständliche Syntax bietet. Es eignet sich hervorragend für BDD-orientierte Teams und Projekte.

Selenium
Selenium ist ein plattformübergreifendes Framework zur Browser-Automatisierung und wird oft für End-to-End-Tests eingesetzt. Es unterstützt verschiedene Programmiersprachen, darunter JavaScript, und ermöglicht das Testen in verschiedenen Browsern.

Cypress
Cypress ist ein End-to-End-Testing-Framework, das speziell für moderne Frontend-Entwicklung entwickelt wurde. Es bietet eine einfache Herangehensweise an das Testen von Webanwendungen.

Warum Cypress?

Cypress sticht aus mehreren Gründen unter den Testing Frameworks hervor und bietet eine Reihe überzeugender Vorteile.

Hauptargumente als Testing-Framework für JavaScript Frameworks

• Ein All-in-One-Test-Framework, Assertion Library, mit Mocking und Stubbing
• Schwerpunkt auf E2E- und Komponententests – Tests unter realen Bedingungen
• Läuft im Browser und ist in JavaScript geschrieben
• Nativer Zugriff auf das DOM und auf Ihre Anwendung

Einfache Installation und Benutzerfreundlichkeit
Die Installation von Cypress ist denkbar einfach. Es kann mit npm oder yarn installiert werden und ist in wenigen Minuten einsatzbereit sein. Cypress bietet eine intuitive API und eine klare Syntax, die auch für Entwickler ohne umfangreiche Testing-Erfahrung leicht verständlich ist.

Echtzeit-Reloading
Eine der herausragenden Eigenschaften von Cypress ist die Fähigkeit, Tests in Echtzeit zu beobachten, während sie ausgeführt werden. Entwickler können Tests schreiben und gleichzeitig die Anwendung entwickeln, da sie sofortiges Feedback über den Teststatus erhalten.

End-to-End-Testing
Cypress wurde speziell für End-to-End-Tests entwickelt und bietet native Unterstützung für verschiedene Browser. Dies ermöglicht es, die Anwendung unter realen Bedingungen zu testen und sicherzustellen, dass sie auf verschiedenen Plattformen einwandfrei funktioniert.

Mächtige Debugging-Tools
Cypress verfügt über leistungsstarke Debugging-Tools, darunter die Möglichkeit, Tests schrittweise auszuführen, Screenshots aufzunehmen und den Teststatus in Echtzeit zu überwachen. Dies erleichtert die Fehlerbehebung erheblich.

Community und Erweiterbarkeit
Cypress hat eine aktive Community, die eine Fülle von Plugins und Erweiterungen entwickelt hat. Dies ermöglicht es Entwickler:innen, Cypress an ihre speziellen Anforderungen anzupassen und von der Arbeit der Community zu profitieren.

Kontinuierliche Integration
Cypress lässt sich nahtlos in gängige CI/CD-Pipelines integrieren. Dadurch können automatisierte Tests in den Entwicklungsprozess integriert werden, um sicherzustellen, dass der Code immer fehlerfrei ist.

Zeitreise
Cypress macht Schnappschüsse, während die Tests laufen. Im Befehlsprotokoll sieht man, was bei jedem Schritt passiert ist.

Chai
Ist ein Assertions-Framework für JavaScript, das in Kombination mit Cypress verwendet werden kann. Es ermöglicht Entwickler:innen, Aussagen (Assertions) in ihren Tests zu formulieren, um zu überprüfen, ob bestimmte Bedingungen erfüllt sind. Diese Bedingungen können sein, dass eine Variable einen bestimmten Wert hat, eine Funktion ohne Fehler ausgeführt wird oder ein Element auf einer Webseite bestimmte Eigenschaften aufweist.

Fehlersuchbarkeit
Höre auf zu raten, warum die Tests fehlgeschlagen sind. Debugge direkt aus vertrauten Tools wie den Developer Tools. Die lesbaren Fehler- und Stack-Trace machen das Debugging blitzschnell.

Automatisches Warten
Fügen den Tests keine Wartezeiten oder Schlafphasen hinzu. Cypress wartet automatisch auf Befehle und Assertions, bevor es weitergeht.

Spione, Stubs
Überprüfe und kontrolliere das Verhalten von Funktionen, Serverantworten.

Screenshots, Videos und Testwiederholung
Zeige Screenshots an, die bei Fehlern automatisch erstellt werden, oder Videos, falls aktiviert, von der gesamten Testsuite, wenn diese über die CLI ausgeführt wird.

Browserübergreifende Tests
Führe Tests in Browsern der Firefox- und Chrome-Familie (einschließlich Edge und Electron) lokal und optimal in einer Pipeline für die kontinuierliche Integration aus.

Was kann Cypress nicht?

• Cypress ist keine Universal-Testlösung. Dieses Framework ist speziell für eine Aufgabe konzipiert: End-to-End-Tests während des Entwicklungsprozesses für die Anwendung, nicht nach der Entwicklung.
• Cypress ermöglicht keine Tests über mehrere Tabs oder gleichzeitig in verschiedenen Browsern durchzuführen. Die Tatsache, dass “Cypress innerhalb des Browsers ausgeführt wird”, bringt zusätzliche Begrenzungen mit sich. Das bedeutet, dass es nicht möglich ist, zu überprüfen, ob beim Klicken auf einen Link ein neuer Tab geöffnet wird.

Cypress im Vergleich zu anderen Frameworks

Um die Vorzüge von Cypress besser zu verstehen, werfen wir einen kurzen Blick auf die Unterschiede zu anderen Frameworks:

Jest
Jest ist hervorragend für Unit-Tests geeignet, während Cypress auf End-to-End-Tests spezialisiert ist. Cypress bietet eine umfassendere Lösung für die Gewährleistung der Funktionsfähigkeit einer Anwendung unter realen Bedingungen.

Mocha
Mocha ist äußerst flexibel, aber es fehlen einige der integrierten Funktionen von Cypress, wie das Echtzeit-Reloading und die automatische Wiedergabe von Tests.

Jasmine
Jasmine ist ein BDD-Framework und legt den Fokus auf die Spezifikation des Verhaltens der Anwendung. Cypress bietet ähnliche Funktionen, aber mit einem stärkeren Fokus auf End-to-End-Tests.

Selenium WebDriver
Während Cypress im Browser ausgeführt werden kann, interagiert WebDriver mit dem Browser über das HTTP-Protokoll, was zu Verzögerungen und unbekannten Warteereignissen bei der Ausführung von Tests. Cypress richtet sich auch an QA- und Entwickler-Teams, die Tests schreiben wollen, ohne sich um die zugrunde liegende Infrastruktur und die Beschränkung auf eine Assertion-Bibliothek und einer Programmiersprache.

Cypress Grundlagen

describe-Block
Die Tests werden in einem describe-Block abgelegt. Dieser Block enthält zwei Argumente. Das erste ist eine Beschreibung dessen, was getestet werden soll. Das zweite ist eine Callback-Funktion für den eigentlichen Tests innerhalb dieses Blocks.

it-Block
Innerhalb des Beschreibungsblocks gibt es auch it-Blöck. Diese Blöcke sind einzelne Tests innerhalb einer Gesamttestdatei. Die API für it() ist die gleiche wie die von describe. Das erste Argument ist der Titel eines einzelnen Tests, und das zweite Argument ist eine Callback-Funktion, die den Testcode enthält.

Befehle und Interaktion mit Elementen
Cypress stellt verschiedene Befehle zur Verfügung, die beim Testen unterstützen. Man kann diese Befehle auf das cy-Objekt anwenden. Zum Beispiel führt cy.visit('/') den Cypress Runner zu einer gewünschten Seite. Es gibt verschiedene andere Befehle wie cy.click(), cy.type(), cy.check(), usw.

Elemente erhalten
Sehr oft gibt es den Fall, wo man ein Element aus dem DOM erhalten möchte und dazu eine eine Art von Behauptung aufstellen möchte. Zum Beispiel soll ein h1-Element einen bestimmten Text beinhalten. Man kann Elemente in Cypress mit der Funktion get abrufen und auch einen CSS-Abfrage-Selektor übergeben.

Command Chaining & Assertions
Nachdem man ein Element erhalten haben, möchten man wahrscheinlich etwas mit diesem Element tun, z. B. eine Behauptung aufstellen. Dies kann umgesetzt werden, indem man eine Behauptung anhängen, nachdem man ein Element erhalten hat. Zum Beispiel: get(h1).contains('text'). Cypress hat verschiedene Möglichkeiten, eine Behauptung aufzustellen.

Fokussierung auf einen einzigen Test
Man kann it.only() verwenden, um einen einzelnen Test durchzuführen.

beforeEach
Man kann eine beforeEach-Funktion verwenden, um bestimmte Aktionen vor jedem Test durchzuführen.

Testkonzepte mit Cypress

Mit Cypress können verschiedene Testkonzepte in der Frontend-Entwicklung umgesetzt werden:

End-to-End
Cypress wurde ursprünglich für die Durchführung von End-to-End-Tests (E2E) für alle Anwendungen entwickelt, die in einem Browser laufen. Ein typischer E2E-Test besucht die Anwendung in einem Browser und führt Aktionen über die Benutzeroberfläche aus, wie es ein echter Benutzer tun würde.

Komponente
Man kann Cypress auch verwenden, um Komponenten aus unterstützten Web-Frameworks einzubinden und Komponententests durchzuführen.

API
API Cypress kann beliebige HTTP-Aufrufe ausführen, so dass Sie es für API-Tests verwenden können.

Best Practices laut cypress.io

Teste „Unhappy Paths“
Teste nicht nur den “Happy Path“ des Nutzers. Stelle sicher, dass man Nutzer testet, die die App böswillig nutzen oder Aktionen durchführen, die nicht üblich sind.

Stabile Selektoren verwenden
Verwende data-*-Attribute, um Ihren Selektoren einen Kontext zu geben und sie von CSS- oder JS-Änderungen zu isolieren. Ziele nicht auf Elemente ab, die auf CSS-Attributen wie id, class, tag basieren. Ziele nicht auf Elemente, die ihren textContent ändern können. Verwende keine zu generischen Selektor (z. B. cy.get(button)).

Keine Rückgabewerte zuweisen
Cypress läuft NICHT synchron zueinander.

Teste keine externen Seiten oder Plugins
Teste nur Websites oder Plugins, die du direkt kontrollierst. Versuche zu vermeiden, einen Server eines Drittanbieters zu verwenden. Eine Möglichkeit wäre ein API-Call von Cypress mittels cy.request(), um mit Servern von Drittanbietern über deren APIs zu kommunizieren.

Halte Tests untereinander unabhängig
Machen einen Test nicht von einem anderen abhängig, dies könnte das Testverhalten und die Logik dahinter nur unnötig beeinflussen.

Bereinige den Zustand vor der Ausführung der Tests
Bereinige den Zustand nicht mit after oder afterEach. Ein Vorteil von Cypress ist das inkrementelle Schreiben von Tests und Anwendungscode. Wenn der Zustand nach einem Test nicht aufrechterhalten wird, kann es schwieriger werden, herauszufinden, was als nächstes getestet werden soll. Wenn mitten im Test etwas fehlschlägt, haben die Nachbereinigungsfunktionen keine Chance, ausgeführt zu werden. Cypress bereinigt den Zustand zwischen den Tests bereits, so dass man sich darüber keine Gedanken machen muss.

Fazit

Obwohl es viele gute Alternativen gibt, sticht Cypress hervor, insbesondere wenn es um End-to-End-Tests geht. Mit seiner einfachen Installation, Echtzeit-Reloading, mächtigen Debugging-Tools und der starken Community bietet Cypress alles, was Entwickler- und QA-Teams für zuverlässige Tests benötigen. Wenn man nach einem effektiven und benutzerfreundlichen Testing Framework für JavaScript und Frontend-Entwicklung sucht, ist Cypress zweifellos ein guter Start.

Da ich im Laufe der Masterklasse ein mögliche Spezialisierung Richtung (Software) Testing anstrebe, versuche ich so viel Know-now diesbezüglich zu sammeln. Dafür hab ich eine kleine Sammlung an nützlichen Links zusammengestellt, diese wird in Zukunft auch weiter ergänzt.

Außerdem werden die ersten Testings-Workflows für ein Ionic-Webprojekt im Rahmen der Mastklasse in Cypress erstellt.

Quellen

• https://www.cypress.io/
• https://filiphric.com/how-to-structure-a-big-project-in-cypress
• https://www.packtpub.com/product/end-to-end-web-testing-with-cypress/9781839213854
• https://cypress-course.vercel.app/

The post Testing-Framework Universum für JavaScript und Cypress appeared first on Mobile USTP MKL.

Erstellung einer Diashow mit den besten Fotos und Videos

Remake der Spotify-Kampagne “Wrapped“

Installation

Voraussetzungen:

• Um Remotion zu verwenden, benötigen man mindestens Node 14.
• Linux-Benutzer müssen einige zusätzliche Pakete installieren, damit Chrome/Puppeteer korrekt funktioniert.
• Remotion benötigt zum Rendern von Videos die Binärdateien ffmpeg und ffprobe (Mindestversion 4.1). Wenn man diese nicht installiert hat, wird Remotion versuchen, FFmpeg zu installieren. Man kann dies überprüfen, indem man den Befehl ffmpeg in der Befehlszeile ausführt. Wenn es installiert ist, sollten man die FFMPEG-Informationen für Ihren Rechner auf der Konsole sehen.

FFMPEG

Das Projekt FFmpeg besteht aus einer Reihe von Programmen und Bibliotheken, die es ermöglichen, Video- und Audiodaten aufzunehmen, zu konvertieren, ins Netzwerk zu übertragen (streamen) und abzuspielen. So enthält es unter anderem mit libavcodec eine hoch entwickelte Codec-Zusammenstellung.  Aufgrund der Tatsache, dass FFmpeg im Terminal ausgeführt wird, ist es möglich, auch mehrere Dateien zu verarbeiten (“Stapelverarbeitung”).

Projekterstellung

Ein neues Remotion-Projekt initialisiert man, indem man folgenden Befehl verwendet:

npm init video

Man wird aufgefordert, das Video zu benennen und eine Vorlage auszuwählen. Wir verwenden die Vorlage “Blank”, aber man kann später auch die anderen Vorlagen ausprobieren.

Vorschau der Videos

Als erstes schauen wir uns das Remotion-Vorschau-Tool an. Es wurde praktischerweise als NPM-Startskript hinzugefügt, also führen wir es mal aus.

npm start

Wenn sich das Vorschautool nicht automatisch in einem Browserfenster geöffnet hat, sieht man sich die URL an, die in der Konsole ausgegeben wird, nachdem man den obigen Befehl ausgeführt haben.

Mit dem Vorschauwerkzeug kann mit dem Remotion-Video indem Projekt interagieren. Es ist das Hauptentwicklungswerkzeug, das man bei der Erstellung Ihres Videos verwenden werden. Es wird automatisch aktualisiert, wenn maneine Änderung im Quellcode vornehmen. Wir werden uns jetzt einige grundlegenden Funktionen ansehen.

Drücke die Abspieltaste im unteren Teil des Vorschauwerkzeugs. Man sollte sehen, wie sich die Zeitanzeige (der “Abspielkopf”) über den unteren Teil des Browserfensters bewegt.

Projekttour

Die Grundidee hinter Remotion ist, dass wir Ihnen eine Frame-Nummer und eine leere Leinwand geben und man die Freiheit bekommt, alles zu rendern, was man mit React programmieren kann.

Schauen wir uns die Dateien an, die wir in einem Basis-Remotion-Projekt finden, was sie enthalten und was sie tun.  Es gibt drei Dateien im src-Ordner:

• index.ts
• Root.tsx
• Composition.tsx

In index.ts sehen wir:

registerRoot() ist eine Funktion, die Remotion mitteilt, wo sich das Stammverzeichnis befindet. So wie ReactDOM.createRoot() die Wurzel eines React-Projekts erzeugt, erzeugt registerRoot() die Wurzel eines Remotion-Projekts.

Dann importieren wir die Komponente, die unsere Wurzel enthält, RemotionRoot.

Schließlich verwenden wir registerRoot(RemotionRoot), um die Wurzel zu registrieren. All dies sollte sehr vertraut sein, wenn man React.createRoot() bereits verwendet hat.

In der Datei Root.tsx sehen wir:

Hier exportieren wir eine Komponente, die eine oder mehrere <Komposition/>-Komponenten enthält. Im Moment gibt es nur eine.

Wenn man “Komposition” liest, können man genauso gut an “Video” denken. Eine Komposition wird zu einem Video, wenn man Remotion anweist, sie zu exportieren. Jede <Komposition/> registriert ein Video in Remotion, und das ermöglicht zwei wichtige Dinge:

1. Man kann das Video im Vorschautool sehen.
2. Exportieren es mit dem Befehl npx remotion render*.

Werfen wir einen Blick auf package.json. Das Build-Skript verwendet remotion render, um das Video zu exportieren.

Man kann so viele <Composition/> hinzufügen, wie man will, aber nur hier in Root.tsx. Das Video wird anhand seiner Kompositions-ID registriert, und wenn wir uns unsere Datei jetzt ansehen, gibt es nur eine Komposition, und die hat id=”MyComp”.

Es gibt noch eine weitere wichtige Eigenschaft in <Composition/>, und zwar die Komponenten-Eigenschaft. Diese Requisite teilt Remotion mit, welche React-Komponente beim Exportieren oder bei der Anzeige im Vorschauwerkzeug verwendet werden soll. Wir verwenden MyComposition aus der Datei Composition.tsx. Wir werden bald sehr viel Zeit in dieser Datei verbringen!

Der Rest von <Composition/> sind andere Einstellungen für Ihr Video. Schauen dir diese gerne an, aber für den Moment belassen wir es bei den Standardwerten.

Ein Video ist eine Funktion von Bildern im Zeitverlauf. Wenn man den Inhalt bei jedem Bild ändert, erhaltet man eine Animation. Ein Video hat 4 Eigenschaften:

• Breite in Pixel.
• Höhe in Pixel.
• durationInFrames: Die Anzahl der Bilder, die das Video lang ist.
• fps: Bilder pro Sekunde. Die Dauer in Frames geteilt durch FPS ergibt die Dauer in Sekunden.

Diese Eigenschaften sind variabel und man kann eine Komponente mehrfach mit unterschiedlichen Eigenschaften wiederverwenden. Anstatt diese Werte fest zu codieren, können wir sie über den useVideoConfig()-Hook ableiten:

Das erste Bild eines Videos ist 0 und das letzte Bild ist durationInFrames – 1.

Die letzte Datei, Composition.tsx, enthält alles, was in dem Video zu sehen sein wird. Es ist deine Leinwand.

Dies ist die Komponente, mit der ein Video registriert wird, damit es gerendert werden kann und in der Seitenleiste der Remotion-Entwicklungsoberfläche angezeigt wird.

Eine Komposition stellt das zu erstellende Video als Sammlung von Clips dar (z. B. mehrere <Sequence>), um das Video zu bilden.

Frame-by-Frame-Animation mit “UseCurrentFrame()”.

Mit deinem React-Kenntnisse kann man sehr einfach Animationen in deinem Video zaubern.

Platziere ein Textelement zentriert in der Mitte des Videos in Composition.tsx. Besser, aber immer noch keine Bewegung.

Lass uns dieses Textelement wackeln lassen. Füge die folgenden Änderungen hinzu, um unser Textelement horizontal wackeln zu lassen.

Drücke nun im Vorschautool auf Play. Endlich tut sich etwas!  Aber… wie?  Ein Video ist einfach eine Reihe von Bildern. Die Bilder sind fast gleich, aber nicht genau gleich. Wenn man die Bilder nacheinander anzeigen lässt, entsteht die Illusion einer Bewegung.

Jedes Bild wird als Einzelbild bezeichnet. Remotion kann uns die aktuelle Bildnummer mit der Funktion useCurrentFrame() mitteilen, die Folgendes zurückgibt:

• 0 für das erste Bild,
• 1 für Bild Nummer zwei,
• 2 für das dritte Bild usw..

Dann liegt es an uns, etwas auf den Bildschirm zu zeichnen (zu rendern). Wenn das Rendering abgeschlossen ist, nimmt Remotion ein Bild auf. Dieser Vorgang wird für jedes Bild wiederholt. Und wenn wir fertig sind, fügt Remotion die Bilder zu einem Video zusammen.  Lasst uns die Bildnummer in der Komponente rendern.

Spiele nun das Video im Vorschautool ab. Man sieht, dass es bei 0 beginnt und mit der Zeit zunimmt.

Animation ist Mathematik

Key Takeaway: Die Platzierung von Dingen auf dem Bildschirm ist reine Mathematik. Vor allem Trigonometrie!

Um das zu sehen, sehen wir uns den Code an, der den Text wackeln lässt.

• Math.sin(frame) wechselt zwischen -1 und 1, wenn der Rahmen größer wird.

Um zu sehen, was in unserer CSS-Transformation passiert, listen wir einige Werte für frame auf und sehen, was die Transformation ergibt.

Wie wir sehen können, wechselt translateX(frame) zwischen positiven und negativen Werten, und der Text bewegt sich zwischen translateX(-1px) und translateX(1px) hin und her.

WICHTIG

• Jede Animation in Remotion muss auf dem Wert basieren, der von useCurrentFrame() zurückgegeben wird. Dies ist eine häufige Quelle der Verwirrung, wenn man frame-basierte Animationen macht. Viele Leute werden versuchen, CSS-Animationen oder bestehende Animationsbibliotheken zu verwenden, aber das wird fast nie funktionieren.
• Remotion wird nicht wissen, wann es ein Bild von der Animation machen soll, und die Animation wird flackern, weil sie nicht mit den Frames synchronisiert ist.
• Allerdings, wenn die Lösung es ermöglicht, useCurrentFrame() zu verwenden, um die Animation zu steuern, ist alles gut.
• Hilfsfunktionen wie useVideoConfig() und useCurrentFrame() sind die Bausteine von Remotion. Sie ermöglichen es uns, Animationen zu erstellen, die mit den Frames des Videos synchronisiert sind.

Interpolate Funktion

Wenn wir den Text über 60 Bilder einblenden wollen, müssen wir die Deckkraft schrittweise von 0 auf 1 ändern.

Die Verwendung der Funktion interpolate() kann die Lesbarkeit von Animationen verbessern. Die Funktion benötigt 4 Argumente:

• Den Eingabewert
• Der Wertebereich, den die Eingabe annehmen kann
• Der Wertebereich, auf den Sie die Eingabe abbilden möchten
• Optionale Einstellungen

In diesem Beispiel ordnen wir den Bildern 0 bis 60 ihre Deckkraftwerte zu (0, 0,0166, 0,033, 0,05 …) und verwenden die Einstellung extrapolateRight, um die Ausgabe so zu begrenzen, dass sie nie größer als 1 wird.

In- and Out-Effekte

Wir behalten unseren Einblendungseffekt bei, fügen aber am Ende einen Ausblendungseffekt hinzu. 20 Bilder vor dem Ende des Videos sollte die Deckkraft immer noch 1 sein. Am Ende sollte die Deckkraft 0 sein.

Wir können über mehrere Punkte in einem Durchgang interpolieren und useVideoConfig() verwenden, um die Dauer der Komposition zu bestimmen.

Easing

Das Easing-Modul implementiert gängige Easing-Funktionen. Diese können mit der interpolate() API verwendet werden.

Visualisierungen einiger gängiger Easing-Funktionen findet man unter:

• http://easings.net/
• https://cubic-bezier.com/
• https://www.remotion.dev/docs/easing#bounce

AbsoluteFill

<AbsoluteFill/> ist eine Komponente, die den gesamten Rahmen ausfüllt. Sie ist nützlich für Hintergründe und andere Elemente, die absolut positioniert werden sollen. Es ist dasselbe wie ein Element mit Position: absolut und den Eigenschaften oben, links, rechts und unten auf 0 gesetzt.

Img

<Img/> ist dasselbe wie das reguläre <img/>-Element, aber es wartet, bis das Bild geladen ist, bevor es den Rahmen rendert.

Sequence

Durch die Verwendung einer Sequenz kann man die Anzeige der Komponenten oder Teile der Animation im Video zeitlich verschieben.

• Bei allen untergeordneten Komponenten innerhalb einer <Sequence> wird der Wert von useCurrentFrame() um den Wert from verschoben.
• Mithilfe der Eigenschaft durationInFrames kann definiert werden, wie lange die Kinder einer <Sequence> eingebunden werden sollen.
• Standardmäßig werden die Kinder einer <Sequence> in eine <AbsoluteFill>-Komponente eingepackt. Wenn man dieses Verhalten nicht wünscht, füge layout=”none” als Prop hinzu.
• from: Bei welchem Bild sollen die Kinder der Sequenz davon ausgehen, dass das Video beginnt.
• durationInFrames: Für wie viele Bilder die Sequenz angezeigt werden soll. Standardmäßig ist dies Infinity, um die Dauer der Sequenz nicht zu begrenzen.
• name: Man kann der Sequenz einen Namen geben, der dann als Bezeichnung der Sequenz in der Zeitleiste der Remotion-Vorschau angezeigt wird. Diese Eigenschaft dient lediglich dazu, den Überblick über die Sequenzen in der Zeitleiste zu behalten.
• layout: Entweder “absolute-fill” (Standard) oder “none”. Standardmäßig werden die Sequenzen absolut positioniert, so dass sie sich gegenseitig überlagern.

Export

Rendern wir unser Video. Aber zuerst: Haben wir die Kompositions-ID auch angepasst? Wenn wir die Kompositions-ID geändert haben, sollte das Build-Skript in der package.json wie folgt aussehen:

“build”: “remotion render src/index.ts CompName out/video.mp4”

npm run build

Mit diesem Befehl wird mit dem Remotion-Render-Befehl eine Videodatei im Out-Ordner erstellt.

Ändern Sie sie, um ein anderes Video zum Rendern auszuwählen oder den Ausgabeort zu ändern. Alle Optionen findet man auf der CLI-Referenzseite.

• https://www.remotion.dev/docs/cli
• https://www.remotion.dev/docs/encoding

Fazit

Mit dem Video-Framework Remotion und einem Grundwissen in React können mit wenigen Zeilen Code dynamisch erzeugte Videos generiert werden ohne einer Verwendung eines Videobearbeitungsprogramme. Ein möglicher Use-Case wäre eine automatisierte Videoerstellung von Video-Content für Digital-Signage-Systemen wie z.B. Videos für Infoscreens in den öffentlichen Verkehrsmitteln.

Ein Beispielsvideo wurde mithilfe der API-Schnittstelle der APA, der Nationale Nachrichtenagentur, generiert. Es wurden dabei die aktuellen Nachrichtenbeiträge plus Beitragsfoto für das animierte Video verwendet.

Quellen

• Remotion Doku | https://www.remotion.dev/
• Easing Funktionen | https://easings.net/
• APA API | https://api.ots.at/wizard/

The post Remotion | Videos mit Code erstellen appeared first on Mobile USTP MKL.

Im 1. Semester haben wir uns auf die Entwicklung der Android-App konzentriert.

Team | Rollen

• Manuel Hecht
  • Mediathek API (Backend)
  • Home Screen mit Sendungsübersicht
  • Sendungssuche
  • Testen
• Mohamed Abd-El-Rehim
  • Userverwaltung | Login & Registrierung
  • Firebase Verwaltung
  • Testen

• Florian Bauer
  • UI-Design der App
  • Videoplayer-Integration
  • Testen

Projektorganisation

Wir verwenden für unsere Projekt GitLab auf dem FH-internen Server.

GitLab | Flimmerkiste (Link)

Entwicklung

Für die Umsetzung von unserem Semesterprojekt haben wir uns für Flutter, das Entwicklungs-Kit von Google entschieden.

Flutter

Flutter ist ein Open-Source-Framework für die Entwicklung mobiler Anwendungen, mit dem Entwickler hochwertige, plattformübergreifende mobile Anwendungen mit einer einzigen Codebasis erstellen können. Das Hauptmerkmal von Flutter ist die Fähigkeit, schöne, reaktionsfähige und schnelle Anwendungen zu erstellen, die einfach zu warten sind.

Wir wollen unsere Anwendung für möglichst viele Plattformen in Zukunft anbieten, diese sollen von Semester zu Semester ergänzt werden.

Das Erlernen einer Cross-Platform-Entwicklungsumgebung war ein wichtiger Entscheidungsgrund für alle Projektmitglieder. Bis vor Projektbeginn hatte kein Mitglied Berührungspunkte mit so einer All-in-One Umgebung.

Der klare Nachteil war die längere Einschulungsphase bei allen Teammitglieder, ein Flutter-Workshop wäre hier hilfreich gewesen. Zum Beispiel konnten gewisse Verhaltensweisen von Flutter nicht nachvollzogen (z.B. States) werden.

Design

Fokussierung des Designs erfolgte fürs 1. Semester auf die Android Variante.

Figma-Designentwurf V1

Backend

Datenbank | Google Firebase

Für unsere Benutzerverwaltung verwenden wir Google Firebase als Datenbank. Derzeit werden folgende Tabelle/Daten gespeichert:

• Benutzer:innen
  • Mail, Name

• Favoriten = Sendungen
  • Kanal, Sendungstitel

MediathekView API

Als Datenquelle verwenden wir die API von MediathekView. Diese darf aus rechtlichen Gründen leider nicht auf unserer Seite in einem eigenen Backend abgespeichert werden Aus diesem Grund holen wir uns nur temporär per API-Abfage die jeweiligen benötigten Daten.

MediathekView durchsucht die Online-Mediatheken verschiedener öffentlich-rechtlicher Sender und listet diese gefundenen Sendungen auf. Es werden die Videobeiträge aus den Mediatheken direkt verwendet, das heißt das Hosting findet bei den jeweiligen Sendern statt.

MediathekView kann aus diesem Grund nur Sendungen anzeigen, die in den Mediatheken der Sender selbst noch als Videos angeboten werden.

Die Sendungen vom ORF sind aus rechtlichen Gründen nur aus den letzten sieben Tagen verwendbar.

Mediathek View Web (Link)

Derzeit werden die Mediatheken der folgenden Sender unterstützt:

• ARD (Das Erste)
• Arte (deutsch, englisch, französisch, spanisch, italienisch und polnisch)
• alpha
• BR (Bayerischer Rundfunk)
• HR (Hessischer Rundfunk)
• MDR (Mitteldeutscher Rundfunk)
• NDR (Norddeutscher Rundfunk)
• RBB (Rundfunk Berlin-Brandenburg)
• rbtv (radiobremen)
• SR (Saarländischer Rundfunk)
• SWR (Südwestrundfunk)
• WDR (Westdeutscher Rundfunk)
• ZDF (Zweites Deutsches Fernsehen)
• ZDFinfo
• ZDFneo
• zdf-tivi
• Gemeinschaftsprogramme von ARD und ZDF
• 3Sat
• Funk
• Kika (Kinderkanal von ARD und ZDF)
• Phoenix
• DW TV (Deutsche Welle)
• ORF (Österreichischer Rundfunk)
• SRF (Schweizer Rundfunk) inkl. Podcasts

Eine Abfrage an die MediathekViewWeb API liefert folgende Infos:

• Kanalname (channel)
• Sendungsname (topic)
• Sendungstitle (title)
• Sendungsbeschreibung (description)
• Zeitstempel (timestamp,filmlisteTimestamp)
• Sendungsdauer (duration)
• Dateigröße (size)
• Sendungslink auf die Website des jeweiligen Senders (url_website)
• Untertitel zur Sendung (url_subtitle)
• Videolink in mittlerer Qualität (url_video)
• Videolink in niedrigster Qualität (url_video_low)
• Videolink in hoher Qualität (url_video_high)
• MediathekView-ID (id)

Ein Beispiel aus der ARD-Mediathek:

MediathekViewWeb API Samplecode (Link)

Für unsere jetzige Implementierung verwenden wir zwei verschiedene Queries:

• Query für den Home Screen
  • Abfrage nach allen Videos eines Senders (channel).
  • Es werden die aktuellsten 10 Sendungen (DESC) des Kanals als Ergebnis geliefert.

• Query für die Suche nach einer Sendung
  • Abfrage erfolgt nach dem Sendungstitle (title).
  • Es werden die aktuellsten 10 Sendungen (DESC) mit einer Übereinstimmung des Suchwortes als Ergebnis geliefert.

Folgende Felder erhalten wir als Antwort (JSON), die wir für das Frontend weiterverarbeiten.

• Feld “topic”:
• Feld “title”:
• Feld “channel”:
• Feld “url_video”:
• feld “filmlisteTimestamp”:
• feld “duration”
• feld “description”

Funktionen

Home Screen

Die aktuellsten zehn Sendungen ausgewählter Kanäle werden als scrollbare Listenzeile angezeigt.

Suche nach Sendungstitel

Es werden die zehn neuesten Ergebnisse gezeigt.

Bei einem Ergebnisumfang größer zehn, können die Ergebnisse erweitert werden.

Benutzerprofil

Die Flimmerkiste enthält eine Benutzerprofil-Funktion. Mit dieser Funktion kann man sein persönliches Konto in der App erstellen und verwalten. Mit einem Benutzerprofil kann man Lieblingssendungen speichern. Das Profil kann folgende Daten anpassen:

• Profilfoto
• Mailadresse
• Name
• Passwort

Und es können Sendungen favorisiert werden.

Video-Player

Der Hauptbestandteil von Flimmerkiste ist das Video-Player, welcher die jeweiligen Sendungsvideos des Kanals abspielt. Um auf die Anforderungen des Players einzugehen, wird zuerst eine Übersicht der Spezifikationen der abzuspielenden Videos aufgelistet.

Alle Videos aus den Mediatheken werden in zwei Varianten (MP4 & HLS-Stream) angeboten.

Encodierung der Videos:

• Container: MPEG-4
• Video: AVC (H264)
• Audio: AAC LC (Stereo)

MP4

Niedrige Qualität

Mittlere Qualität

Höchste Qualität

HLS-Stream

Videos von ORF und SRF werden nicht als *.mp4 angeboten, sondern nur als HLS-Stream zur Verfügung gestellt. Eine Manifest-Datei (*.m3u8) definiert in welcher Qualität das Video abgespielt wird.

ORF:

Niedrige Qualität

#EXT-X-STREAM-INF:BANDWIDTH=1089858,CODECS="avc1.100.30,mp4a.40.2",RESOLUTION=640x360

Mittlere Qualität

#EXT-X-STREAM-INF:BANDWIDTH=2123246,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=960x540

Höchste Qualität

#EXT-X-STREAM-INF:BANDWIDTH=3417151,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=1280x720

SRF:

Die Manifest-Datei (*.m3u8) verweist auf die einzelnen Videosegmente (.ts) in der jeweiligen Qualitätsstufe (Low, Mid, High).

#EXTINF:4.840,

segment-1-f4-v1-a1.ts

#EXTINF:6.000,

segment-2-f4-v1-a1.ts

Der Player muss folgenden Anforderungen in erster Phase erfüllen:

• Abspielen von Videos, die als *.mp4 und *.m3u8 gehostet sind.
• Besitzt Basis-Steuerungselemente: Zeitleiste, Lautstärkeregelung, Play-/Pausefunktion und Vollbildmodus
• Unterstützung für Android & iOS, idealerweise auch Web
• Anpassbare Playerelemente für zukünftige Features wie z.B. die Einstellung der Videoqualität per Steuerungselement, Untertiteleinblendung

Die Flutter-Community hat bereits einige nützliche Player-Plugins für Flutter entwickelt. Diese wären:

video_player

• https://pub.dev/packages/video_player
• Dieser Player ist der stabilste (Version 2.5.2) von allen getesteten Plugins.
• Alle notwendigen Plattformen werden unterstützt.
• Nur Basisfunktionen verfügbar, kaum angepasste Funktionen verfügbar.
• Nur *.mp4 gehostete Videos abspielbar.

chewie

• https://pub.dev/packages/video_player
• Ein Video-Player mit erweiterten Steuerungselementen.
• Alle notwendigen Plattformen werden unterstützt.
• Erweiterbare Steuerungselemente verfügbar.
• HLS-Videostream und MP4-Videos abspielbar.
• Das Plugin basiert auf video_player.
  

better_player

• https://pub.dev/packages/better_player
• Instabiler Player-Plugin mit den umfangreichsten Funktionen.
• Unterstützung von Android & iOS
• Alle Videoformate abspielbar.
• Umfangreiches Set an Steuerungselementen.
• Das Plugin basiert auf chewie.

chewie wurde als Video-Player für die erste Phase gewählt. Es konnten alle Use-Cases an Mediatheken-Videos damit problemlos abgespielt werden.

Plattform-Verhalten:

• Android: Reibungslose Verwendung
• iOS: Konnte derzeit nicht getestet werden
• Web: Problem mit Vollbildmodus, beim Verlassen wird Video wieder von Beginn abgespielt

Learnings

• Sammlung erster Erfahrungen mit Cross-Plattform-Entwicklung (Flutter)
• Allgemeiner Einstieg in Programmiersprache Dart 
• State-Management in Flutter, zu Beginn einige Schwierigkeiten mit Verständnis
• Vertiefung des Google Firebase Wissen (Auth & Storage)
• Videoplayer-Handling auf den verschiedenen Plattformen

Roadmap

• Stabile Web-Version
• iOS-Version
• Videoqualität per Player einstellbar
• Einbindungsmöglichkeiten von Untertiteln
• Navigation Bar zu einer verbesserten Navigation
• Code Abstraktionen
• Angepasste Bilder für Sendungen
• Auswahl der Sender für Home-Screen
• Empfehlungen für Sendungen aufgrund von Favoriten
• Erstellen von Playlisten (Watch-Listen)
• Verbesserte Suche mit Filtermöglichkeiten

Fazit

Die Flimmerkiste ist eine hervorragende Lösung für alle, die in einer App das Videoangebot aller deutschsprachigen öffentlich-rechtlichen TV-Sender sehen wollen. Die Funktionen der App, einschließlich der Wiedergabe eines Videos, eines Benutzerprofils und einer Liste von Kanälen in Kategorien, bietet ein umfassendes und personalisiertes Medienerlebnis. Mit der weiteren Entwicklung der App wird sie zu einem noch wertvolleren Werkzeug für Medienkonsumenten werden.

The post Flimmerkiste | Semesterprojekt appeared first on Mobile USTP MKL.