Live streaming HTML5 video using Azure Media Services

Start Streaming

Jason Seuss, a Principal PM Manager on the Azure Media Services team gave a great overview of this on the Azure blog. I’d advise you to read my previous two blog posts to get you prepped for the actual streaming. For those of you nto familiar with the technology, I gave a 10 minute overview on David Giard’s video podcast.

In my first post for this series, I gave an overview of HTML5 video and codecs. For the second piece, I illustrated how compression codecs, containers, and transport protocols work together to deliver your content to the end user. I also explained how copy protection, or DRM, works.

Here are the bare essentials to get started:

  1. Azure Account
    1. Gives you access to the cloud, in addition to Media Services
    2. you can sign up for a free Azure trial, or reach out to me about information on how to obtain a BizSpark account and receive $150 / mo in Azure credits
  2.  Azure Media Services Account
    1. Step-by-step instructions on how to set this up
    2. Your video content will be streamed from a channel here, as well as saved for video-on-demand later
  3.  Software to record and ingest your live streaming video
    1. Take a look at Wirecast’s free trial
      1. It has support for Azure Media Services built in
  4.  A video player to view the content
    1. I suggest the Azure Media Player
    2. Give it a link to your channel URL and viewers can see your content and easily debug it

 

What problem does this solve?

Sure there are plenty of options out there for playing back video: Twitch.tv, YouTube, etc., but they do not offer the amount of control or flexibility that Azure Media Services delivers.

Here are some of the perks of the Azure Media Services route:

  1. Copy protection
    1. You can use AES or PlayReady to protect your content and prevent it from being pirated

 

  1. Video on Demand
    1. You can play back video on YouTube, but you do not have the fine control that Media Services offers such as the choosing the various formats to export the video as

 

  1. YOU own your content
    1. It’s all stored and streamed from your Azure account

 

  1. Can convert previously recorded content and repackage it in various formats
    1. I can take a something I previously encoded in one format, and convert it on-the-fly to others

Consider this scenario

I’d like to have a video tutorial series on how to create video games. I want to get paid for my work, so I expose some of my videos and code for free, but others, I want behind a paywall so that only customers can gain access to that. How can I do that with YouTube or Twitch? I can’t.
With this however, I can apply an AES key or PlayReady license to my video so that only paying, logged-in users can view the content. When they click on the player inside of my application or website portal, the video player I provide reaches out to Azure Media Services, negotiates the token I’ve given it, and it then returns the video.

What if someone is viewing this from their iPhone? Well I could encode my content to MP4, and use Dynamic Packaging to convert it to HLS, which is what the iPhone can read. On the Windows Phone, I could repackage it to Smooth Streaming, which is the format the Windows Phone understands. Same goes for the Xbox.
You can read more about encoding here.

Getting started with Media Services

Log into the Azure portal, and on the left-hand side, look for the Media Services tab.

Media Services 1

Click New on the bottom left corner to bring up the tab for a new Media Service. This will bring up the option for Quick Create.

Quick CreateThe region is where your video content will be stored. Select the region closest to you. The storage account is the container within that region where your video content will be stored. This will create a new blob storage object for you.

 

We’ve got a Media Service ready, but now we need a channel to broadcast to. Click on the Channels tab to proceed to that page.

media services channels 1

Once on the channels page, press the Add button at the bottom of the page to make the create a new live channel pop-up appear. For Ingest Protocol select RTMP, and make sure that Start the new channel now is selected.

Add new channelIt will take a few moments to get your channel running, as Azure needs to spin up a Virtual Machine to get this running.

MS test stream options

There are several options here. The Ingest URL is what we’ll feed to the video recording software. This tells the software to send the stream to that address, where Azure Media Services will operate on it.

The Preview URL is where you can go to see your feed before it goes life. This is a great time to check your hair.

The Publish URL doesn’t have anything in it right now, but once we start streaming, we can point video players towards that address, and they can see our live feed.

Using Wirecast to record content

With Media Services set, we can now move onto to recording our mugs for all of the world to see.

Download and install a trial of Wirecast to get going.

Open Wirecast and on the top of the toolbar, select Output -> Output Settings

Wirecast outputWhen it asks you to select a Destination, select the default option, select Azure Media Services.

New Wirecast Azure

On the next page, it will ask for an Address. We need to head back to the Azure portal to Start our stream and that will create an address to ingest this content. In the Azure portal, click on the Start Streaming button at the bottom of your Media Services channel. It will ask for an encryption type. For now, select unencrypted. Wait a moment, and it will generate a Publish URL. You will use this later to feed to a video player, so that others can see what you are doing.

Start StreamingCopy the first Ingest URL and place it in the Address for Wirecast’s Output Settings. Hit OK.

Wirecast addressAlmost there! In Wirecast, hit the + button next to blank shot, followed by the camera button and select the camera on your computer.

Blank shot Add camera shot

Now your mug should appear in the preview and live screens. Select the camera feed you just created, as well as go button (really, an arrow), and that will start your streaming!

Start StreamingTo test it out, head to the Azure portal, press play at the bottom of the screen, and select play preview URL. A pop-up will appear and you can see your feed in the window!

Play preview URL wirecastDemo preview wirecast

Playing your video online

We’ve got a preview feed, now all we need is a player to stream our live feed to!

Navigate to the Azure Media Player and take the publish URL from your Azure Media Services portal and place it in the URL field for the media player.

Press update, and watch as your feed appears!

Azure Media PlayerThat’s all there is to it! We now have a working video stream that anyone can view.

Wirecast live feed

Copy the URL at the top of the page and pass it along to friends. They can all see you in action!

 Wrapping up

In the next tutorial, I’ll cover how to write your own player, save your video for your video-on-demand catalog, and perhaps even go into how to utilize the AES and PlayReady encryption technologies.

Here’s a full list of the tutorials in this series:

 

-----------------------


subscribe-to-youtube

7 thoughts on “Live streaming HTML5 video using Azure Media Services

    • There isn’t any reason as to why you couldn’t. As long as you have a video recording app on your phone which can make a RESTful call to your streaming address, then you’ll be good to go.

    • For WordPress, your best bet is likely to inject it into the page as an iFrame.

      Head to the Azure Media Player Page and in the top-right corner of the player, there is a tab which reads “Get the embed code”.

      Copy that code, and place it into your site. You can center it on any page by placing that code between this tag:

      ” INSERT WHAT YOU COPIED HERE “

      You only need to change the URL that the tag is pointing to. By default, it points to the demo video.

Leave a Reply to Luka Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.