Screenio: Screen Recording als Chrome Extension — mit zeitgestempelten Kommentaren
Wie ich eine Chrome Extension für Screen Recording mit automatischem Upload, Video-Player und zeitgestempelten Kommentaren gebaut habe.
Warum noch ein Screen-Recording-Tool?
Es gibt Loom, es gibt OBS, es gibt dutzende Alternativen. Warum also ein eigenes Tool bauen?
Die Antwort ist einfach: Keines dieser Tools löst das eigentliche Problem — schnelles, kontextbezogenes Feedback in Teams. Loom will ein Abo verkaufen, OBS ist ein Produktionsstudio, und die meisten Browser-Extensions fühlen sich an wie Prototypen aus 2018.
Screenio ist anders. Ein Klick, Aufnahme läuft, Video wird automatisch hochgeladen, Link wird generiert. Fertig. Kein Login-Zwang, kein Wasserzeichen, keine künstlichen Limits.
Die Idee: Feedback als Handwerk
Als Entwickler kenne ich das: Ein Bug wird gemeldet, aber die Beschreibung ist unklar. "Der Button funktioniert nicht" — welcher Button? Auf welcher Seite? Was passiert genau? Drei Rückfragen später hat man vielleicht verstanden, was gemeint war.
Screen Recordings lösen das. Aber nur, wenn sie schnell erstellt werden können und präzises Feedback ermöglichen. Genau hier setzt Screenio an.
Architektur: Chrome Extension trifft Laravel-Backend
Die Extension
Screenio läuft als Chrome Extension direkt im Browser. Kein Download, kein Setup — installieren und loslegen.
Die Aufnahme nutzt die MediaRecorder API und WebRTC für verlustfreie Screen Captures. Der Nutzer kann zwischen Tab-Aufnahme, Fenster oder gesamtem Bildschirm wählen. Während der Aufnahme zeigt ein Picture-in-Picture-Fenster den Status — minimalistisch und unaufdringlich.
Nach dem Stoppen wird das Video automatisch an das Backend gestreamt. Kein manueller Upload, kein Warten auf Konvertierung.
Das Backend
Ein Laravel-Backend übernimmt die schwere Arbeit:
- Video-Verarbeitung: Serverseitige Optimierung für Streaming-Formate
- Thumbnail-Generierung: Automatische Vorschaubilder für jeden Clip
- Link-Management: Jedes Video bekommt einen eindeutigen, teilbaren Link
- User-Verwaltung: Dashboard mit allen eigenen Aufnahmen
Der Video-Player
Das Herzstück für Teams ist der integrierte Video-Player mit zeitgestempelten Kommentaren. Das funktioniert so:
- Ein Teammitglied teilt den Video-Link
- Der Empfänger schaut das Video im Browser
- An jeder beliebigen Stelle kann ein Kommentar hinterlassen werden
- Der Kommentar wird mit dem exakten Zeitstempel verknüpft
- Beim Abspielen erscheinen die Kommentare kontextbezogen
Das ersetzt endlose Slack-Threads à la "Bei Minute 2:34 meine ich den blauen Button links oben". Stattdessen klickt man einfach auf den Kommentar und springt zur richtigen Stelle.
Technische Highlights
MediaRecorder API
Die MediaRecorder API ist mächtig, aber auch tückisch. Screenio löst einige häufige Probleme:
- Chunked Upload: Videos werden während der Aufnahme in Chunks hochgeladen — nicht erst am Ende. Das verhindert Datenverlust bei Browser-Crashes.
- Adaptive Qualität: Je nach verfügbarer Bandbreite wird die Bitrate automatisch angepasst.
- Audio-Mixing: System-Audio und Mikrofon werden sauber zusammengemischt.
Performance
Ein Screen-Recording-Tool darf das System nicht ausbremsen. Screenio erreicht das durch:
- Hardware-beschleunigte Kodierung über den Browser
- Minimaler Memory-Footprint durch direktes Streaming statt lokaler Zwischenspeicherung
- Non-blocking UI — die Extension läuft im Service Worker, getrennt vom aufgenommenen Tab
Der Unterschied zu Loom & Co.
| Screenio | Loom | OBS | |
|---|---|---|---|
| Setup | Chrome Extension | Chrome Extension + Account | Desktop App |
| Zeitgestempelte Kommentare | Ja | Nur Pro | Nein |
| Videolänge (Free) | Unbegrenzt | Max. 5 Minuten | Unbegrenzt |
| Anzahl Videos (Free) | Unbegrenzt | Max. 25 Videos | Unbegrenzt |
| Self-Hosted | Ja | Nein | N/A |
| Upload | Automatisch | Automatisch | Manuell |
| Kosten | Eigene Infrastruktur | Ab $15/Monat | Kostenlos |
Zwei Punkte stechen besonders hervor: Looms Free-Plan ist auf 5 Minuten pro Video und maximal 25 Videos begrenzt. Für ein schnelles Bug-Report-Video reicht das vielleicht — für regelmäßiges Team-Feedback wird es schnell eng. Bei Screenio gibt es diese künstlichen Limits nicht.
Dazu kommt Self-Hosting. Sensible Inhalte — Code-Reviews, interne Tools, Kundendaten — verlassen nie die eigene Infrastruktur. Für Unternehmen mit Compliance-Anforderungen ist das ein entscheidender Faktor.
Fazit
Screenio zeigt, dass man mit modernen Web-APIs ein vollwertiges Screen-Recording-Tool bauen kann — ohne Electron, ohne Desktop-App, direkt im Browser.
Die Kombination aus Chrome Extension, zeitgestempelten Kommentaren und Self-Hosting macht es zur idealen Lösung für Teams, die schnelles, präzises Feedback brauchen — ohne ihre Daten an Dritte zu geben.
Interesse an einer ähnlichen Lösung für dein Team? Lass uns sprechen — von der Chrome Extension bis zum Backend.
Timo Sütterlin
Fullstack-Entwickler — Web, Mobile, KI