• 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. SAUTER Deutschland Sauter-Cumulus GmbH, Freiburg im Breisgau
  2. Advantest Europe GmbH, Böblingen

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
Hardware-Angebote

DerGuteWolf 25. Nov 2020 / Themenstart

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

Kommentieren


Folgen Sie uns
       


Radeon RX 6800 (XT) im Test mit Benchmarks

Lange hatte AMD bei Highend-Grafikkarten nichts zu melden, mit den Radeon RX 6800 (XT) kehrt die Gaming-Konkurrenz zurück.

Radeon RX 6800 (XT) im Test mit Benchmarks Video aufrufen
    •  /