ffmpegbubbleno-codevideo-processingbucket-outcome

Add Video Processing to Your Bubble App

·Javid Jamae·6 min read
Add Video Processing to Your Bubble App

Bubble.io doesn't have native video processing. Your users upload a 500MB raw clip, and that's exactly what gets stored and served. You can't compress it, convert the format, or trim it down without reaching for something external.

> TL;DR: Use Bubble's API Connector plugin to send video URLs to FFmpeg Micro's REST API. Pick your settings, and get back a compressed, converted, or trimmed file. No server setup, no command line.

Why Bubble Can't Handle Video on Its Own

Bubble is built for app logic, not media processing. There's no built-in way to transcode a video from MOV to MP4, reduce a file from 200MB to 20MB, or clip the first 30 seconds of a recording. The few third-party Bubble plugins that attempt video work tend to cap file sizes, charge per minute, or give you zero control over output quality.

What you actually need is an API you can call from Bubble's existing HTTP tooling. That's where FFmpeg Micro fits.

FFmpeg Micro is a hosted REST API for video processing. You send it a video URL, specify what you want done, and it returns a processed file. No FFmpeg installation. No server management. Just HTTP requests that Bubble's API Connector can handle natively.

Setting Up FFmpeg Micro in Bubble with API Connector

The entire integration uses two API calls: one to start a processing job and one to check whether it's finished. Both go through Bubble's built-in API Connector plugin.

Step 1: Get Your FFmpeg Micro API Key

Create an account at ffmpeg-micro.com and copy your API key from the dashboard. A free tier is available, which gives you enough jobs to build and test everything.

Step 2: Configure API Connector

In your Bubble editor, go to Plugins and add "API Connector" if it isn't already installed. Create a new API with these settings:

  • API Name: FFmpeg Micro
  • Base URL: https://api.ffmpeg-micro.com
  • Shared headers:

Step 3: Create the "Start Transcode" Call

Add a new call inside your FFmpeg Micro API:

  • Name: Start Transcode
  • Method: POST
  • Path: /v1/transcodes
  • Body type: JSON

Use this as your body template:

{
  "inputs": [{"url": "<uploaded_video_url>"}],
  "outputFormat": "mp4",
  "preset": {"quality": "medium", "resolution": "720p"}
}

Mark <uploaded_video_url> as a dynamic parameter so Bubble can insert the real URL at runtime. Hit "Initialize call" with an actual video URL so Bubble can detect the response structure.

Step 4: Create the "Check Status" Call

Add a second call:

  • Name: Check Status
  • Method: GET
  • Path: /v1/transcodes/[id]

Mark [id] as dynamic. Initialize it with the job ID you got back from the Start Transcode response. The response includes a status field (queued, processing, completed, or failed) and an outputUrl field containing the download link once the job finishes.

Step 5: Build the Workflow

Wire it up in your Bubble workflow:

  1. User uploads a video through a File Uploader element
  2. A workflow triggers the "Start Transcode" call, passing the uploaded file's URL
  3. Store the returned job ID in a custom state or database field
  4. Use a recurring workflow or "Do every 5 seconds" action to call "Check Status" with that job ID
  5. When status equals "completed", save the outputUrl and display the processed video to the user

Five-second polling intervals work well for most jobs. Make sure you stop polling once the status comes back as "completed" or "failed."

Example API Bodies for Common Video Tasks

Compress a video to 720p:

{
  "inputs": [{"url": "<uploaded_video_url>"}],
  "outputFormat": "mp4",
  "preset": {"quality": "medium", "resolution": "720p"}
}

Convert to WebM for faster web playback:

{
  "inputs": [{"url": "<uploaded_video_url>"}],
  "outputFormat": "webm",
  "preset": {"quality": "medium"}
}

Trim to the first 30 seconds:

{
  "inputs": [{"url": "<uploaded_video_url>"}],
  "outputFormat": "mp4",
  "options": [
    {"option": "-t", "argument": "30"}
  ]
}

The options array also supports flags like -crf for fine-grained quality control, -vf for video filters, and -c:v for specifying a video codec.

Common Pitfalls

Bubble file URLs aren't always public. Bubble sometimes generates file URLs that require authentication or contain temporary tokens. FFmpeg Micro needs a publicly accessible URL. If your uploads aren't working, check that the URL you're passing can be opened in an incognito browser window.

Not handling failures. Always check for the "failed" status in your polling workflow. Without it, your app will poll forever on a broken job. Show the user an error and let them retry.

Missing Content-Type header. The API expects application/json. If you forget this shared header, every request returns a 400 error. Set it once at the API level and you won't have to think about it again.

Polling too fast. Checking every second burns through rate limits for no benefit. Stick with 5-second intervals.

Frequently Asked Questions

Can I process large video files from Bubble with FFmpeg Micro?

FFmpeg Micro accepts video files up to several gigabytes. The main constraint is Bubble's own upload size limit, which you can adjust in your app settings. For very large files, you can use FFmpeg Micro's presigned upload flow (POST to /v1/upload/presigned-url) instead of passing a Bubble file URL.

Do I need to install FFmpeg on a server to use this?

No. FFmpeg Micro is a fully hosted API. All processing runs on FFmpeg Micro's infrastructure. You don't install anything or manage any servers. Everything works through HTTP requests from Bubble's API Connector.

How long does processing take?

It depends on file size and the operation. Compressing a 100MB video typically finishes in 30 to 90 seconds. Format conversions and trims are usually faster. The polling workflow handles the wait without any extra logic.

What input and output formats are supported?

FFmpeg Micro accepts most common formats on input, including MP4, MOV, AVI, MKV, and WebM. Supported output formats are MP4, WebM, and MOV.

Is there a way to test without paying?

Yes. You can get a free API key at ffmpeg-micro.com that includes enough processing jobs to fully build and test your Bubble integration before committing to a paid plan.

About Javid Jamae

Founder & CEO at FFmpeg Micro

Javid is a software engineer, author, and entrepreneur with over 25 years of professional software development experience across enterprise, startup, and consulting environments. He founded FFmpeg Micro to make video processing accessible to developers through a simple, automation-first REST API.

Software EngineeringVideo ProcessingFFmpegCloud ArchitectureAPI DesignAutomation

Ready to process videos at scale?

Start using FFmpeg Micro's simple API today. No infrastructure required.

Get Started Free