Estoy tratando de configurar la conversión de animación de lienzo a video con FFMPEG.wasm. La idea es generar un montón de imágenes con canvas.toDataURL() y luego enviarlas a un servidor Node para generar un video. Todo funciona perfectamente con las imágenes precargadas que extraigo del directorio público para realizar pruebas; sin embargo, cuando intento enviar un montón (o una sola) de imágenes creadas con canvas.toDataURL() el siguiente error:
RuntimeError: abort(Error: ENAMETOOLONG: name too long, open 'data:image/png;base64, ... Traté de reemplazar canvas.toDataURL() con canvas.getContext('2d').getImageData() , sin embargo, esto tampoco ayudó. A continuación se muestra un código de corte que estoy usando:
frente:
async function fetchData() { const response = await fetch('/api/record-canvas', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: here_goes_the_canvas_data }), }); }back-end:
await ffmpeg.load(); ffmpeg.FS('writeFile', `001.png`, await fetchFile(image)); await ffmpeg.run('-loop', '1', '-i', '001.png', '-c:v', 'libx264', '-t', '30', '-pix_fmt', 'yuv420p', 'out.mp4'); await fs.promises.writeFile('out.mp4', ffmpeg.FS('readFile', 'out.mp4'));El código anterior está simplificado para hacer un video de una sola imagen repitiéndola durante 30 segundos. Una vez más, funciona muy bien con la imagen precargada, pero no con los datos del lienzo.
Para aquellos que se encontraron con el mismo problema, esta es la solución que se me ocurrió:
dataURL debe ser jpeg (por ejemplo, canvas.toDataURL('image/jpeg') ).
Debe transformarlo en un valor de búfer (por ejemplo Buffer.from(image.split(',')[1], 'base64') antes de pasar a la función fetchFile de FFMPEG.
Las respuestas son largas y difíciles de entender.