Is there a way to process images and videos in the website frontend?

Question

I am developing an application in Next.js and I need to be able to send images and videos to an API. These images and videos need to be compressed and they have to be in a specific format. I need to be able to process these medias in the frontend but I don't know if that is possible. I would like to know if there is a sharp package equivalent in the frontend and the same for videos. I thought about using WebAssembly but I don't know if that is the way to go.

I saw the solution that uses canvas but I don't like this option and that doesn't let me process videos.

score 0 · Answer 1 · answered Nov 17 '22 at 17:18

0

The most versatile video processing approach for front end, i.e. browser, is likely a ffmpeg based JavaScript implementation.

One of the leading implementations, which leverages Web Assemnply language is:

https://github.com/ffmpegwasm/ffmpeg.wasm

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

answered Nov 17 '22 at 17:18

Mick

24,231
1
54
120

And what about image processing? – Martí Serra Molina Nov 17 '22 at 19:46
@MartíSerraMolina - it depends on what you need to do but yes ffmpeg can process images - see for example: https://stackoverflow.com/q/28806816/334402 – Mick Nov 18 '22 at 09:12

Is there a way to process images and videos in the website frontend?

1 Answers1