Post
Ask Question

Cognitive Service Bing Video Search API Using UWP With Azure, XAML And C#

Before reading this article, please go through the following articles.

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
  2. How To Create Microsoft Cognitive Service Bing Search APIs On Azure Portal

Microsoft Cognitive Services (formerly Project Oxford) are a set of APIs, SDKs, and services available to developers to make their applications more intelligent, engaging and discoverable. Microsoft Cognitive Services expands on Microsoft’s evolving portfolio of machine learning APIs and enables developers to easily add intelligent features. Microsoft Cognitive Services let you build apps with powerful algorithms using just a few lines of code. They work across devices and platforms such as iOS, Android, and Windows, keep improving, and are easy to set up.

Bing Search APIs

Make our apps, webpages, and other experiences smarter and more engaging with the Bing Search APIs. Harness the same knowledge used by hundreds of millions of people, as well as the industry’s technology leaders, today.

Bing Video Search API

Search for videos and get comprehensive results. Find videos across the web. Results provide useful metadata including creator, encoding format, video length, view count, and more.

Reading this article, you will learn how to use Cognitive Service Bing Video Search API in Universal Windows Apps development, with Azure, XAML and Visual C#.

The following important tools are required for developing UWP.

  1. Windows 10 (Recommended)
  2. Visual Studio 2015 Community Edition (It is a free software available online).
  3. Cognitive Service Bing Search APIs Key (using azure How To Create Microsoft Cognitive Service Bing Search APIs On Azure Portal).

Now, we can discuss step by step app development.

Step 1

Open Visual studio 2015 -> Start -> New Project-> select Universal (under Visual C# ->Windows)-> Blank App -> Give suitable name for your App (UWPCogBingVideoSearch) -> OK.

XAML

After choosing the target and minimum platform version that your app will support the Project creates App.xaml and MainPage.xaml.

XAML

Add TextBlock control and change the name and text property for title.

XAML

Step 2

Add AutoSuggestBox control and set the Name, PlaceholderText, and Text properties.

XAML

Add a Button Control, set the Name, and add the search icon for Find video.

XAML

Step 3

Add GridView Resources using the following code.

  1. <Grid.Resources>  
  2.     <CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />  
  3. </Grid.Resources>  
Add a GridView Control and set the ItemSource properties.
  1. <GridView x:Name="gvVideoSearch" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="228" Margin="10,122,0,0" VerticalAlignment="Top" Width="620">  
XAML

Add the following code for GridView Item Template for News details.
  1. <GridView.ItemTemplate>  
  2.     <DataTemplate>  
  3.         <Border Background="AliceBlue" Width="179" Height="161" Margin="8">  
  4.             <Grid>  
  5.                 <Grid.ColumnDefinitions>  
  6.                     <ColumnDefinition Width="auto" />  
  7.                     <ColumnDefinition/>  
  8.                 </Grid.ColumnDefinitions>  
  9.                 <Grid Grid.Column="1" Margin="3,3,3,10">  
  10.                     <Grid.RowDefinitions>  
  11.                         <RowDefinition Height="auto" /> </Grid.RowDefinitions>  
  12.                     <StackPanel Margin="0,0,0,-143">  
  13.                         <HyperlinkButton NavigateUri="{Binding videocol.ContentUrl}" Foreground="Black">  
  14.                             <Image Source="{Binding videocol.Url}" VerticalAlignment="Center" Margin="6" />  
  15.                         </HyperlinkButton>  
  16.                         <TextBlock TextWrapping="Wrap" Text="{Binding videocol.Description}" Style="{StaticResource CaptionTextBlockStyle}" />  
  17.                     </StackPanel>  
  18.                 </Grid>  
  19.             </Grid>  
  20.         </Border>  
  21.     </DataTemplate>  
  22. </GridView.ItemTemplate>  
XAML

Step 4

Add the Click event method for Search button.

XAML

Step 5

Open (double click) the file MainPage.xaml in the Solution Explorer and add the Newtonsoft.Json reference in the project. Right click Your Project (UWPCogBingVideoSearch) and select "Manage NuGet Packages".

XAML

For adding Newtonsoft.Json Reference, choose Browse and search Newtonsoft.Json. Select the package and install it.

XAML

Reference is added to your project.

XAML

Note

Automatically, the following code will be generated in XAML code view, while we are done in the design view.
  1. <Page x:Class="UWPBingVideoSearch.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPBingVideoSearch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <Grid.Resources>  
  4.             <CollectionViewSource x:Name="SearchResultsCol" Source="{x:Bind SearchResults}" IsSourceGrouped="False" />  
  5.         </Grid.Resources>  
  6.         <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="173,54,0,0" TextWrapping="Wrap" Text="UWP Coginitive Bing Video Search Demo" VerticalAlignment="Top" Height="31" Width="302" FontWeight="Bold" />  
  7.         <AutoSuggestBox x:Name="asbVideo" HorizontalAlignment="Left" Margin="121,85,0,0" VerticalAlignment="Top" Width="280" PlaceholderText="Enter your Search Text" />  
  8.         <Button x:Name="btnVideoSearch" HorizontalAlignment="Left" Margin="410,85,0,0" VerticalAlignment="Top" Click="btnVideoSearch_Click">  
  9. <SymbolIcon Symbol="Find"></SymbolIcon>  
  10. </Button>  
  11.         <GridView x:Name="gvVideoSearch" ItemsSource="{Binding Source={StaticResource SearchResultsCol}}" SelectionMode="None" IsItemClickEnabled="False" HorizontalAlignment="Left" Height="228" Margin="10,122,0,0" VerticalAlignment="Top" Width="620">  
  12.             <GridView.ItemTemplate>  
  13.                 <DataTemplate>  
  14.                     <Border Background="AliceBlue" Width="179" Height="161" Margin="8">  
  15.                         <Grid>  
  16.                             <Grid.ColumnDefinitions>  
  17.                                 <ColumnDefinition Width="auto" />  
  18.                                 <ColumnDefinition/>  
  19.                             </Grid.ColumnDefinitions>  
  20.                             <Grid Grid.Column="1" Margin="3,3,3,10">  
  21.                                 <Grid.RowDefinitions>  
  22.                                     <RowDefinition Height="auto" /> </Grid.RowDefinitions>  
  23.                                 <StackPanel Margin="0,0,0,-143">  
  24.                                     <HyperlinkButton NavigateUri="{Binding videocol.ContentUrl}" Foreground="Black">  
  25.                                         <Image Source="{Binding videocol.Url}" VerticalAlignment="Center" Margin="6" />  
  26.                                     </HyperlinkButton>  
  27.                                     <TextBlock TextWrapping="Wrap" Text="{Binding videocol.Description}" Style="{StaticResource CaptionTextBlockStyle}" />  
  28.                                 </StackPanel>  
  29.                             </Grid>  
  30.                         </Grid>  
  31.                     </Border>  
  32.                 </DataTemplate>  
  33.             </GridView.ItemTemplate>  
  34.         </GridView>  
  35.     </Grid>  
  36. </Page>  
Step 6

Add the following namespaces in Mainpage.xaml.cs for Bing Video search.
  1. using System.Net.Http;  
  2. using System.Threading.Tasks;  
  3. using Newtonsoft.Json.Linq;  
  4. using System.Net;  
  5. using System.Collections.ObjectModel;  
Step 7

Add the Search client keys use Azure service and Generate it (For More Information, Please refer the article How To Create Microsoft Cognitive Service Bing Search APIs On Azure Portal)

Video search EndPoint is -

var VideoSearchEndPoint = "https://api.cognitive.microsoft.com/bing/v5.0/videos/search?";

Add the following code with Azure generated key.
  1. public class ViedoDet {  
  2.     public string Title {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public string Description {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     public string Url {  
  11.         get;  
  12.         set;  
  13.     }  
  14.     public string ContentUrl {  
  15.         get;  
  16.         set;  
  17.     }  
  18.     public string Publisher {  
  19.         get;  
  20.         set;  
  21.     }  
  22. }  
  23. public class Videocollection {  
  24.     public ViedoDet videocol {  
  25.         get;  
  26.         set;  
  27.     }  
  28. }  
  29. public string query;  
  30. public ObservableCollection < Videocollection > SearchResults {  
  31.     get;  
  32.     set;  
  33. } = new ObservableCollection < Videocollection > ();  
  34. private async void btnVideoSearch_Click(object sender, RoutedEventArgs e) {  
  35.     query = asbVideo.Text.Trim();  
  36.     var res = await videoSearch();  
  37.     for (int i = 0; i < res.Count(); i++) {  
  38.         ViedoDet vser = res.ElementAt(i);  
  39.         SearchResults.Add(new Videocollection {  
  40.             videocol = vser  
  41.         });  
  42.     }  
  43. }  
  44. async Task < IEnumerable < ViedoDet >> videoSearch() {  
  45.     List < ViedoDet > sres = new List < ViedoDet > ();  
  46.     var client = new HttpClient();  
  47.     // Request headers  
  48.     client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "<Your Azure cog Bing Search Key>");  
  49.     // Request parameters  
  50.     string count = "10";  
  51.     string offset = "0";  
  52.     string mkt = "en-us";  
  53.     var VideoSearchEndPoint = "https://api.cognitive.microsoft.com/bing/v5.0/videos/search?";  
  54.     var result = await client.GetAsync(string.Format("{0}q={1}&count={2}&offset={3}&mkt={4}", VideoSearchEndPoint, WebUtility.UrlEncode(query), count, offset, mkt));  
  55.     result.EnsureSuccessStatusCode();  
  56.     var json = await result.Content.ReadAsStringAsync();  
  57.     dynamic data = JObject.Parse(json);  
  58.     for (int i = 0; i < 10; i++) {  
  59.         sres.Add(new ViedoDet {  
  60.             Title = data.value[i].name,  
  61.                 Url = data.value[i].thumbnailUrl,  
  62.                 Description = data.value[i].description,  
  63.                 ContentUrl = data.value[i].contentUrl,  
  64.                 Publisher = data.value[i].publisher ? [0].name  
  65.         });  
  66.     }  
  67.     return sres;  
  68. }  
XAML

Step 8

Deploy your app in Local Machine. The output of the UWPCogBingVideoSearch app is given below.

XAML

Summary

Now, you have successfully tested Cognitive Service Bing Video Search API using Azure, XAML AND C# with UWP environment.

If you are interested, Please read the UWP Cognitive Service articles,

 

  1. Cognitive Service Bing Image Search API Using UWP With Azure, XAML And C#
  2. Cognitive Service Bing News Search API Using UWP With Azure, XAML And C#
  3. Cognitive Service Bing AutoSuggest API Using UWP With Azure, XAML And C#
  4. Multiple People Emotions In UWP With Cognitive Service Emotion API, Azure, XAML And C#
  5. Cognitive Service Emotion API In UWP With Azure, XAML And C#
  6. Retrieving Face Attributes Using Cognitive Service Face API In UWP With Azure, XAML And C#
  7. Cognitive Service Face API, Using UWP With Azure, XAML And C#


Similar Articles