Kontakt

Degree 4.0

Barrierefreie Videolernplattform für Studierende mit Echtzeit-Kollaboration und Videoschnitt im Browser

Die Technische Universität Dortmund DEGREE 4.0

DEGREE 4.0 ist ein Projekt der Technische Universität Dortmund und hat das Ziel angehenden Lehrerinnen und Lehrern theoriebasierte Praxiserfahrungen und Ausgangspunkte zum Reflektieren des eigenen Handelns zu ermöglichen. 

Zu diesem Zweck sollte eine digitale Lernplattform entwickelt werden mit der Studierende praxisrelevante Studieninhalte an videobasierten Fallbeispielen aus der Praxis erarbeiten und anwenden können.

Hierfür sollen sowohl selbst erstellte als auch von anderen zur Verfügung gestellte Videobausteine flexibel und problemorientiert unter spezifischen fachdidaktischen Fragestellungen verglichen, kritisch analysiert und weiterentwickelt werden.

Die Lernplattform soll barrierefrei sein.

Überblick

  • Videolernplattform für Studierende
  • Funktionen zur Annotation, Codierung und zum Schnitt von Videos
  • Kurs-, Aufgaben- und Rechteverwaltung
  • Barrierefreiheit gemäß BITV, EU-Richtlinie 2016/2102 und BGG

Informationen


 

Herausforderung

Einer der wichtigsten Funktion ist die Bereitstellung von Videoschnitt-Funktionen im Browser.

Etablierte Videoschnitt-Programme werden in der Regel direkt auf dem Rechner installiert, um so die zu Grunde liegende Hardware besser nutzen zu können. Außerdem haben sie direkten Zugriff auf das Dateisystem, was Lese- und Schreibzugriffe sehr stark beschleunigt. Alle diese Möglichkeiten gibt es bei einer Videoschnitt-Lösung im Browser nicht und genau hier liegt die Herausforderung.

Zusätzlich sollen Studierende gemeinsam ein Video schneiden und kommentieren können. Diese Kollaboration soll in Echtzeit und von mehreren Geräten gleichzeitig möglich sein und sich dabei performant und natürlich anfühlen. Die gesamte Oberfläche soll dabei barrierefrei genutzt werden können und sich mit der Tastatur bedienen lassen. Außerdem können mehrere Video und Audiospuren existieren, um z.B. eine barrierefreie Bearbeitung eine Videos durch die Bereitstellung von Audiodeskriptionen zu ermöglichen. 

Lösung

TODO Abgrenzung zur Lernmanagementumgebung Moodle noch nötig???

Die Plattform basiert auf dem PHP-Framework Symfony. Es werden statisch gerendert Seite ausgeliefert in die mit Hilfe von StimulusJS interaktive React-Komponenten eingebunden werden.

Für den Videoschnitt wird im Browser eine interaktive React-Komponente mit Timeline zur Verfügung gestellt. Hier können vorproduzierte Videos platziert und geschnitten werden. Die resultierenden Bausteine können verschoben und umsortiert werden. Während der Bearbeitung speichert die Anwendung die Position aller Bausteine bezogen auf das Originalvideo.

Das geschnittene Video kann so später als eine Aneinanderreihung von Sprüngen im Originalvideo abgespielt werden. Ein intelligenter Player zeigt den Vorschritt des Videos bezogen auf das geschnittene Video und nicht das Originalvideo. Durch dieses Verfahren ist der Videoschnitt im Browser performant. Nach dem Speichern wird auf dem Server ein neues Video mit FFmpeg erzeugt.

Für die Kollaboration und Bearbeitung einer Aufgabe in Echtzeit werden Informationen z.B. über Videobausteine und deren Position in der Timeline über den Server zwischen allen Beteiligten synchronisiert und die Oberfläche im Browser entsprechend aktualisiert. Dabei kann genau ein Studierender Änderungen vornehmen. Diese Rolle kann zwischen den Beteiligen gewechselt werden. Für die Synchronisation verwenden wir TODO Sockets/ Polling/ etc. ???, um ...

Als Grundlage für die Barrierefreiheit der Anwendung wurde ein Oberflächenkonzept entwickelt, das Tastaturbedienbarkeit von Anfang an berücksichtigt. Das Konzept und Zwischenstände der Umsetzung wurden von Studierenden und Dozierenden getestet und gemeinsam iterativ weiterentwickelt. Mit dem TODO XYZ Player kann sehr einfach zwischen unterschiedlichen Video und Audiospuren gewechselt werden. So können z.B. Audiodeskriptionen bereitgestellt werden. Die unterschiedlichen Spuren bleiben auch nach dem Schnitt erhalten und werden auf dem Server als HLS gespeichert.

Durch die enge Zusammenarbeit und das direkte Feedback konnten wir so eine Plattform entwickeln, die unabhängig von möglichen Beeinträchtigungen, von allen Studierenden und Dozierenden genutzt werden kann. 

Dieses Projekt hat uns gezeigt was echte Barrierefreiheit bedeutet und warum sie wichtig ist. TODO Satz was wir jetzt mit dem Wissen machen, ohne patetisch zu sein

Flo Notizen - löschen wenn fertsch ;

Aufgaben Videoschnitt im Browser

  • performant, natürlich anfühlen
  • Video wird nicht wirklich geschnitten -> Schnipsel gehack -> Datenstruktur
    • Datenstruktur die Schnipsel beschreibt -> Videokontext (BBC)
    • Originaldatei wird nicht angefasst
  • Speichernbutton
    • ffmpeg -> Video rendert tatsächliches Video
    • Videos mit mehreren Audiotracks
    • Untertitel für menschen die nichts höhren
    • Audiodiscreption für Leute nichts sehen
  • Abspielen von Video, Captions, Audiodiscription -> Video.js -> barrierefrei
    • Video.js kann Audiodiscription abspielen
      • wenn Audiodiscription dann HLS mit mehrer Streams, 3 Videostreams in unterschiedlichen Größen, 2 Audio
      • player entscheidet automatisch die Videospur
  • Integration in die bestehende Softwarelandschaft der TU-Dortmund -> SAML SSO Integration
  • Entwicklung einer Lernplattform von Grund auf
  • Barrierefreiheit für Nutzung durch Studierende und Dozierende, insbesondere mit Seh- und Gehörbeeinträchtigungen
    • in Kombination mit Barierefreiheit -> geht über einfache Annotation hinaus
    • UX Konzept mit Tastaturbedienbarkeit
    • UX für nicht sehende
  • Datenschutzrechtliche Aspekte
  • Colaboratives Arbeiten
    • Es gibt einen der was verändern darf
    • Liveübertragung beim Schnit und Annoation
      • Timeline scrollt
      • Videoschnipsel umsortieren
      • UI folgt Person die gerade annotiert
  •  
  • Abgrenzung zur Lernmanagementumgebung Moodle
    • kein Moodle -> schnellere Entwicklung -> mehr mit Integration mit Moodle beschäftigt
  • Datenmodell für Kurse, Aufgaben, Phasen, Rollen
    • Komplex -> wer darf wann was sehen
  • Aufgabenerstellung, Aufgabenlösung und Lösungsansichten
  • Symfony Backend, Mix aus Server-rendered Frontend und React-Anwendung
    • Stimulus
    • React Widgets für hohe Interaktivität
  • Video-Handling mit HLS, ffmpeg encoding
  • SSO-Integration in TU-Welt
  • Videoschnitt im Browser, Anotieren, Codieren mit Codes
  • viel gelernt zu Thema Barrierefreheit Kontakt mit der Zielgruppe
please choose
an image

 

Verwendete Technologien für die Videolernplattform