Browseraufruf: DOMrec zeichnet Web-Apps auf

Statt Web-Apps in einem Video aufzunehmen, speichert DOMrec Browseraufrufe, um diese für Demos wieder abzuspielen.

Artikel veröffentlicht am ,
Aufnahme und Wiedergabe waren früher deutlich schwieriger.
Aufnahme und Wiedergabe waren früher deutlich schwieriger. (Bild: Keystone/Hulton Archive/Getty Images)

Der ehemalige Mozilla-Entwickler Robert O'Callahan hat das Werkzeug DOMrec zum Aufzeichnen von Browseraufrufen vorgestellt. Dies soll ein Ersatz sein für normale Videos, die relativ groß und meist verlustbehaftet komprimiert werden. Die Idee für DOMrec war laut O'Callahan ein Web-Pendant zu Asciinema, das nicht nur Terminalaufrufe aufnimmt und abspielt, sondern den Status des DOM in einem Browser.

Stellenmarkt
  1. Systemadministrator (m/w/d) iSeries
    Hugo Benzing GmbH & Co. KG, Korntal-Münchingen
  2. Trainee IT (m/w/d)
    DZ Bank AG, Frankfurt am Main
Detailsuche

Der DOM-Recorder von O'Callahan und seinem Team ist für deren Pernosco Debugger entstanden, da das Team einfach die Anwendungsschnittstelle in einem kurzen Demo-Video aufnehmen wollte. Die mit dem neuen Werkzeug erstellten Aufnahmen sind dabei im Vergleich zu üblichen Videos sehr klein und umfassen meist nur wenige Kilobyte. Der Ansatz sorgt außerdem dafür, dass das Werkzeug plattformübergreifend genutzt werden kann, da die Demos schlicht in jedem Browser abgespielt werden können und dabei Pixel perfekt dargestellt werden.

Um eine Demo aufzuzeichnen, schleust DOMrec ein Skript in die Webanwendung ein, das den aktuellen Zustand des DOM aufzeichnet und mit Hilfe der Schnittstelle DOM Mutation Observer Veränderungen mit Zeitstempel speichert. Zum Abspielen dieser Demo wird ein Iframe erzeugt, der mit dem aufgezeichneten DOM befüllt wird. Hinzu kommen dann nur noch die Steuerknöpfe zum Abspielen wie in üblichen Videoplayern.

Außerdem kommen viele weitere Details dazu, die DOMrec aufzeichnet, um eine Darstellung sinnvoll nachvollziehbar zu machen. Dazu gehören der Mauszeiger und Klick-Events oder auch ein Fokus für bestimmte DOM-Elemente. Ebenso müssen Canvas-Drawcalls von DOMrec selbst erzeugt werden, da diese den DOM nicht ändern. Der Code von DOMrec findet sich auf Github. Mit 1.200 Zeilen Javascript sei die Anwendung auch klein genug, um sich leicht in die Nutzung einzuarbeiten.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
Visual Studio Code im Web mit Gitpod
Ein Gewinn für jede Tool-Sammlung

Helferlein Der Code-Editor Visual Studio Code erobert den Browser und die Remote-Arbeit - und das Kieler Unternehmen Gitpod ist mit seiner Lösung ganz vorne mit dabei.
Von Kristof Zerbe

Visual Studio Code im Web mit Gitpod: Ein Gewinn für jede Tool-Sammlung
Artikel
  1. Netze: Massenentlassungen bei Open-RAN-Pionier Parallel Wireless
    Netze
    Massenentlassungen bei Open-RAN-Pionier Parallel Wireless

    Es wird viel über Open RAN geredet, aber offenbar wenig gekauft. Mit Parallel Wireless ist das Überleben eines der bekanntesten Branchenunternehmen in Frage gestellt.

  2. Wärmeversorgung: Berlin baut Thermoskanne gegen Gasnotstand
    Wärmeversorgung
    Berlin baut Thermoskanne gegen Gasnotstand

    Der Versorger Vattenfall baut in Berlin einen riesigen Warmwasserspeicher, um Häuser im Winter heizen zu können. Das könnte beim möglichen Gasnotstand helfen.

  3. Informationsfreiheit: Beauftragte fordern Veraktung von Chatnachrichten
    Informationsfreiheit
    Beauftragte fordern Veraktung von Chatnachrichten

    Die Informationsfreiheitsbeauftragten Deutschlands stellen fest: SMS- und Chatnachrichten sollen veraktet werden - und somit via IFG anfragbar sein.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • HP HyperX Gaming-Headset -40% • Corsair Wakü 234,90€ • Samsung Galaxy S20 128GB -36% • Audible -70% • MSI RTX 3080 12GB günstig wie nie: 948€ • AMD Ryzen 7 günstig wie nie: 259€ • Der beste 2.000€-Gaming-PC • Cooler Master 34" UWQHD 144 Hz günstig wie nie: 467,85€ [Werbung]
    •  /