Introduction
Microsoft introduced the public preview of Video Indexer as a part of Cognitive Service. Previously, we used Video API but now it's replaced with Video Indexer. Video Indexer automatically extracts the metadata and builds intelligent innovative AI applications based on Video and Audio.
In this article, I will show how to integrate Video Indexer embeddable widgets into the mobile application.
Create Video Indexer Account
For implementing Video Indexer into the application, you must create an account and upload your video using my previous article as a reference.
Video Indexer supports embedding two types of widgets into your Mobile application
- Cognitive Insights – it includes all visual insights that were extracted from the video indexer.
- Player -it enables you to stream the video.
Embedding Video
I will show the below steps for how to get the embedding source from video indexer portal
Step 1
Login to Video Indexer Portal using Microsoft, Google or Azure Active Directory account
Step 2
Select your video, whichever one needs to integrate into the application.
Step 3
Click the "embed" button that appears below the video.
Step 4
After clicking on “embed” button, select the widget you want to embed with the desired options. (player/insights)
Step 5
You can copy the embed codes from embed popups and start implementing them into your application for Public videos. If you want to embed a Private video, you have to pass an access token in the iframe src attribute as a query string.
Create a Xamarin / Web Application
Let's start by creating a new Xamarin Forms Project using Visual Studio. Open Run - Type “Devenev.Exe” and enter - New Project (Ctrl+Shift+N) - select Blank Xaml App (Xamarin.Forms) template.
It will automatically create multiple projects, like .NET Standard, Android, iOS, and UWP.
Implement Cognitive Insights Widget
Cognitive insights widget contains all the visual insights that were extracted from the video after the indexing process such as people's appearances, top keywords, sentiment analysis, transcript, translate, and search.
Let's start implementing it into the Xamarin application.
You can add webview control inside the content page as per the below XAML design
- <?xml version="1.0" encoding="utf-8" ?>
- <ContentPage xmlns="https://xamarin.com/schemas/2014/forms"
- xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml"
- xmlns:local="clr-namespace:VideoIndexer"
- x:Class="VideoIndexer.MainPage">
- <WebView x:Name="browser" WidthRequest="1280" HeightRequest="780"></WebView>
- </ContentPage>
Join the conversation! Your thoughts help the community grow.