Screencasts als WebM und MP4

Komplexere Sachverhalte kann man am Bildschirm gut vorführen und dabei erklären. Das hilft sowohl beim Support von Lehrkräften, als auch bei der Onlineschule 2020:

  • Screencasts sind mit Audio (per Mikrophon) kommentierte Videos von meinem Bildschirm, in denen ich klickend etwas erkläre.
  • WebM ist ein Videocontainerformat1)
    • ohne Patentschutz
    • alle großen Browser und weitere Software können es problemlos darstellen
    • leider ist es auf Ipads nicht ohne zusatz-Apps abspielbar
    • man kann es mit freier (und damit auch kostenloser) Software herstellen
    • es benötigt vergleichsweise wenig Speicherplatz
  • MP4 ist ein anderes Videocontainerformat
    • üblich sind verschiedene i.d.R. patentgeschützte und tw. kostenpflichtige Video- und Audio-Codecs
    • alle großen Browser und weitere Software können es bei geschickter Codec-Wahl darstellen
    • man kann es auch mit kostenloser Software herstellen
    • es benötigt bei geeigneten Einstellungen vergleichsweise wenig Speicherplatz

Mein Workflow unter Ubuntu 18.04

  • Im maximierten Firefox die Webentwickleroption „Bildschirmgröße testen“ auf 1280×7202) einstellen um dort etwas zeigen.
  • Aufnahme dieses Bildschirmbereichs mit vokoscreen
    • speichern mit seinen Standardeinstellungen, aber auf 30Hz erhöhte Bildfrequenz
    • Mikrophon auswählen
    • Bildschirmbereich wählen3) - hier den verkleinerten Bereich in Firefox
  • Bearbeiten mit AVIdemux:
    • Zusammenfügen solcher Videos in Avidemux4)
    • Heraustrennen unnötiger Passagen5)
    • Speichern im Copymodus - also ohne Neukomprimierung - als beispiel.mkv
  • Aufruf eines Shellskripts mit ./mach_webm.sh beispiel.mkv bzw. ./mach_mp4.sh beispiel.mkv
    • Aufruf des ffmpeg-Programms mit vielen Parametern, erzeugt beispiel.mkv.webm bzw. beispiel.mkv.mp4
    • 2-Pass-Vorgang für bessere Qualität
    • Audio auf Mono reduzieren
    • Overlay eines bspw. halbtransparenten PNG-Bilds (im RGB-Modus) als Wasserzeichen oder Logo
    • Komprimierungseinstellungen sind sinnvoll für Bildschirminhalte, Filmsequenzen erfordern höhere Datenraten!

Der letzte Konvertiervorgang dauert auf meinem älteren Rechner von 2010 fünfmal so lange wie das Video dauert.

Quelltext von mach_webm.sh

mach_webm.sh
#!/bin/bash
# Quellen: https://stackoverflow.com/questions/10918907/how-to-add-transparent-watermark-in-center-of-a-video-with-ffmpeg
#          https://trac.ffmpeg.org/wiki/Encode/VP9
 
original=$1 
logo=/pfad/zum/logo.png
 
ffmpeg -i ${original} -vf "movie=${logo} [watermark]; [in][watermark] overlay=main_w-overlay_w-5:main_h-overlay_h-5 [out]" -c:v libvpx-vp9 -b:v 1M -pass 1 -an -f webm /dev/null -y && \
ffmpeg -i ${original} -vf "movie=${logo} [watermark]; [in][watermark] overlay=main_w-overlay_w-5:main_h-overlay_h-5 [out]" -c:v libvpx-vp9 -b:v 1M -pass 2  -ac 1 -c:a libopus ${original}.webm

Quelltext von mach_webm.sh

mach_mp4.sh
#!/bin/bash
 
original=$1 
watermark=/home/biec/Nextcloud/BieC/Privat/Grafiken/biene6eck_biec_48_trans.png
 
ffmpeg -i ${original} -vf "movie=${watermark} [watermark]; [in][watermark] overlay=main_w-overlay_w-5:main_h-overlay_h-5 [out]"  -filter:v fps=fps=30 -c:v libx264 -b:v 1M -pass 1 -an -f mp4 /dev/null -y && \
ffmpeg -i ${original} -vf "movie=${watermark} [watermark]; [in][watermark] overlay=main_w-overlay_w-5:main_h-overlay_h-5 [out]"  -filter:v fps=fps=30 -c:v libx264 -b:v 1M -pass 2 -ac 1 -c:a libmp3lame -q:a 9  ${original}.mp4

Quellen

1)
genauer: Containerformat mit festgelegten Video und Audiocodecs
2)
die Lage dieses Bereichs ist auch nächste Woche gleich
3)
der gewählte Bereich bleibt auch nach Programmende erhalten
4)
das erste Öffnen, weitere mit Menü →Datei→anhängen
5)
Markierung zum nächsten iFrame schieben, Bereich mit „[A“ und „B]“ markieren, dann entfernen