Create a Basic Next.js App

Style a Next.js App Layout with Chakra UI

Secure a Next.js App with a Login Screen

Implement Login in a Next.js App Functionality by Authorizing with Symbl

Store a Token Globally with React Context for Easier Use Anywhere in a Next.js App

Add Video File Input and Preview in a Next.js App

Send a Video File From Next.js for Processing Using Symbl AI Video Async API

Check the Status of Processing for Symbl Job API by Polling with a Custom useInterval Hook

Render Video Transcripts From Symbl Once Processing Is Complete on a Next.js Screen

Use Symbl Conversation API to Get a List of Insights From the Processed Video in Next.js

Create Contextual Video Analysis App with NextJS and Symbl.ai

Symbl has Job API that gives you an option to check your async tasks process status. You will use this Job API in polling manner, to get an update once video has completed processing.

Vladimir Novick: [0:00] On the video [inaudible] for processing to simple API, we get jobId and conversationId. What we need to do? First of all, we need to save them somewhere. We'll useState hook. Let's define conversationId, state variable, and let's define setConversationId. We'll useState for that. We'll also define jobId and setJobId. We'll use useState hook for that as well.

[0:39] We'll use custom hook. Use interval created by [inaudible] , but we change it a little bit adding stopFlag there. The hook uses savedCallback, savedCallback.current, but the stopFlag is the thing that basically limits the hook to run whenever we have the status change, the status is completed or whenever the jobId is not there.

[1:06] In order to use that, let's import our useInterval from hooks/index.js. Let's use it here. useInterval will get the function to run. We'll run it every second and we'll pass the custom stuff. Our stopFlag will be status is completed. Then we don't want to run our [inaudible] mechanism. Also, there is no jobId, meaning if we just started.

[1:41] We also add status and setStatus here to monitor the status of the job. To start using useInterval within the function, we'll use fetch. We'll call Symbl job API. The endpoint will be https://api.symbl.ai/v1/job, and we'll pass the jobId that we received when send video processing.

[2:17] We'll also need to pass the method as GET. We also need to pass headers, one of which will be our API token. As previously, x-api-key. We'll pass our token that we bring from our custom useAuth hook.

[2:40] Then whenever we receive the result, we'll get the rawResult. Then pass the json. Then whenever we get the result, we will need to setStatus to be our result.status. Whenever we get status as completed, this useInterval hook stops to run because of the custom stopFlag.

[3:12] Another thing that we need to add is inside our submitFileForProcessing. We need to update our job ID. Whenever we get the result from submitting the file, we need to set conversation ID to be result.conversationId. We also need to set our job ID to be result.jobId. Otherwise, our useInterval won't run because it's using jobId and it's a stopFlag. If we don't have jobId, it won't run.

[4:07] Let's try it out. Let's choose a file. Let's send for processing. If we go on the Network tab, we'll see that video is sent. Whenever we receive jobId and conversationId, we'll stop the pulling mechanism.

[4:40] As you can see, video finished processing. We'll start to get pulling into using Symbl Job API, and we get the status is in progress. Until we finally will receive the status as completed, and then the pulling mechanism will stop. As you can see here, the status is completed, and that's it. You don't need to pull Job API anymore.

Course

Create Contextual Video Analysis App with NextJS and Symbl.ai

Check the Status of Processing for Symbl Job API by Polling with a Custom useInterval Hook

Share this video with your friends