Azure Media Services - Live Streaming

By: Rachel Scanlon on 2/23/2018

This goal of this blog post is to guide you on how you would stream live media on your website using Azure Media Services, their BLOB storage, your webcam or cellphone camera and Wirecast.

First you must set up a free Azure Trial Account

https://azure.microsoft.com/en-us/free/?v=18.03

You will be prompted to sign in to your Microsoft account. If you don’t have one you can create it here.

You will then be forwarded back to the Azure page to finish creating your account.

Log in via the Azure Portal. https://portal.azure.com

Select “+New > Web + Mobile > Media Services” as shown below.




Create your media services and storage accounts as shown below.



Next create a Wirecast account with the free trial and download the app. This will allow you to record live video from your camera to stream to your website.

http://www.telestream.net/controls/wirecast/download-wirecast.htm

Go to the “Media Service” you create earlier and select “Live Streaming”.



Create a new channel. Remember to uncheck the box that says “Automatically start the channel after creation” to make sure you are not charged for usage before you want to be.



Next we need to go back to the Wirecast software we installed earlier.

Select “Output > Output Settings” as show below and select “Azure Media Services” from the dropdown list.



Now we need to provide wirecast with an address for Azure to consume the content from Wirecast. To find this, you need to;

  1. Go back to your Azure Portal
  2. Find the channel you created earlier and start it.

       
     3. Create a live event.



    4. Start the live event you just created.


   5. The ingest URL above is the one you need for Wirecast.

Paste this in the “address” in Wirecast. Update other settings as needed.

If everything has gone to plan, you should see this screen. Leave it as it for now and we will set up Azure Media Player and a web page to display our live streaming content.

Go to Azure Media Player https://ampdemo.azureedge.net/azuremediaplayer.html

Do not select anything from the “select a sample” drop down list but paste the “streaming” url (not the ingest one you used for wirecast).



Below, you can see a working video stream that anyone can view.

    Next I am going to demonstrate how you can broadcast the same live stream into your web application.

    In my case I have a .NET application but this will work for any platform.

    Paste the links to the azure media player css and js files in the head of your html document as shown below.

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">

    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

    Then paste the following code into the body of your html document using the same url you just Azure Media player ealier.

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>

        <source src="<your-streaming-url>" 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>

    If all goes well you should see whatever your camera is focused on being streamed live onto your web page.



    Obviously, this is a very simple example, but you can use this as a starting point for more complex business applications that require this functionality. Azure also has a feature that allows you to add an AES key to your video content so that you can restrict access to only registered/paying customers.




    Category: Web Tags: Azure, Cloud