• IT-Karriere:
  • Services:

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. Volkswagen Financial Services AG, Braunschweig
  2. Osthannoversche Eisenbahnen AG, Celle

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


Anzeige
Spiele-Angebote
  1. 32,99€
  2. 11€
  3. 64,99€

DerGuteWolf 25. Nov 2020 / Themenstart

Gibt es da irgendwo zumindest eine Kurzanleitung? Im Blogeintrag dom-recording-for-web...

Kommentieren


Folgen Sie uns
       


Gocycle GX - Test

Das Gocycle GX hat einen recht speziellen Pedelec-Sound, aber dafür viele Vorteile.

Gocycle GX - Test Video aufrufen
Quereinsteiger: Mit dem Master in die IT
Quereinsteiger
Mit dem Master in die IT

Bachelorabsolventen von Fachhochschulen gehen überwiegend sofort in den Job. Einen Master machen sie später und dann gerne in IT. Studienangebote für Quereinsteiger gibt es immer mehr.
Ein Bericht von Peter Ilg

  1. IT-Arbeit Es geht auch ohne Chefs
  2. 42 Wolfsburg Programmieren lernen ohne Abi, Lehrer und Gebühren
  3. Betriebsräte in der Tech-Branche Freunde sein reicht manchmal nicht

Blackwidow V3 im Test: Razers Tastaturklassiker mit dem Ping
Blackwidow V3 im Test
Razers Tastaturklassiker mit dem Ping

Die neue Version der Blackwidow mit Razers eigenen Klickschaltern ist eine grundsolide Tastatur mit tollen Keycaps - der metallische Nachhall der Switches ist allerdings gewöhnungsbedürftig.
Ein Test von Tobias Költzsch

  1. Gaming-Notebook Razer Blade 15 mit Geforce RTX 3080 und gestecktem RAM
  2. Project Brooklyn Razer zeigt skurrilen Gaming-Stuhl mit ausrollbarem OLED
  3. Tomahawk Gaming Desktop Razers winziger Gaming-PC erhält Geforce RTX 3080

CPU und GPU vereint: Wie die Fusion zu AMDs Zukunft wurde
CPU und GPU vereint
Wie die Fusion zu AMDs Zukunft wurde

Mit Lauchgemüse und Katzen-Kernen zu Playstation und Xbox: Wir blicken auf ein Jahrzehnt an Accelerated Processing Units (APUs) zurück.
Ein Bericht von Marc Sauter


      •  /