Estoy buscando usar ffmpeg o ffmpeg.wasm dentro de un SPA sin servidor Vue que en este momento usa GIF.js. La aplicación crea HTMLCanvasElement dinámicamente y los agrega como marcos al objeto GIF que luego está disponible para su descarga y, en el caso de ffmpeg , tiene la opción de transcodificarlo a otro formato, por ejemplo, .gif . Idealmente, quiero hacer lo mismo con ffmpeg . Mi pregunta es más sobre cómo integrar ffmpeg en mi contexto y cómo reemplazar mi gif.addFrame(composedCnv, { delay: delayInput }); con una await ffmpeg.run( ... ); ¿dominio?

 async createGIFHandler ( layer , addAllTitles , quality , delay , range ) { ... var tempGIF = new GIF({ workers: 4, quality: quality, height: this.mapHeight + this.infoCanvas.height, width: this.mapWidth, workerScript: 'gif.worker.js' }); let progressCounter = 1; for ( let i = range[0] ; i < range[1] ; i++, progressCounter++ ) { this.setDateTime( driver , driverDA[i] ); for ( let j = 0 ; j < visibleLayers.length ; j++ ) { if ( visibleLayers[j].get('layerName') !== layer.Name ) { var tempDA = visibleLayers[j].get('layerDateArray'); for ( let k = 0 ; k < tempDA.length ; k++ ) { if ( driverDA[i].getTime() === tempDA[k].getTime() ) { this.setDateTime( visibleLayers[j] , tempDA[k] ); } } } } await new Promise(resolve => this.map.once('rendercomplete', resolve)); await this.composeCanvas( tempGIF , driverDA[i] , visibleLayers , delay , widths ) this.$store.dispatch('Layers/setGIFPercent', Math.round(((progressCounter / gifLength) * 100))) } tempGIF.on('finished', (blob) => { const tempURL = URL.createObjectURL( blob ) this.$store.dispatch( 'Layers/setGIFURL' , tempURL ) console.log('GIF Finished'); }); tempGIF.render(); }, async composeCanvas( gif , timeStep , visibleLayers , delayInput , widths ) { const mapCnv = this.getMapCanvas(); await this.updateInfoCanvas( timeStep , widths ) const composedCnv = await this.stitchCanvases( mapCnv , visibleLayers.length ); await new Promise((resolve) => { gif.addFrame(composedCnv, { delay: delayInput }); resolve(); }) },