I got the task of building a video streaming prototype based on the Azure Media Services the other day. All I had was a sample .mp4 video, and an azure Subscription for testing purposes, and of course the boundless ocean of knowledge, the internet. I gleaned information from Microsoft documentations, Stack Overflow, etc. and I am going to summarize my experience here, hoping it saves someone’s time in future:
Creating Azure Media Services on the Azure Portal is straightforward and fast. I used a dedicated resource group to better see what components are involved and how much they would cost during testing usage. The setup consists of three components:
Create a Service Principal for the Media Services and replace the contents of the appsettings.json of the sample UploadEncodeAndStreamFiles program (see the Microsoft Documentation, or get it directly from Github). To achieve this, I did the following in a Powershell:
az login
az account set --subscription ssssssss-ssss-ssss-ssss-ssssssssssss
az ams account sp create --account-name <MediaServiceName> --resource-group <YourResourceGroup>
In my case, the <MediaServiceName> is just “damedia”, the name I had chosen as I created the Media Services on the Azure Portal. The result of the last command is a json, which we can use as our appsettings.json directly:
{
"AadClientId": "aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa",
"AadEndpoint": "https://login.microsoftonline.com",
"AadSecret": "cccccccc-cccc-cccc-cccc-cccccccccccc",
"AadTenantId": "bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb",
"AccountName": "damedia",
"ArmAadAudience": "https://management.core.windows.net/",
"ArmEndpoint": "https://management.azure.com/",
"Region": "West Europe",
"ResourceGroup": "<YourResourceGroup>",
"SubscriptionId": "ssssssss-ssss-ssss-ssss-ssssssssssss"
}
Note: If you get the error
The subscription of 'ssssssss-ssss-ssss-ssss-ssssssssssss' doesn't exist in cloud 'AzureCloud'.
run:
az account clear
az login
and make sure you have chosen the correct account.
I just replaced the sample video ‘ignite.mp4’ with my video and started the program. It takes a while to complete, depending on the size and quality of the video, and generates the following logs in the console:
....
Job finished.
Downloading output results to 'Output\output-MySampleVideo-20200619-134744.mp4'...
Download complete.
-------------------------
locatorObject_name: locator-MySampleVideo-20200619-134744.mp4
-------------------------
-------------------------
streamingEndpointHostName: mediaservicename-euwe.streaming.media.azure.net
-------------------------
https://mediaservicename-euwe.streaming.media.azure.net/uuuuuuuu-uuuu-uuuu-uuuu-uuuuuuuuuuuu/MySampleVideo.ism/manifest(format=m3u8-aapl)
https://mediaservicename-euwe.streaming.media.azure.net/uuuuuuuu-uuuu-uuuu-uuuu-uuuuuuuuuuuu/MySampleVideo.ism/manifest(format=mpd-time-csf)
https://mediaservicename-euwe.streaming.media.azure.net/uuuuuuuu-uuuu-uuuu-uuuu-uuuuuuuuuuuu/MySampleVideo.ism/manifest
Done. Copy and paste the Streaming URL into the Azure Media Player at 'http://aka.ms/azuremediaplayer'.
Press Enter to continue.
In the Azure storage, we see now two new containers:
One of them contains the original video, uploaded by the program. The other one contains various copies of the video, with different sizes, each of which accompanied with an .mpi file, which Microsoft says are “intended to improve performance for dynamic packaging and streaming“…
Now I am ready to create a simple html file and embed an Azure Media Player in it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Azure Media Player</title>
<meta name="description" content="Test...">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--*****START OF Azure Media Player Scripts*****-->
<!--Note: DO NOT USE the "latest" folder in production. Replace "latest" with a version number like "1.0.0"-->
<!--EX:<script src="//amp.azure.net/libs/amp/1.0.0/azuremediaplayer.min.js"></script>-->
<!--Azure Media Player versions can be queried from //aka.ms/ampchangelog-->
<link href="https://amp.azure.net/libs/amp/2.3.5/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/2.3.5/azuremediaplayer.min.js"></script>
<!--*****END OF Azure Media Player Scripts*****-->
</head>
<body>
<h1>Sample: Introduction</h1>
<h3>contact: john.doe@me.com</h3>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
<footer>
<br />
<p>© ME2020</p>
</footer>
<script>
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://mediaservicename-euwe.streaming.media.azure.net/uuuuuuuu-uuuu-uuuu-uuuu-uuuuuuuuuuuu/MySampleVideo.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
</script>
</body>
</html>
The “src” link above is just the third link we get after running the console program. Open this html file in a web browser, et voila!!
Note: Make sure to use the latest version of the scripts by checking the Azure Media Player Releases web site.
Diaries of a cat who codes 
Great
LikeLike