In this episode, we tackle how to show real-time encoding progress to users as their videos are being processed. The goal is to provide visual feedback so users can see exactly how far along their video is, instead of leaving them guessing.
We start by heading into our video encoding job where the actual FFmpeg encoding happens. Here, we use an on progress
event handler to capture progress updates as a percentage. Every time FFmpeg reports a new percentage, we fire off a Laravel event called EncodeVideoProgress
. This event contains the video's ID and the current progress percentage.
To keep things speedy and real-time, we ensure this event is broadcast immediately rather than queued. On the client side (in our dashboard), we listen for the EncodeVideoProgress
event via web sockets. When we receive it, we update the specific upload's progress in state, which automatically updates the UI to reflect the latest encoding status.
We also tweak a bit of UI logic to ensure the encoding progress bar only shows when actual encoding is happening. To wrap up, we test the entire flow by uploading and encoding a small video. As encoding progresses, you can see the percentage smoothly update on the client side in real-time.
So with this, users now get instant progress feedback whenever their videos are being encoded! If you want to review, the key steps were: capture encoding progress in the backend, broadcast it instantly, and listen/display it on the frontend.