Hi everyone,
I'm trying to use FFmpeg (ffmpeg.wasm) for video compression, I encounter issues related to loading FFmpeg resources and Web Workers. My idea is to compress video file in client side before uploading to S3.One of the errors I receive is: "SecurityError: Failed to construct 'Worker': Script at 'https://cdn.jsdelivr.net/...' cannot be accessed from origin 'https://.outsystems.app'."
Could you provide guidance on:
Any recommendations or known limitations of FFmpeg in OutSystems ODC would also be appreciated.
Hi @Alexander Ng ,
I managed to get a similar use case working in ODC, but not by using the standard @ffmpeg/ffmpeg wrapper directly.
The main issue I hit was related to loading the FFmpeg worker/core files in the ODC browser context. The ffmpeg.js wrapper was failing when trying to import ffmpeg-core.js, even though the files were reachable. In the end, the working approach was to bypass the wrapper and use a custom Web Worker that loads only:
One important detail: since the compression runs asynchronously, the JavaScript node must use $resolve() after the compression is finished. Otherwise, the OutSystems flow continues too early and the output parameters/local variables are still empty.
My implementation outputs MP4 using libx264 + aac. Other formats are theoretically possible, but only if the FFmpeg core build supports the required codecs/container. For browser compatibility, MP4 is probably the safest choice.
Performance-wise, it works, but it is slow compared to native/server-side FFmpeg. I would only use this for small/medium files or as a pre-upload optimization. For larger videos, uploading to S3 first and compressing server-side would still be the more reliable option.
__________
For testing, I recommend starting with a very small video, for example 3–5 seconds, 480p/720p, under 5 MB, with settings like:
video bitrate: 500kaudio bitrate: 48kfps: 15max width: 480
Also worth noting: returning the compressed file as Base64 works for a PoC, but for production it would be better to upload the compressed Blob directly to S3 using a pre-signed URL and only return the S3 key/metadata to OutSystems.
I created a library and submitted it for approval on Forge.
Until it gets approved, you can download both my demo sample and the library. However, please note that the library does not include the required FFmpeg resources, because adding them would exceed the maximum upload file size allowed.
You can download the resources I used from here:
After downloading them, add both files to the module’s Resources folder. Keep the original file names and make sure Deploy Action is set to Deploy to Target Directory.
Download link for the library(For whatever reason it doesn't work to upload here even without the resources included) : https://we.tl/t-krAVq0CSEon9MJhZ
@Alexander Ng ,
The library has been approved, you can download it from here: FFmpeg Media Compressor - Documentation (ODC) | OutSystems . You can use it in combination with the Demo.
Hi, thank you for your effort but when I tried to download and use your forge. It returned this error.
Did you use the demo I made? If you didn't, make sure you add the LoadFFMPEGScript block to the screen/block where compression is needed.
Hi, I did add the LoadFFMPEGScript block into the screen that I'm using for compress video.
Are you using this in your personal environment or a company environment? It might be restricted.
And you also mentioned you already tried implementing the files, make sure you don't have files/scripts in your app, those might in conflict with the ones from the library.
Yes I added some files in the Resources so it was conflict with your scripts. After removing, it's working successfully. Thank you so much. Another thing is it taking some times to compress the file. Are there anyway to reduce the compress time?
That’s expected to some extent, since the component runs FFmpeg directly in the user’s browser. Because of that, the compression time can vary depending on the user’s device, browser, original file size, video resolution, FPS, and the compression settings being used.
To improve the compression time, you can try reducing the output resolution, as this usually has the biggest impact. Lowering the FPS can also help, especially if a high frame rate is not required.
For very large videos, browser-based compression will naturally have some limitations compared to server-side processing, but for small or medium files it should work well with the right settings.
Hi Mihai,
I tried your Forge but it doesn't seem to work, as the output is always 0 byte.
Is there any configuration that I missed?
Hi,
I think I found the issue.
The configuration on the screen is correct, but you pass the bitrate values to FFmpeg as plain numbers.
So 500 was being sent as 500 bits/s, not 500 kbps, and 64 was being sent as 64 bits/s, not 64 kbps.
Append k to the bitrate values before passing them to FFmpeg. (500 > 500k / 64 > 64k)
Thanks Mihai, I got it working. Great component!
Hi @Mihai Melencu , I think you can enhance your forge by adding the thumbnail as output. Can help to add-in ? Thank you so much.
Will try and see if I can do it, will keep you updated.
Yes you can. But you can't import js by cdn url like that.You need to download the js library, and import it into the Scripts folder of Outsystems.
Hi @Kiet Phan thank you for you feedback. Actually I did downloaded and imported it in Resource then reference to it. But still got same issue. It will be really helpful if you can provide a same oml then I can follow. Thank you so much.
Yes, FFmpeg.wasm can work in OutSystems ODC, but you should self-host the FFmpeg core, worker, and WASM files instead of loading them from a CDN. The Worker error happens because ODC blocks cross-origin worker loading. Upload the FFmpeg assets as app resources or host them under the same domain, and allow worker-src 'self' blob: in CSP. You can then compress videos client-side using commands like -r 30 -b:v 1000k before uploading to S3. However, ffmpeg.wasm is heavy and may perform poorly for large videos, so server-side compression is often a better production approach.
hi @Lokesh Kumar Yadav , thank you for your feedback. I did try to self-host in ODC (FFMPEG ver 0.11.0 and ver 0.16.0) but still got FFMpeg undefined issue. it will be very helpful if you can share demo oml. So I can follow. Thank you so much.