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. Teamleiter:in (m/w/d) IT Infrastruktur
    DKMS gemeinnützige GmbH, Tübingen, Köln
  2. Workplace Administrator (MEMCM / MEMMI) (m/w/d)
    Hays AG, Villingen-Schwenningen
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
Opel Mokka-e im Praxistest
Reichweitenangst kickt mehr als Koffein

Ist ein Kompakt-SUV wie Opel Mokka-e für den Urlaub geeignet? Im Praxistest war nicht der kleine Akku das eigentliche Problem.
Ein Test von Friedhelm Greis

Opel Mokka-e im Praxistest: Reichweitenangst kickt mehr als Koffein
Artikel
  1. Ransomware: Unternehmen beklagen immense Schäden durch Cyberangriffe
    Ransomware
    Unternehmen beklagen immense Schäden durch Cyberangriffe

    Die Angriffe mit Ransomware nehmen massiv zu, zeigt nun auch der Bitkom-Verband. Auch das Homeoffice wird sicherheitskritisch.

  2. Galactic Starcruiser: Disney eröffnet immersives (und teures) Star-Wars-Hotel
    Galactic Starcruiser
    Disney eröffnet immersives (und teures) Star-Wars-Hotel

    Wer schon immer zwei Tage lang wie in einem Star-Wars-Abenteuer leben wollte, bekommt ab dem Frühjahr 2022 die Chance dazu - das nötige Kleingeld vorausgesetzt.

  3. Model 2: Teslas 25.000-Dollar-Auto soll noch 2021 erprobt werden
    Model 2
    Teslas 25.000-Dollar-Auto soll noch 2021 erprobt werden

    Das Model 2 von Tesla soll angeblich noch in diesem Jahr in die Testproduktion gehen und wie bei Tesla üblich sehr früh vorgestellt werden.

DerGuteWolf 25. Nov 2020

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



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
    Schnäppchen • Fire TV Stick 4K Ultra HD 29,99€, Echo Dot 3. Gen. 24,99€ • Robas Lund DX Racer Gaming-Stuhl 154,65€ • HyperX Cloud II Gaming-Headset 59€ • Media Markt Breaking Deals [Werbung]
    •  /