AzureCon Challenge

Stream Media with Azure Media Services

Overview
Video based content has almost become a MUST HAVE to enrich and provide better immersive experiences whether its for a marketing web site, an
employee facing intranet site or for activities such as training and development. Historically, the infrastructure needed to store, encode, protect and stream
video have been highly specialized and complex. Azure has a complete platform to do all this.
In this code challenge you will upload and encode a video asset and build a simple web site to deliver this video through.

1. Login to Azure
For this challenge, you have either elected to use your own subscription or have created a new Azure
subscription using the provided Azure Pass (or Free Trial). If you want to switch to use the provided Azure
Pass the promotion code is displayed on the My Account page on the http://challenge.azurecon.com web
site. If there is no promo code displayed, you will need to use the free trial http://azure.microsoft.com/pricing/free-trial.
Azure has TWO management portals - the classic portal (http://manage.windowsazure.com) and a new
portal that is in Preview at http://portal.azure.com. You will use BOTH the Preview portal and the Classic
Portal in this challenge.
1.

Open a browser and go to http://portal.azure.com

2.

Enter your Microsoft Account email address and password for the Microsoft Account you
associated with your Azure Pass or your own subscription.

3.

You will now be in your Azure subscription (see opposite) and from here you can create and
manage Azure services.

2. Create Your Media Service and Upload/Encode a Video.

1.

From the portal, click + New -> Media + CDN -> Media Services. Note the icon (see right) next to
media services. This indicates this service is not yet integrated into the preview portal. If you click the
service, it will take your straight to the classic portal and to creating a new media service which
fortunately is where you need to be.

2.

In the NAME field, enter a unique name for your Media Services account. Suggest you use your alias
followed by media, so if your email is bsmith@contoso.com, you would use bsmithmedia as the
name. Make sure it resolves to a unique name (you will get a tick).

3.

Choose any region.

4.

For Storage Account, leave the default value - Create a New Storage Account.

5.

Change the name of the storage account to alias + mediastore e.g. bsmithmediastore.

6.

Click the CREATE MEDIA SERVICES link next to the check mark to provision the accounts (it may take several minutes to complete).

7.

After the account is provisioned, click the account name to open its properties.

8.

Click on the content tab and click the upload button.

9.

Click this link to download the content to your machine: http://az809253.vo.msecnd.net/docs/assets/AzureMediaServicesFiles.zip

10.

Extra the files in the .zip file

11.

Back on the content upload dialog, select the ElephantsDreamClip3.mp4 file that you just downloaded. It will take a minute or so to upload
and once completed you will see the file listed in your content list.

You are going to encode this source video two, using two different quality/size levels a full 720p HD video and a smaller standard def video. By default,
your media service account will encode form the shared encoding pool. You can get your own dedicated encoders which you will do next.
12.

Page | 1

Click the ENCODING TAB. Select 2 Units (by dragging the slider) leave the RESERVED UNIT TYPE = Basic. Click SAVE.

13.

Click on the CONTENT tab. Select the uploaded file and click PROCESS (at the bottom).

14.

The PROCESSOR should be AZURE MEDIA ENCODER.

15.

Click the ENCODE CONFIGURATION drop down. These are preset encoding options (more are available via the API) and you select the ones you
want depending on the video quality, available bandwidth and the platform/player you want to target.

16.

For this challenge, you want to target all modern web browsers, and HTML5 has a built-in capability to play MP4 encoded video (plus a couple of
other formats). You cannot use variable bitrate options these alter the bitrate as bandwidth changes. Select the H264 Broadband 720p option.

17.

Leave the OUTPUT CONTENT NAME the default and click OK.

18.

Click on Process again, this time selecting the H264 Broadband SD

16x9 option and click OK.

19.

Click on JOBS to see the processing state of your encoding job.

20. When the TWO jobs have finished, click the CONTENT tab.
21.

Select each of the encoded files (not the Source) and click the PUBLISH
button at the bottom of the portal. and select YES to the confirmation.

22. Each of the two files will now have a publish URL.

23. Go back to your ENCODING tab and drag the slider so you have ZERO reserved capacity units click SAVE. You do this because if you are not
encoding, you dont want to be paying for these unused resources.

3. Provision your Web Infrastructure.

1.

SWITCH to the Azure Preview Portal

2.

In the portal click +NEW, Web + Mobile, Web App

3.

In the URL, enter a globally unique name for your web application suggest alias + media e.g. bsmtih-media

4.

In the Resource Group box, click Create New and enter the name media-web-app for your resource group.

5.

Click on App Service Plan/Location and then click the Create New button.

6.

Enter mediawebASP for the name.

7.

Select any Location

8.

Leave the Pricing Tier the default and click OK. An App Service plan is a unit of billing and scaling of resources to support all of the app services
within a single plan, which gives you flexibility to change and scale things independently.

9.

Click CREATE. Your web app will provision and be ready in less than 60 seconds. A blade for your app will open when it is complete.

10.

Click the BROWSE button at the top of your web app blade. A new browser tab opens, connecting to your public app url which will be
something like http://bsmith-media.azurewebsites.net - a default HTML page is displayed for you.

4. Build Your Web Application

Now you need some form of web application that will display your video. Actually the video of course is
really being displayed in the users browser and is being downloaded from the media services content
store. You are really building a simple app to present the video to the users. Lets build the app to do
this First though you need to turn on the built in code editor in the Portal so you can build your app.
1.

Switch back to your Web App blade in the Portal.

2.

In the top panel, click the Tools button.

Page | 2

3.

Click EXTENSIONS (at the bottom of the blade) and on the Installed web app extensions
blade, click Add

4.

SELECT Visual Studio Online by clicking it and then click the OK button to Accept Legal Terms
and then OK again on the Add web app extension blade. After a few seconds, you will see the
extension appear in your list of installed extensions.

5.

Click the Visual Studio Online extension and then click the BROWSE button.
A new browser opens and after 10-20 seconds you will see the Visual Studio Online Monaco
code editor we will refer to this as Monaco. This is a lightweight, simple code editor
integrated right into the Portal. At the top left, you will see the only file on your web server
hostingstart.html this is that blue getting started page you browsed to.

6.

In the Monaco editor, right click the hostingstart.html file and select DELETE and OK.

7.

HOVER over the WWWRoot heading (top left) and click the New Document icon

8.

In the name text box, enter default.html (it is important you call it exactly this..!)

9.

You web page for your video will be pretty simple. Copy/Paste in this code into the code window:
<html>
<Header>
<Title>Azure Media Services Web App</Title>
</Header>
<Body>
<h1>This is Azure Media Services in Action</h1>
<div id="myvideo">
<video id="vidbox" width=720 height=480 controls autoplay>
<source id="vidsrc" src="xxx"/>
</video>
</div>
</Body>
</html>

10.

Replace the xxx value in the src= attribute (5th line from the bottom) with the URL to your SD video. To get this value, Switch back to the
Azure Classic Portal and to your Media Services Account.

11.

Click the Content tab. For the SD 16x9 content file, put your mouse cursor in the PUBLISH column and you will see a clipboard icon appear
click it

12.

Switch back to Monaco and paste in the value of the publish URL you just copied replacing xxx but making sure the URL is enclosed in
quotes.

13.

Switch to your web browser showing your blue default page for your web app. Click refresh.

5. Enhance Your Web Application

Your final task is to change your web app so that your user can switch between the two versions of the video and see either the SD or the HD version. To do
this, you will implement some simple JavaScript code that will change the video size and change the SRC attribute.
1.

In Monaco, create a new line after the <div id=myvideo> line.

2.

Copy/Paste in this code which creates a message displaying the current video being played.
<div id="message">Standard Def (720x480 128kbs)</div>

Page | 3

3.

Now under that line, copy/paste in this code

<div id="button" style="text-align:left">
<button onclick="SD()">SD 16:9</button>
<button onclick="HD()">HD 720p</button>
<br><br>
</div>

4.

If you REFRESH your browser that is displaying your current web app, the two buttons/text will look like this (although they wont do anything yet)

5.

Monaco automatically saves your work as you go, you can just refresh your browser to get the latest version of your code. Lets make your
buttons actually do some work. Copy/Paste in this code WITHIN the <Header></Header> section, after the <Title> tags.
<script>
function SD() {
document.getElementById("message").textContent = "Standard Def (720x480 128kbs)";
document.getElementById("vidsrc").src = "xxx";
var obj = document.getElementById("vidbox");
obj.width = 720;
obj.height = 480;
obj.load();
obj.play();
}
function HD() {
document.getElementById("message").textContent = "HIGH Def (1280x720 128kbs)";
document.getElementById("vidsrc").src = "yyy";
var obj = document.getElementById("vidbox");
obj.pause();
obj.width = 1280;
obj.height = 720;
obj.load();
obj.play();
}
</script>

6.

Replace the xxx with the value of the publish url for the SD video and replace yyy with the value of the HD video. you can copy/past the two
values by switching back to Media Service and copying the URL to the clipboard as you did earlier.

7.

Switch back to your browser and REFRESH.

Now your two buttons should flip the two media assets and change the size/quality of the video. The video is progressively streamed which means you can
flip around the clip waiting only a short time to buffer a few seconds from the time selected.

--- END OF LAB --Go back to the AzureCon Challenge web site (http://challenge.azurecon.com) and complete the challenge question to get your points.
REMEMBER: You only have one chance at the question, make sure you really know the answer!

Page | 4