Skip to main content

Generate a Pre-built UI From Video Recordings

Symbl's Async API allows you to process audio, video or text data and transform them into AI insights such as Topics, Action Items, Questions, and more. In this guide, we will walk you through how to process a video recording and receive our Pre-built UI. The Pre-built UI generates a UI which contains all the information and analysis from your conversation which an be shared through a shareable link.

Contents#

Getting Started#

In this guide, we will provide you a video, which can be found here, though you can replace that video with whichever video you want. You can read the pages here to learn how to do that:

Process Video File#

To get the Summary UI, we need to process the video using Symbl's POST Video Using URL endpoint. Here's a few examples of how to that:

Example API Call#

info

Before using the Async API you must get the authentication token (AUTH_TOKEN) from our authentication process.

curl --location --request POST "https://api.symbl.ai/v1/process/video/url" \
--header 'Content-Type: application/json' \
--header "Authorization: Bearer $AUTH_TOKEN" \
--data-raw '{
"url": "https://storage.googleapis.com/demo-conversations/interview-prep.mp4",
"name": "Interview Prep",
"customVocabulary": ["Platform", "Discussion", "Targets"],
"confidenceThreshold": 0.6,
"detectPhrases": true,
"languageCode": "en-US"
}'

Once that call is run you'll get an example response with a jobId and conversationId, which we can later use to create our Pre-built UI.

Example API Response#

{
"conversationId": "XXXXXXXXXXXX2048",
"jobId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXfaeb"
}

Generate Pre-built UI#

Now that we have the Conversation ID (conversationId), we can make a call to the Experience API to generate our Pre-built UI.

Example API Call#

curl --location --request POST "https://api.symbl.ai/v1/conversations/$CONVERSATION_ID/experiences" \
--header 'Content-Type: application/json' \
--header "Authorization: Bearer $AUTH_TOKEN" \
--data-raw '{
"name": "video-summary",
"videoUrl": "https://storage.googleapis.com/demo-conversations/interview-prep.mp4",
"logo": "https://symblsanitydata.s3.us-east-2.amazonaws.com/symbl-logo.png",
"favicon" :"https://symblsanitydata.s3.us-east-2.amazonaws.com/symbl-favicon.png",
"color": {
"background": "#0A2136",
"topicsFilter": "#FF0000",
"insightsFilter": "#FF0000"
},
"font": {
"family": "roboto"
}
}'

Once we make that call to the Experience API you will get a response with the Video Summary UI URL:

Example API Response#

{
"name": "video-summary",
"url": "https://meetinginsights.symbl.ai/meeting/#/eyJzZXNzaW9uSWQiOiI2NjQxMzAyOTQ0ODc0NDk2IiwiZmF2aWNvbiI6Imh0dHBzOi8vc3ltYmxzYW5pdHlkYXRhLnMzLnVzLWVhc3QtMi5hbWF6b25hd3MuY29tL3N5bWJsLWZhdmljb24ucG5nIiwibG9nbyI6Imh0dHBzOi8vc3ltYmxzYW5pdHlkYXRhLnMzLnVzLWVhc3QtMi5hbWF6b25hd3MuY29tL3N5bWJsLWxvZ28ucG5nIiwiY29sb3IuYmFja2dyb3VuZCI6IiMwQTIxMzYiLCJjb2xvci50b3BpY3NGaWx0ZXIiOiIjRkYwMDAwIiwiY29sb3IuaW5zaWdodHNGaWx0ZXIiOiIjRkYwMDAwIiwiZm9udC5mYW1pbHkiOiJyb2JvdG8iLCJ2aWRlb1VybCI6Imh0dHBzOi8vc3RvcmFnZS5nb29nbGVhcGlzLmNvbS9kZW1vLWNvbnZlcnNhdGlvbnMvaW50ZXJ2aWV3LXByZXAubXA0In0=?showVideoSummary=true&o=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2NDEzMDI5NDQ4NzQ0OTYiLCJpYXQiOjE2MTg5NTE4NTgsImV4cCI6MTYyMTU0Mzg1OH0.9unYru1yP9M3dBWviTp2CRo6yx8v8PS2ZUxAn6krWEE"
}

Conclusion#

In the response is a url field that contains the URL to the Video Summary UI. Opening up that page will bring us to our Pre-built UI. You can view an example of what the Video Summary UI will look like:

Video Summary UI