Disclaimer: non l'ho fatto da solo, quindi tutte le informazioni che sto fornendo sono solo ciò che ho trovato ricercando
In teoria, sì, è possibile ma non facile o pratico.
Panoramica
Quindi in pratica stai cercando di avere più o meno un codificatore video nel browser che può prendere le immagini che ottieni dalla tela e convertirle in video.
Ho avuto alcune preoccupazioni prima se fosse effettivamente possibile farlo, principalmente:
- C'è un limite alle dimensioni di BLOB? In base alla specifica Blob W3C , sembra che non ci sia.
- In che modo il browser gestirà la quantità di memoria richiesta per eseguire la codifica?
Nel tuo caso, la durata dell'animazione è abbastanza breve da non ritenere che la memoria sia un problema (almeno in termini di memorizzazione di immagini e video).
Otteniamo la codifica!
Ho detto che hai fondamentalmente un codificatore video. Ci sono davvero due opzioni per questo, o costruisci il tuo codificatore o speri che qualcuno abbia già costruito una sorta di codificatore.
Una risposta fantastica su GameDev (e più tardi trovato qualcosa di simile su StackOverflow ) spiega che FFmpeg può creare una presentazione video da immagini .
Per coloro che non lo sanno, FFmpeg è un progetto software gratuito che produce librerie e programmi per la gestione di dati multimediali
So cosa potresti pensare, come mi aiuterà FFmpeg, che non è JavaScript ... giusto?
Bene, prima di oggi avrei pensato la stessa cosa fino a quando ho trovato videoconverter.js che a quanto pare è una copia di lavoro di FFmpeg in JavaScript!
Qual è il trucco?
Bene, il file FFmpeg JS è di tipo pesa circa a ~ 6 MB gzip (o ~ 24 MB non compressi). L'ingombro della memoria del browser è destinato ad essere abbastanza grande!
Noterò che sto facendo alcune considerazioni importanti qui:
- Che FFmpeg JS può effettivamente leggere un blob di immagini in modo da poter creare la presentazione video
- Che FFmpeg JS supporti effettivamente tutte le stesse funzioni dell'applicazione FFmpeg standard
Oltre a FFmpeg, che cos'è un altro modo?
Puoi scegliere il formato del video che vuoi trasmettere e scrivere il tuo codificatore!
Per iniziare, puoi consultare le specifiche per AVI (Audio Video Interlaced) o forse Theora . Scriveresti le informazioni in un blob come hai fatto nel tuo esempio di download di testo.
Questa roba è davvero fuori dal mio set di abilità, quindi lascerò i dettagli migliori di questo a te.
Questo non è pratico! Questa è una montagna di sforzi per un piccolo video!
Ho detto fin dall'inizio che non sarebbe stato facile. Quello che @ShivanDragon ha menzionato nei commenti è il modo in cui personalmente lo farei. Passare le immagini su un server, ottenerle generate e quindi scaricate.
Ci sono alcuni motivi per cui potresti volerlo nel browser, ma in realtà non lo vedo come pratico.
Modifica: aspetta! Ho anche chiesto se il suono è possibile!
Whoops, ho perso quella parte! Sì, aggiungere il suono è sicuramente possibile, ma aggiungerà ancora più complessità al mix. Puoi aggiungere l'audio come un secondo file di input per FFmpeg che lo inserirà nel video di output.
In termini di creazione del proprio codificatore video, si aggiungerà una discreta quantità di sforzo extra per l'aggiunta di un flusso audio. Probabilmente il miglior punto di partenza è un altro paio di link alle specifiche per audio come Vorbis o WAV .