Tutorial: mit /video/merge Video-Slideshows entwickeln
Ein /video/merge-Tutorial
Kürzlich habe ich den Robot /video/merge
vorgestellt und dabei einen Beispiel-Anwendungsfall gezeigt, in dem
Video und Ton mithilfe des Parameters audio_delay zusammengeführt werden. Ich
habe mich nun entschieden, ein ausführlicheres Tutorial zu präsentieren, in dem derselbe
Robot mit einigen der anderen leistungsstarken Robots
von Transloadit kombiniert wird.
Diesmal behandeln wir einen weiteren besonderen Anwendungsfall – das Erstellen einer Video-Slideshow aus mehreren Bildern und deren Zusammenführung mit einer Audioaufnahme. Ich gehe jeden Schritt von Anfang bis Ende durch, bevor ich das Endergebnis präsentiere.
Unsere Dateien vorbereiten
Wie üblich müssen wir vor dem Erstellen unserer Assembly die nötigen Dateien vorbereiten. Als praktisches Beispiel verwandle ich Abschnitte eines PDF-Dokuments in eine zusammenhängende Slideshow. Konkret handelt es sich um eines der Machine-Learning-Cheatsheets, die von der Stanford University bereitgestellt werden. Ich möchte die Seiten des PDFs zu einem Video zusammenführen und dieses Video anschließend besprechen. Etwas Lehrreiches für mich selbst im Hinblick auf eine anstehende Aufgabe 😉
Anschließend speichern wir das Ergebnis in Dropbox, damit jederzeit darauf zugegriffen werden kann.
Ein Blick auf die Robots
Kommen wir zur Sache und werfen einen kurzen Blick auf alle Robots, die uns in dieser Assembly von Nutzen sein werden:
Die aufgenommene Audiodatei wird vom Robot /upload/handle importiert, die PDF-Datei hingegen vom Robot /http/import. Anschließend verwenden wir den Robot /document/thumbs, um aus unserer PDF-Datei Bilder zu erzeugen. Danach führt der Robot /video/merge alle Bilder zu einer einzigen Hauptvideodatei zusammen. Und schließlich lässt mich der Robot /dropbox/store, ein von mir häufig genutzter Favorit, das Endergebnis speichern!
Teil 1 - Unsere Dateien importieren
Hier ein Blick auf die ersten beiden Steps in dem von mir erstellten Template. Einer für den Upload und einer für den Import über HTTP:
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"document": {
"robot": "/http/import",
"url": "https://github.com/afshinea/stanford-cs-229-machine-learning/raw/master/en/cheatsheet-supervised-learning.pdf"
}
}
}
Zuerst brauchen wir meine aufgenommene Audiodatei. Ich verwende dafür den Robot /upload/handle, einen einfachen Robot, der es mir erleichtert, eine Datei programmatisch von meinem Rechner hochzuladen. Für einen tieferen Einblick in diesen Robot empfehle ich unseren aktuellen Re-loadit-Beitrag (English)!
Sobald wir die Audiodatei haben, können wir mit dem Robot /http/import direkt auf den oben erwähnten Link zum GitHub-Repository zugreifen. Der Robot holt die PDF-Datei von diesem Link und lässt uns in allen weiteren Steps der Assembly damit tun, was wir wollen.
Teil 2 - Bilder aus dem PDF erzeugen
Unser dritter Step in der Assembly nutzt nach dem Import unserer Dateien den Robot /document/thumbs. Dieser Step sieht in meinen Assembly Instructions so aus:
{
"thumbnail": {
"use": [
"document"
],
"robot": "/document/thumbs",
"result": true,
"resize_strategy": "fit"
}
}
Der Robot gibt nun mehrere Bilder für jede Seite aus. Ich habe den
Parameter result auf true gesetzt, damit ich auf der Seite
Assemblies prüfen kann, ob der Robot
die Bilder so aufgeteilt hat, wie ich es möchte. Für dieses Beispiel ist
resize_strategy auf 'fit' gesetzt, was bedeutet, dass unsere
Bilder ihr Seitenverhältnis behalten und anhand der längeren Bildseite in der Größe angepasst werden.
Teil 3 - Alles zusammenführen
Im vierten Step beginnt der Robot /video/merge eine wichtige Rolle zu spielen. Wir nehmen die Steps für die Thumbnails und die Aufnahme aus dem Template und übergeben sie dem Robot zum Zusammenführen.
{
"merged": {
"use": {
"steps": [
{
"name": ":original",
"as": "audio"
},
{
"name": "thumbnail",
"as": "image"
}
],
"bundle_steps": true
},
"robot": "/video/merge",
"result": true,
"duration": 40,
"ffmpeg_stack": "v7",
"framerate": "1/10",
"preset": "webm-1080p",
"resize_strategy": "fit"
}
}
Für den Zusammenführungsprozess werden zwei Steps verwendet:
meine Audiodatei, bekannt als :original aus Teil 1, und die aus meiner PDF-Datei
erzeugten Bilder - thumbnail aus Teil 2. Das von mir verwendete PDF hat
insgesamt vier Seiten, und es wäre sinnvoll, jedes Bild mindestens zehn Sekunden lang anzuzeigen -
es steht einiges an Inhalt darauf.
Deshalb habe ich den Parameter duration auf 40 Sekunden und
framerate auf 1/10 gesetzt, sodass alle zehn Sekunden ein neues Bild angezeigt
wird. WebM ist ein praktisches Format, das ich wegen seiner im Vergleich zu MP4 geringeren Größe
empfehle, also legen wir es hier über den Parameter preset fest. Damit
sollten unser Audio und unsere Bilder erfolgreich zu einem schönen Video zusammengeführt werden.
Teil 4 - Das Endergebnis
Der fünfte und letzte Step in meiner Assembly
exportiert schließlich die Ergebnisse nach Dropbox. Der Step exported verwendet
den Step merged, damit er weiß, welche Datei wir exportieren wollen. Meine
Template-Zugangsdaten geben mir über meine
Assembly Zugriff auf mein Dropbox-Konto; anschließend legt der
Parameter path den Namen meines fertigen Videos und den Speicherort fest.
Hier liefert uns ${file.id} eine eindeutige, 32 Zeichen lange ID, sodass es beim
Export meiner Ergebnisse zu keinen Konflikten kommen kann.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"document": {
"robot": "/http/import",
"url": "https://github.com/afshinea/stanford-cs-229-machine-learning/raw/master/en/cheatsheet-supervised-learning.pdf"
},
"thumbnail": {
"use": [
"document"
],
"robot": "/document/thumbs",
"result": true,
"resize_strategy": "fit"
},
"merged": {
"use": {
"steps": [
{
"name": ":original",
"as": "audio"
},
{
"name": "thumbnail",
"as": "image"
}
],
"bundle_steps": true
},
"robot": "/video/merge",
"result": true,
"duration": 40,
"ffmpeg_stack": "v7",
"framerate": "1/10",
"preset": "webm-1080p",
"resize_strategy": "fit"
},
"exported": {
"use": [
"merged"
],
"robot": "/dropbox/store",
"credentials": "my_videos",
"path": "Videos/${file.id}.${file.ext}"
}
}
}
Die aus diesem Template erzeugte Videodatei ist unten zu sehen.
Schauen wir zurück auf alles, was diese Assembly leistet. Ich lade eine Audiodatei hoch und hole ein PDF. Die PDF-Datei wird für jede Seite in einzelne Bilder aufgeteilt. Die Bilder und das Audio werden zu einem WebM-Video mit festgelegter Dauer und Bildrate zusammengeführt. Ziemlich komplexe Szenarien, und das alles in wenigen Zeilen!
Werfen Sie selbst einen Blick in die Dokumentation zum Robot /video/merge und werden Sie kreativ, indem Sie ihn mit der großen Auswahl an weiteren Funktionen kombinieren, die hier bei Transloadit verfügbar sind.