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

In this video lesson, you will learn how to send a video for processing to Symbl Async Video API. As a result you will get some parameters that you can use later on to retrieve insights about the video



https://app.egghead.io/api/v1/lessons/react-send-a-video-file-from-next-js-for-processing-using-symbl-ai-video-async-api/subtitles

Vladimir Novick: [0:00] Let's create Submit file for processing a function. This function will take a file, and we'll call Symbl API. We'll use video async API, go into api.symbl.ai/v1/process/video, and passing method as POST, and a bunch of headers.

[0:37] One important header to pass is x-api-key. Here, we need to post our token. A second header is Content-Type. Content-Type will be video/mp4. We'll also need to pass a body, which will be the file. We'll set JSON as true.

[1:03] Now, we need to bring our token. We can use useAuth hook for that. Let's bring this hook from our hooks/index.js. Whenever we receive a response from our Symbl API, we'll need to get rawResult and pass the JSON. Then we can log the JSON result.

[2:00] Let's see if it's working. Let's choose some test mp4 file. Click, Send and Processing. Within the Network tab, we'll see that video is sent. We can look at the headers. We'll see that our x-api-key is the actual token. The Console log, we'll see that we get back ConversationID and JobID.

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

Share this video with your friends

Course

Create Contextual Video Analysis App with NextJS and Symbl.ai