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 a receive our Pre-built UI. The Pre-built UI formats all the AI insights detected in the video and gives you a URL that you can share with anyone.

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#

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://symbltestdata.s3.us-east-2.amazonaws.com/sample_video_file.mp4",
"name": "BusinessMeeting",
"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": "5877047438082048",
"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://symbltestdata.s3.us-east-2.amazonaws.com/sample_video_file.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/#/eyJzZXNzaW9uSWQiOiI1ODc3MDQ3NDM4MDgyMDQ4IiwiZmF2aWNvbiI6Imh0dHBzOi8vc3ltYmxzYW5pdHlkYXRhLnMzLnVzLWVhc3QtMi5hbWF6b25hd3MuY29tL3N5bWJsLWZhdmljb24ucG5nIiwibG9nbyI6Imh0dHBzOi8vc3ltYmxzYW5pdHlkYXRhLnMzLnVzLWVhc3QtMi5hbWF6b25hd3MuY29tL3N5bWJsLWxvZ28ucG5nIiwiY29sb3IuYmFja2dyb3VuZCI6IiMwQTIxMzYiLCJjb2xvci50b3BpY3NGaWx0ZXIiOiIjRkYwMDAwIiwiY29sb3IuaW5zaWdodHNGaWx0ZXIiOiIjRkYwMDAwIiwiZm9udC5mYW1pbHkiOiJyb2JvdG8iLCJ2aWRlb1VybCI6Imh0dHBzOi8vc3ltYmx0ZXN0ZGF0YS5zMy51cy1lYXN0LTIuYW1hem9uYXdzLmNvbS9zYW1wbGVfdmlkZW9fZmlsZS5tcDQifQ==?showVideoSummary=true&o=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4NzcwNDc0MzgwODIwNDgiLCJpYXQiOjE2MTcxMzQ1NjMsImV4cCI6MTYxOTcyNjU2M30.afsa7TBq2M1NJrsgF3p8tuKgjkEgoYxtM2S6E-sm7zI"
}

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