HTML5 Canvas TO Video using ffmpeg

I recently got a task to work in canvas editor (with options to add text / image /video / background) which should generate the output as video.

My approach, is to convert the canvas into video by recording / capturing the canvas using MediaRecorder API. Problem is that when we add a video in canvas, the quality of this recording and the final output quality is less.

So i planned to use the ffmpeg(https://www.ffmpeg.org/) script to solve this quality issue, so input for the ffmpeg is toDataURL() image of the canvas and the video urls added in the canvas, so that video will be overlayed above the canvas image.

First issue in the approach is that it did not work for multiple videos and audio of first video only played in the final output, fine tuning the ffmpeg script solved these issues.

sample ffmpeg script which executed from php

$ffmpeg -loop 1 -i '$bgImage'  $videos -filter_complex '$scalefiter$overlayfiter$mapaudiofiter' -map '[a]' -pix_fmt yuv420p -vprofile baseline -vlevel 4.0 -strict experimental -b:v 4M -vcodec libx264 -r '$duration' -s ${w}x${h} '$videoOut'

Sample video output from Canvas
http://kpomservices.com/out198.mp4