Multiple Drag And Drop File Uploading and Processing with Inertia
This episode is for members only

Sign up to access "Multiple Drag And Drop File Uploading and Processing with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
16. Broadcasting the encoding progress

Episodes

0%
Your progress
  • Total: 1h 56m
  • Played: 0m
  • Remaining: 1h 56m
Join or sign in to track your progress

Transcript

00:00
Okay, so what we really need to do now is figure out how to get the progress of our encoding and then just broadcast this to the client. So let's first of all look at how we grab the process and then the rest of this we've pretty much already done.
00:12
So we're going to head over to our encode video job and if we come down to the actual FFmpeg encoding, what we can do in here is just before we save this, we can use an on progress event handler in here to as you'd imagine grab the process.
00:28
So we have a closure in here which gives us the percentage as that progresses and then in here we can just broadcast that. So let's create an event to broadcast the encode video progress. So I'm just going to cancel off the worker here and we'll go ahead and make out an event
00:46
and let's call this encode video progress and let's go ahead and just immediately fire this event off in here. So encode video progress. Now what do we need to pass through to here?
01:01
Well we need to pass through the video itself so we know what we're targeting and then we need the percentage that comes from this closure and that's pretty much all we need. So over in encode video progress again we're going to implement should broadcast now
01:18
because we don't want this event to be put onto our queue. If we just double check our encode video start that should also be now as well. And let's go ahead and just accept in what we need in here. So we've got our video and then this comes through I think as a string.
01:34
So let's just go ahead and add in the percentage in here and again we'll make that public and let's put in our video here and then again what we can do is just from the encode video start take broadcast with put this directly into here. We want the video id but we also want the percentage as well.
01:58
So we'll pass that through with the object that we'll get on the client side. Okay so now down here the private channel is going to be exactly the same as what we already have. So let's just grab this paste this in here and we should be done. So now within this job which is being run in our queue so it's being run asynchronously
02:18
we're now firing an event off every time this percentage changes. So let's go over to our dashboard where we are listening for our events and we'll just listen in here to a new event. So that event is encode video progress and again we will get the payload in here
02:39
and we can pretty much do exactly the same thing. So let's just grab all of this code and paste it in. We could change this around so it's a little bit neater but I think this is fine and we don't want to change encoding.
02:50
We want to change the encoding process. So let's say progress in here and set that to e.percentage. Okay so encoding process let's go down and add this to our state for each of our uploads and that will go in there.
03:08
Obviously it will be zero to start with and now we can just come over to our upload item and do exactly the same thing as we did here with our upload progress but we can do it with our encoding process. So encoding progress and we should be good.
03:25
So as soon as that first event fires encoding will be true. So we will show this progress and then we'll bind in the progress that we're now firing through. So let's just try this out and then if it doesn't work we'll fix it up. Okay so let's just make sure first of all that we are running our QWorker
03:43
and we've got Sockety up and running so our web sockets should be coming through. Let's try this out. So we'll go ahead and choose a small video file here. That upload is finished.
03:52
Now it's encoding and as you can see as this is now being encoded in the back end within our queue that's firing off that progress. We're picking it up and we're updating that individual upload and you can see sure enough the percentage is being reflected on the client side.
04:08
So really nothing we haven't already touched. Let's just run through once again what we did just so we're clear. Okay so over in our encode video this gives us the percentage as FFmpeg is encoding this. We fire an event and that event takes the percentage in within the payload so we can
04:27
pick it up on the client side on that channel which we've already looked at and then over on the client side we just pick up that new event, find the upload that this relates to by the video id, update the progress and of course our child component gets updated with this value.

Episode summary

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.

Episode discussion

No comments, yet. Be the first!