HTML/JS Live video transformation (PIP)

user4QEo 0
Viewed 16

Is there a way to transform two videos live on the client side using JavaScript?

I have two videos and I want to create a simple picture in picture like overlay of one video on the other. For this, I'd need to scale one video down and place it on top of the other. I know that something like this is possible with ffmpeg but are there any options using JavaScript.

From my naive understanding, I simply could add two video players on the page and render one on top of the other using CSS. Is there a better way? Any librar recommendations?

video.js video-processing video javascript
1 Answers

If you just want to display the videos on the web page, then the approach you outlined, simply playing one on top of the other and sizing them as you want them sounds good.

If you wanted to save the resulting video to a file or move it somewhere then it is possible to run ffmpeg in the browser - see this project which is well supported and from experience works as expected:

You do need to be aware of the need for SharedArrayBuffer support:

Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list. The link referred to above is here: https://caniuse.com/sharedarraybuffer

userc1p10
Related