Recently, I have worked for an Upwork client to export WebM and MP4 video from their HTML5 Canvas Animation based react.js web application in browser (runtime) and also fix the blur and black-white issue on that.
And they used Konva.js canvas library for the application.
I have used so many available libraries (canvas-record.js, CCapture.js, record-canvas.js, ffmpeg.wasm etc. ) to make the solution, but every time there were issues like very long processing timing, freezing the application and so many.
But finally I reverted back to ffmpeg.wasm and used its multi-thread options. But to use multi-thread, I had to enable JavaScript SharedArrayBuffer api by setting ‘Cross-Origin-Embedder-Policy': 'require-corp', 'Cross-Origin-Opener-Policy': 'same-origin’ in server header request.
After that it worked on localhost without https and to make it live - I also needed to host the site on “https” enabled server. Otherwise ffmpeg.wasm multi-thread won’t work.
And finally I successfully reduced the runtime processing timing on browser. It exports instantly for WebM video and for a 20 second animation, it took around 1-1.5 minutes ( it might very based on other settings and user’s device ).
In this way, I saved the server request and video quality is also good and small in sizes.
Youtube Demo: https://youtu.be/9vCNP5aQGlY
My Upwork Profile: https://www.upwork.com/freelancers/~0166c25fe6338aa8c3
#upwork #html5canvas #React #ffmpeg #konva.js #freelancing
Top comments (0)