This document provides an overview of building a video streaming solution using Azure Media Services. It discusses the key components involved including: 1. Creating Media Services and Storage accounts 2. Uploading videos as assets and encoding them 3. Generating thumbnails, subtitles and adaptive bitrate manifests 4. Creating a streaming endpoint and getting streaming URLs 5. Integrating with a web app using the Azure Media Player The document also briefly covers integrating with Azure Search to enable video search functionality on the web app. It provides code samples for common tasks like uploading, encoding, and playing videos using Media Services and searching using Azure Search.

1. Capture
Record
Clip
Embed and play
Search
Video from newbie to ninja
http://creativecommons.org/licenses/by-nc-sa/3.0/
Vito Flavio Lorusso
@vflorusso
http://github.com/vflorusso

3. Things that kept me busy…
6. CDN
4. Cloud Ingest2. Broadcaster
Toronto Facility
3. Encoding
5. Storage & Streaming
7. Immersive Player
Client
15 live feeds
1. FIFA Broadcast
Facilities

4. H.264
HLS
DASH
What does
“video in the cloud”
look like?
INGEST
ENCODE
DELIVER
PACKAGE
ENCRYPT

5. “This looks complicated…
I am just a web developer…
and I want my Youtube”

6. Creating the Media Services
Account
Create a Storage Account
New-AzureStorageAccount -StorageAccountName [name] -Label
[label] -Location [location] -Type [storage-type]
Create a Media Services Account
New-AzureMediaServicesAccount -Name [ams-name] -
StorageAccountName [stg-name] -Location [location]
Create a Media Services Account
Get-AzureMediaServicesAccount -Name [ams-accountname]|Format-
Table Name, MediaServicesPrimaryAccountKey

7. Creating the CloudMediaContext
using Microsoft.WindowsAzure.MediaServices;
using Microsoft.WindowsAzure.MediaServices.Client;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Auth;
using Microsoft.WindowsAzure.Storage.Blob;
public static CloudMediaContext createAMSContext()
{
MediaServicesCredentials credentials = new
MediaServicesCredentials(amsAccountName, amsAccountKey);
CloudMediaContext mediaClient = new
CloudMediaContext(credentials);
return mediaClient;
}

8. Creating your with Azure
Youtube
Vimeo
Dailymotion
MP4 Video
Upload and
Create Asset
Media Services
Account
WEB APP

9. Uploading videos… (1/2)
static public IAsset CreateAssetAndUploadSingleFile(CloudMediaContext amsAccount,
AssetCreationOptions assetCreationOptions, string singleFilePath)
{
var assetName = "UploadSingleFile_" + DateTime.UtcNow.ToString();
var asset = CreateEmptyAsset(amsAccount, assetName, assetCreationOptions);
var fileName = Path.GetFileName(singleFilePath);
var assetFile = asset.AssetFiles.Create(fileName);
Console.WriteLine("Created assetFile {0}", assetFile.Name);
…

10. Uploading videos… 2/2
var accessPolicy = amsAccount.AccessPolicies.Create(assetName,
TimeSpan.FromDays(3),
AccessPermissions.Write | AccessPermissions.List);
var locator = amsAccount.Locators.CreateLocator(LocatorType.Sas,
asset, accessPolicy);
Console.WriteLine("Upload {0}", assetFile.Name);
assetFile.Upload(singleFilePath);
Console.WriteLine("Done uploading of {0} using Upload()",
assetFile.Name);
locator.Delete();
accessPolicy.Delete();
return asset;
}
…

11. Creating your with Azure
Youtube
Vimeo
Dailymotion
MP4 Video
Upload and
Create Asset
Media Services
Account
Media Services
Encoding Units
Process
Asset
Subtitles
Thumbnails
manifest
Adaptive bitrate
MP4 video
WEB APP

12. Processing… Encode
static public IAsset EncodeToAdaptiveBitrateMP4Set(IAsset asset, string
pathToLocalPresetFile)
{
IJob job = _context.Jobs.Create("Media Encoder Standard Job");
IMediaProcessor processor = GetLatestMediaProcessorByName("Media Encoder
Standard");
ITask task = job.Tasks.AddNew("My encoding task",
processor,
"H264 Multiple Bitrate 720p",
TaskOptions.None);
task.InputAssets.Add(asset);
task.OutputAssets.AddNew("Output asset",
AssetCreationOptions.None);
job.StateChanged += new
EventHandler<JobStateChangedEventArgs>(JobStateChanged);
job.Submit();
job.GetExecutionProgressTask(CancellationToken.None).Wait();
return job.OutputMediaAssets[0];
}

13. Processing… Thumbnails
<?xml version="1.0" encoding="utf-8"?> <Thumbnail Size="100%,*" Type="Jpeg"
Filename="{OriginalFilename}_{Size}_{ThumbnailTime}_{ThumbnailIndex}_{Date}_{Ti
me}.{DefaultExtension}"> <Time Value="10%" Step="10%" Stop="95%"/> </Thumbnail>
string configuration = File.ReadAllText(Path.GetFullPath(configFilePath +
@"Thumbnails.xml"));
ITask task = job.Tasks.AddNew("My thumbnail task", processor, configuration,
TaskOptions.ProtectedConfiguration);

14. Processing… Subtitles
string configuration = string.IsNullOrEmpty(configurationFile) ? "" :
File.ReadAllText(configurationFile);
ITask task = job.Tasks.AddNew("My Indexing Task",
processor,
configuration,
TaskOptions.None);
<?xml version="1.0" encoding="utf-8"?> <configuration version="2.0"> <input>
<metadata key="title" value="[Title of the media file]" /> <metadata
key="description" value="[Description of the media file]" /> </input>
<settings> </settings> <features> <feature name="ASR"> <settings> <add
key="Language" value="English"/> <add key="CaptionFormats"
value="ttml;sami;webvtt"/> <add key="GenerateAIB" value ="true" /> <add
key="GenerateKeywords" value ="true" /> </settings> </feature> </features>
</configuration>

15. Creating your with Azure
Youtube
Vimeo
Dailymotion
MP4 Video
Upload and
Create Asset
Media Services
Account
Media Services
Encoding Units
Process
Asset
Subtitles
Thumbnails
manifest
Adaptive bitrate
MP4 video
Media Services
Streaming EndpointsCDN
WEB APP

16. Creating the Endpoint
public static void createStreamingEndpoint(CloudMediaContext amsAccount,
string seName)
{
IStreamingEndpoint amsEndpoint =
amsAccount.StreamingEndpoints.Create(seName, 1);
amsEndpoint.StartAsync();
}

17. Get the streaming URL (1/2)
static string streamSmoothLegacy = "(format=fmp4-v20)";
static string streamDash = "(format=mpd-time-csf)";
static string streamHLSv4 = "(format=m3u8-aapl)";
static string streamHLSv3 = "(format=m3u8-aapl-v3)";
static string streamHDS = "(format=f4m-f4f)";
private static string GetStreamingOriginLocatorEndPoint(CloudMediaContext
amsAccount, IAsset assetToStream)
{
var theManifest = from f in assetToStream.AssetFiles
where f.Name.EndsWith(".ism")
select f;
// Cast the reference to a true IAssetFile type.
IAssetFile manifestFile = theManifest.First();
IAccessPolicy policy = null;
ILocator originLocator = null;
// Create a 30-day readonly access policy.
policy = amsAccount.AccessPolicies.Create("Streaming policy",
TimeSpan.FromDays(30),
AccessPermissions.Read);
…

18. // Create an OnDemandOrigin locator to the asset.
originLocator =
amsAccount.Locators.CreateLocator(LocatorType.OnDemandOrigin, assetToStream,
policy,
DateTime.UtcNow.AddMinutes(-5));
// Create a full URL to the manifest file. Use this for playback
// in streaming media clients.
string urlForClientStreaming = originLocator.Path +
manifestFile.Name + "/manifest";
// Return the locator.
return urlForClientStreaming;
}
Get the streaming URL (2/2)
…

19. Managing Media Services from
«code»
• Command Line
• Windows: PowerShell
• Code
• Azure Media Services REST APIs
• Azure Media Services SDK for .NET
• Azure SDK for Java
• Azure Media Services for Node.js
• Azure PHP SDK

20. Wrapping up: what makes a
Media Service
Media Service Account
Storage Account
AssetAssetAsset
Streaming Endpoint
Streaming Unit
Encoding
Job
Task
Live Streaming
Channel
Program

21. Creating your with Azure
Youtube
Vimeo
Dailymotion
MP4 Video
Upload and
Create Asset
Media Services
Account
Media Services
Encoding Units
Process
Asset
Subtitles
Thumbnails
manifest
Adaptive bitrate
MP4 video
Media Services
Streaming EndpointsCDN
Azure
Search
WEB APP
<video /> <img /> <input /> <div />

22. Create Search Account
#only lowercase letters and numbers accepted
$searchdeploymentname = "vitolosearch01"
$dbdeploymentname = "vitotestdb02"
$dbservername = "vitotestdbsrv02"
$dbadminname = "vito"
$dbpassword = Read-Host "Type DB password"
#parameters for creating the search service
$searchparams = @{name=$deploymentname; location=$location; sku= "standard";
replicaCount=1; partitionCount=1}
Switch-AzureMode AzureResourceManager
Add-AzureAccount -Credential $credential
Select-AzureSubscription $subscriptionName
New-AzureResourceGroup –Name $resourcegroupname –Location $location
New-AzureResourceGroupDeployment -ResourceGroupName $resourcegroupname -
nameFromTemplate $searchdeploymentname -DeploymentName $searchdeploymentname -
TemplateFile .Microsoft.Search.1.0.5.json -TemplateParameterObject $searchparams

23. Create Index
string searchServiceName =
ConfigurationManager.AppSettings["SearchServiceName"];
string apiKey =
ConfigurationManager.AppSettings["SearchServiceApiKey"];
_searchClient = new SearchServiceClient(searchServiceName, new
SearchCredentials(apiKey));
_indexClient = _searchClient.Indexes.GetClient(_moviesIndexName);
_serviceUri = new Uri("https://" +
ConfigurationManager.AppSettings["SearchServiceName"] + ".search.windows.net");
_httpClient = new HttpClient();
_httpClient.DefaultRequestHeaders.Add("api-key", apiKey);
CreateMovieIndex();

24. CreateMovieIndex()
internal static void CreateIndex(string collectionName)
{
try
{
var definition = new Index()
{
Name = collectionName,
Fields = new[]
{
new Field(“MOVIE_KEY", DataType.String) { IsKey = true,
IsSearchable = false, IsFilterable = false, IsSortable = false, IsFacetable =
false, IsRetrievable = true},
new Field(“MOVIE_DATA", DataType.String) { IsKey = false,
IsSearchable = true, IsFilterable = true, IsSortable = false, IsFacetable =
true, IsRetrievable = true}
}
};
_searchClient.Indexes.Create(definition);
}
catch (Exception ex)
{
Console.WriteLine("Error creating index: {0}rn",
ex.Message.ToString());
}
}

25. Wrap up: Azure Search
Search Service Client
Collection
Index
Fields
Facets Indexer
Search Query key

26. Creating your with Azure
Youtube
Vimeo
Dailymotion
MP4 Video
Upload and
Create Asset
Media Services
Account
Media Services
Encoding Units
Process
Asset
Subtitles
Thumbnails
manifest
Adaptive bitrate
MP4 video
Media Services
Streaming EndpointsCDN
Azure
Search
WEB APP
<video /> <img /> <input /> <div />

27. The web page: Media Player
<link href=“http://amp.azure.net/libs/amp/latest/skins/amp-
default/azuremediaplayer.min.css" rel="stylesheet">
<script src=
“http://amp.azure.net/libs/amp/[version]/azuremediaplayer.min.js"></script>
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay
controls width="640" height="400" poster="poster.jpg" data-
setup='{"nativeControlsForTouch": false}'>
<source
src="http://amssamples.streaming.mediaservices.windows.net/91492
735-c523-432b-ba01-
faba6c2206a2/AzureMediaServicesPromo.ism/manifest"
type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js"> To view this video please enable
JavaScript, and consider upgrading to a web browser that
supports HTML5 video </p>
</video>

28. The web page: Search
<html>
<head>
<script src="azure-search.min.js"></script>
</head>
<body>
<script>
var client = AzureSearch({
url: "https://MY_SEARCH_SERVICE_NAME.search.windows.net",
key:"MY_QUERY_KEY"
});
client.search('myindex', {search:'document'}, function(err, results){
// results is an array of matching documents
});
</script>
</body>
</html>

29. Questions?

30. Useful links
Azure Media Services Dev Center
http://azure.microsoft.com/en-us/develop/media-services/
Azure Media Services Explorer
http://aka.ms/amse
Azure Media Player
http://aka.ms/azuremediaplayer
Azure Search
https://azure.microsoft.com/en-
us/documentation/articles/search-workflow/

31. webnextconf.eu