Azure Functions provide mp4 Video with Azure Media Service in JavaScript

Question

I want to use Azure Blob Storage for Video Hosting. The videos are integrated in my Website via HTML Video Player:

<video controls>
  <source src="blobstorageurl" type="video/mp4">
  Your browser does not support HTML video.
</video>

So I created a blob container in which I upload the videos. An Azure Function (Blob Trigger) is observing this container. When a new video is uploaded, the Azure Function should start an AMS Job, with the new File as the source.

I used the logic of the official example (https://github.com/Azure-Samples/media-services-v3-node-tutorials/blob/main/AMSv3Samples/StreamFilesSample/index.ts).

Here is a small break down of my code:

const blobTrigger: AzureFunction = async function (context: Context, myBlob: any): Promise<void> {
  ...
  mediaServicesClient = new AzureMediaServices(creds, subscriptionId, clientOptions);
  let job = await mediaServicesClient.jobs.create(resourceGroup, accountName, transformName, jobName, { input: context.bindingData.uri, outputs: jobOutputs });
}

Which basically creates a new blob container with encoded files.

My Question is, how can I provide this file to my HTML Video Player. In the Tutorial they created a Streaming Locator, which I can't use for the HTML 5 Player. Can I use the blob directly? Or isn't it a good idea? And if yes, how can I provide it without any access key.

johndeu johndeu · Accepted Answer · 2021-06-30T18:05:43

First, you should make sure to understand the technical difference between what is called "progressive donwloading" a video file with the tag, vs. a real streaming solution that uses the HLS or DASH streaming protocols and "adaptive streaming". There are a lot of resources out there that explain the differences between the two and the customer experiences.

Basically, progressive download will involve a long buffering period for customers on poor networks, and won't be as fast or smooth of a playback experience if network conditions change (like on a cellular network for example.)

You can get the progressive download URL easily by just creating a SAS locator on the MP4 (make it public) in the storage account container, or you can deliver it through the Streaming Locator as well, if you set the streaming policy name to : 'Predefined_DownloadAndClearStreaming'. That will allow you to list the HLS, DASH, and SAS (progressive download) paths. You can also see this easier in the AMSE tool. See this for details on the built-in policy types ( you can also define custom policy types for streaming.) https://docs.microsoft.com/en-us/rest/api/media/streaming-locators/create

Azure Functions provide mp4 Video with Azure Media Service in JavaScript

1 Answers