Neue App: Videoanalyse-App #204

schilchris commented 2023年07月20日 06:49:56 +02:00

• schnelle manuelle Analyse von Bewegungen (automatisch wird wohl schwierig sein)
• Stroboskopbilder erstellen
• Mehrere Objekte in einem Video gleichzeitig erfassen
• Diagramme erstellen (auch mit Polarkoordinaten) und z. B. mit Ausgleichsgerade auswerten
• auch Geschwindigkeitsverlauf darstellen

- schnelle manuelle Analyse von Bewegungen (automatisch wird wohl schwierig sein) - Stroboskopbilder erstellen - Mehrere Objekte in einem Video gleichzeitig erfassen - Diagramme erstellen (auch mit Polarkoordinaten) und z. B. mit Ausgleichsgerade auswerten - auch Geschwindigkeitsverlauf darstellen

tk100 commented 2023年07月20日 07:21:13 +02:00

Schritt 1: Ich werde mich mal in die Grundlagen einarbeiten und prüfen, ob im Browser Videos hochgeladen und Frame für Frame angezeigt werden können. Wenn das klappt, kann ich einen ersten Prototyp für den ersten Punkt "schnelle manuelle Analyse von Bewegungen (automatisch wird wohl schwierig sein)" erstellen.

Schritt 1: Ich werde mich mal in die Grundlagen einarbeiten und prüfen, ob im Browser Videos hochgeladen und Frame für Frame angezeigt werden können. Wenn das klappt, kann ich einen ersten Prototyp für den ersten Punkt "schnelle manuelle Analyse von Bewegungen (automatisch wird wohl schwierig sein)" erstellen.

PW commented 2023年07月20日 08:24:25 +02:00

Darf ich zu zwei Bibliotheken raten? Bei beiden bin ich mir nicht 100% sicher, ob sie die Anforderungen abdecken.

Bibliothek 1: OpenCV.js ist die mächtigere Bib von beiden und der Klassiker (ursprünglich aus der C/C++ Welt) und ich denke auch mittlerweile sehr erprobt. Damit könnte man Objekterfassung und Stroboskopbilder erstellen

Bibliothek 2: MediaPipe ist die neuere Bib von beiden und potentiell auch besser zum Analysieren von Bewegungen (sie wurde auch vor ca. 2 Jahren ziemlich gehypt). Anwendungsgebiet hier: Analyse von Bewegungen

Darf ich zu zwei Bibliotheken raten? Bei beiden bin ich mir nicht 100% sicher, ob sie die Anforderungen abdecken. Bibliothek 1: OpenCV.js ist die mächtigere Bib von beiden und der Klassiker (ursprünglich aus der C/C++ Welt) und ich denke auch mittlerweile sehr erprobt. Damit könnte man Objekterfassung und Stroboskopbilder erstellen Bibliothek 2: MediaPipe ist die neuere Bib von beiden und potentiell auch besser zum Analysieren von Bewegungen (sie wurde auch vor ca. 2 Jahren ziemlich gehypt). Anwendungsgebiet hier: Analyse von Bewegungen

tk100 commented 2023年07月29日 12:30:25 +02:00

Ich habe erste Tests durchgeführt, grundsätzlich ist es möglich Videos im Browser hochzuladen und Frame für Frame abzuspielen (allerdings mit einigen Tricks und nicht 100% zuverlässig).

Um eine vollständige Videoanalyse eines Bewegungsvorgangs durchzuführen, sind aus meiner Sicht folgende Schritte nötig:

1. Video im Browser auswählen und "hochladen" und Framerate angeben (es landet ja nicht auf einem Server sondern nur im Browser)
2. Zeitnullpunkt (t=0) wählen (indem das Video an die richtige Stelle vorgespult wird)
3. Koordinatenursprung (x=0, y=0) wählen (indem ein Punkt im Video für t=0 markiert wird)
4. Achsen definieren (indem zwei Richtungen, ausgehend vom Koordinatenursprung definiert werden)
5. Maßstab setzen (indem eine beliebige Strecke mit zwei Punkten festgelegt und die echte Länge eingegeben wird)
6. Bewegung nachverfolgen (indem Frame für Frame, beginnend mit t=0 ein Punkt gesetzt wird)
7. Auswertung (Diagramme x-y, t-x, t-y, t-vx, t-vy, letztere durch numerische Ableitung)

Ich habe aktuell leider noch keine Idee, wie ich diese Abfolge in der Oberfläche gut nachvollziehbar umsetzen kann. Dabei müssten wir beachten:

• Von einem Punkt soll es mittels einer "Weiter" Funktion möglich sein, zum nächsten zu springen (z.B. von 4 auf 5)
• Außerdem soll es stets möglich sein von einem Punkt zu einem beliebigen bereits erledigten zurück zuspringen (z.B. von 6 auf 3)
• Das ganze muss irgendwie in das Kartenlayout der MintApps passen
• Die Verwendung sollte auch am Handy möglich sein (wo alle Karten untereinander liegen)

Habt ihr dazu Ideen?

Ich habe erste Tests durchgeführt, grundsätzlich ist es möglich Videos im Browser hochzuladen und Frame für Frame abzuspielen (allerdings mit einigen Tricks und nicht 100% zuverlässig). Um eine vollständige Videoanalyse eines Bewegungsvorgangs durchzuführen, sind aus meiner Sicht folgende Schritte nötig: 1. Video im Browser auswählen und "hochladen" und Framerate angeben (es landet ja nicht auf einem Server sondern nur im Browser) 2. Zeitnullpunkt (t=0) wählen (indem das Video an die richtige Stelle vorgespult wird) 3. Koordinatenursprung (x=0, y=0) wählen (indem ein Punkt im Video für t=0 markiert wird) 4. Achsen definieren (indem zwei Richtungen, ausgehend vom Koordinatenursprung definiert werden) 5. Maßstab setzen (indem eine beliebige Strecke mit zwei Punkten festgelegt und die echte Länge eingegeben wird) 6. Bewegung nachverfolgen (indem Frame für Frame, beginnend mit t=0 ein Punkt gesetzt wird) 7. Auswertung (Diagramme x-y, t-x, t-y, t-vx, t-vy, letztere durch numerische Ableitung) Ich habe aktuell leider noch keine Idee, wie ich diese Abfolge in der Oberfläche gut nachvollziehbar umsetzen kann. Dabei müssten wir beachten: - Von einem Punkt soll es mittels einer "Weiter" Funktion möglich sein, zum nächsten zu springen (z.B. von 4 auf 5) - Außerdem soll es stets möglich sein von einem Punkt zu einem beliebigen bereits erledigten zurück zuspringen (z.B. von 6 auf 3) - Das ganze muss irgendwie in das Kartenlayout der MintApps passen - Die Verwendung sollte auch am Handy möglich sein (wo alle Karten untereinander liegen) Habt ihr dazu Ideen?

HGU commented 2023年07月29日 16:30:07 +02:00

Zum Verständnis: der Framerate entspricht der Stroboskopeffekt?
Wäre es dann nicht wichtig, zuerst den Zeitnullpunkt zu wählen und dann über die Framerate die folgenden Bilder?

Mein inneres Bild: Es braucht 3 Karten mit Videobilder(n) und zu jeder dieser Karte auch einige Einstellungen.

1. Karte: Einrichten des Startes Zeitnullpunkt und
   ein Kalibrieren von Koordinatenursprung, der Achsen
   (soll es dabei auch möglich sein, die Achsen nicht orthogonal zu wählen?)
   Vermutlich ist es von den Controls einfacher, Winkel zu nehmen in Bezug auf die Ausrichtung des Videos
   Maßstab soll in x und y Richtung gleich sein oder gewählt werden können?
   Denkbarer Controls echte Länge entspricht xx Pixels

Ebenso kann auf dieser Ebene festgelegt werden, wieviele Objekte beobachtet werden.
Können / sollen es mehr als ein Objekt sein?
Der zweidimensionale Stoß macht es ja mit 2en vor...

2. Karte dient dazu, die Bewegung nachzuverfolgen
   D.h. es wird das nächste ,,Stroboskopbild'' gezeigt und die Objekte sind zu identifizieren (Frage: Sollen dann auch schon die Koordinatenachsen eingeblendet sein? Oder wird dadurch das Bild unübersichtlicher?)
   Vermutlich wird dafür ja auch die Zoomfunktion nutzbar sein.
   D.h. dieses Fenster bietet dann die Möglichkeit, pro gezeigtem Frame (=Stroboskopbild) genau x Punkte zu markieren, x=Anzahl Objekte

3. Karte bietet die Auswertungsfunktionen an,
   d.h. es ist dort möglich Schritt(e) vor und zurück zu springen und auch eine Zeit gezielt anzuzeigen und sich weitere Diagramme zeigen zu lassen

Zum Verständnis: der Framerate entspricht der Stroboskopeffekt? Wäre es dann nicht wichtig, zuerst den Zeitnullpunkt zu wählen und dann über die Framerate die folgenden Bilder? Mein inneres Bild: Es braucht 3 Karten mit Videobilder(n) und zu jeder dieser Karte auch einige Einstellungen. 1. Karte: Einrichten des Startes Zeitnullpunkt und ein Kalibrieren von Koordinatenursprung, der Achsen (soll es dabei auch möglich sein, die Achsen nicht orthogonal zu wählen?) Vermutlich ist es von den Controls einfacher, Winkel zu nehmen in Bezug auf die Ausrichtung des Videos Maßstab soll in x und y Richtung gleich sein oder gewählt werden können? Denkbarer Controls echte Länge entspricht xx Pixels Ebenso kann auf dieser Ebene festgelegt werden, wieviele Objekte beobachtet werden. Können / sollen es mehr als ein Objekt sein? Der zweidimensionale Stoß macht es ja mit 2en vor... 2. Karte dient dazu, die Bewegung nachzuverfolgen D.h. es wird das nächste ,,Stroboskopbild'' gezeigt und die Objekte sind zu identifizieren (Frage: Sollen dann auch schon die Koordinatenachsen eingeblendet sein? Oder wird dadurch das Bild unübersichtlicher?) Vermutlich wird dafür ja auch die Zoomfunktion nutzbar sein. D.h. dieses Fenster bietet dann die Möglichkeit, pro gezeigtem Frame (=Stroboskopbild) genau x Punkte zu markieren, x=Anzahl Objekte 3. Karte bietet die Auswertungsfunktionen an, d.h. es ist dort möglich Schritt(e) vor und zurück zu springen und auch eine Zeit gezielt anzuzeigen und sich weitere Diagramme zeigen zu lassen

tk100 commented 2023年07月30日 18:09:38 +02:00

• Die Framerate bezeichnet hier tatsächlich die Bilder pro Sekunde, die der Film enthält. Ein typischer Wert ist 30/s. Leider bietet die API im Browser keine Möglichkeit, diesen Wert auszulesen, daher muss der Anwender ihn angeben.
• Gute Idee, es sollten auch nicht orthogonale Achsen unterstützt werden, da die Kamera nicht immer exakt gerade gehalten werden kann!
• Ich würde zunächst nur mit einem Maßstab und einem Objekt beginnen, eine Erweiterung könnten wir später andenken.
• Danke für die Idee zu den Karten, evtl. könnte ich die 1. und 2. zusammenfassen da beide das Video-Bild nutzen
• Optional könnte ich auch eine "Kochrezept"-Karte anzeigen, auf der alle Schritte aufgelistet sind und ein Marker den Fortschritt markiert?

- Die Framerate bezeichnet hier tatsächlich die Bilder pro Sekunde, die der Film enthält. Ein typischer Wert ist 30/s. Leider bietet die API im Browser keine Möglichkeit, diesen Wert auszulesen, daher muss der Anwender ihn angeben. - Gute Idee, es sollten auch nicht orthogonale Achsen unterstützt werden, da die Kamera nicht immer exakt gerade gehalten werden kann! - Ich würde zunächst nur mit einem Maßstab und einem Objekt beginnen, eine Erweiterung könnten wir später andenken. - Danke für die Idee zu den Karten, evtl. könnte ich die 1. und 2. zusammenfassen da beide das Video-Bild nutzen - Optional könnte ich auch eine "Kochrezept"-Karte anzeigen, auf der alle Schritte aufgelistet sind und ein Marker den Fortschritt markiert?

tk100 commented 2023年08月01日 16:07:18 +02:00

Die erste Version kann unter https://kippenbergs.de/mint-video-analysis getestet werden. Das größte Problem ist, dass die Browser jeweils nur verschiedene Videoformate unterstützen.

Die erste Version kann unter https://kippenbergs.de/mint-video-analysis getestet werden. Das größte Problem ist, dass die Browser jeweils nur verschiedene Videoformate unterstützen.

tk100 commented 2023年08月08日 09:38:15 +02:00

Nun gibt es eine zweite Version:

• Integrierter Video-Rekorder
• Info-Text
• Automatische Frame-Erkennung
• Zweite Ableitung
• Kurvenanpassung mit Konstante

Kurzer Hintergrund zu Frames und Framerate: Leider ist der Abstand von Bildern im Film nicht wirklich konstant. So kam es bei der manuellen Festsetzung der Framerate oft dazu, dass einzelne Frames fehlten oder doppelt erkannt wurden. Daher durchsucht nun die App in Schritt 2 automatisch das gesamte Video. Das ist leider sehr zeitaufwändig - aber es geht nicht anders.

Nun gibt es eine zweite Version: - Integrierter Video-Rekorder - Info-Text - Automatische Frame-Erkennung - Zweite Ableitung - Kurvenanpassung mit Konstante Kurzer Hintergrund zu Frames und Framerate: Leider ist der Abstand von Bildern im Film nicht wirklich konstant. So kam es bei der manuellen Festsetzung der Framerate oft dazu, dass einzelne Frames fehlten oder doppelt erkannt wurden. Daher durchsucht nun die App in Schritt 2 automatisch das gesamte Video. Das ist leider **sehr** zeitaufwändig - aber es geht nicht anders.

tk100 commented 2023年08月09日 11:33:26 +02:00

Dritte Version:

• Bessere Fehler-Erkennung (Danke an @HGU), leider wird es dank der unvollständigen Browser-Unterstützung aber niemals zu 100% richtig funktionieren :-(
• Ausführlichere Anleitung
• Einstellung der Framerate in der integrierten Kamera (man kann z.B. am iPad jetzt auch mit 10 fps aufnehmen)

Idee:
@MiSp88 oder @schilchris : Wäre es evtl. sinnvoll, eine Reihe von Muster-Filmen anzubieten, die zur Auswertung bereit stehen? Falls ja, könntet Ihr euch vorstellen, diese zu erstellen (Container Format mp4 und Code H264, sonst läufts im Safari nicht)?

Dritte Version: - Bessere Fehler-Erkennung (Danke an @HGU), leider wird es dank der unvollständigen Browser-Unterstützung aber niemals zu 100% richtig funktionieren :-( - Ausführlichere Anleitung - Einstellung der Framerate in der integrierten Kamera (man kann z.B. am iPad jetzt auch mit 10 fps aufnehmen) Idee: @MiSp88 oder @schilchris : Wäre es evtl. sinnvoll, eine Reihe von Muster-Filmen anzubieten, die zur Auswertung bereit stehen? Falls ja, könntet Ihr euch vorstellen, diese zu erstellen (Container Format mp4 und Code H264, sonst läufts im Safari nicht)?

tk100 commented 2023年09月25日 13:52:36 +02:00

Aktuell gibt es einen kleinen Bug: Die Infotexte zu den einzelnen Schritten fehlen

Aktuell gibt es einen kleinen Bug: Die Infotexte zu den einzelnen Schritten fehlen

tk100 commented 2023年09月25日 19:03:21 +02:00

Infotexte wieder verfügbar: d51a87f9a9

Infotexte wieder verfügbar: https://codeberg.org/MintApps/client/commit/d51a87f9a903e5481dc3559cfcee7bf0ba74b266

tk100 commented 2023年10月03日 19:48:12 +02:00

Ich habe die letzten beiden Wochen einige Tests mit interessierten Schüler:innen durchgeführt. Daraus sind folgende Ideen entstanden:

1. Es sollte möglich sein, auch nur eindimensionale Bewegungen auszuwerten. Anfangs ist die Version mit zwei Dimensionen relativ komplex
2. Schöne wäre einige Beispielvideos zu ausgewählten Bewegungsvorgängen, die exemplarisch ausgewertet werden können.

Ich habe die letzten beiden Wochen einige Tests mit interessierten Schüler:innen durchgeführt. Daraus sind folgende Ideen entstanden: 1. Es sollte möglich sein, auch nur eindimensionale Bewegungen auszuwerten. Anfangs ist die Version mit zwei Dimensionen relativ komplex 2. Schöne wäre einige Beispielvideos zu ausgewählten Bewegungsvorgängen, die exemplarisch ausgewertet werden können.

tk100 commented 2023年10月22日 11:47:17 +02:00

Es gibt nur bereits einige Beispiel-Videos

• MintApps/data@61abd87b87
• 7cd339dc76

Es gibt nur bereits einige Beispiel-Videos - https://codeberg.org/MintApps/data/commit/61abd87b8766a72e991fe498e2b5cafb31f8b9de - https://codeberg.org/MintApps/client/commit/7cd339dc7684e38fe9fecd11c289a10f50d7948b

tk100 commented 2023年10月25日 15:14:24 +02:00

abgeschlossen mit e8de0e2029

abgeschlossen mit https://codeberg.org/MintApps/client/commit/e8de0e2029eb3dec13b117c64343bc997228c0c8