How to properly upload video files to Azure Media Services from angularjs

Question

For my scenario, our current app is begin coded in html5 and angularjs communicating with web api. I have a workflow scenario that I seem to not be able to find an end to end example for. I would like to allow users of my website to upload videos and images to Azure Media Services. I found several examples that seem to move the data from a web page to blob storage and then copy over to azure media services.

1. Is there a way to upload the file directly to Media Services, instead of having a temporary and permanent blob container(one tied to AMS), as this approach seems to force me to have an additional storage container or is there a way to move the file to blob storage followed by linking the blob file to AMS via IAssetFile?
2. Can someone provide an end example that demonstrates the flow from web frontend upload to the file ending up in AMS?
3. Once up there, is there a way to make sure users can view but not download videos?

Answer 1

AMS provides Rest API for all media processing capabilities including uploading, encoding, publishing. There is a sample project (postman collection) in GitHub to play around. This sample project is also accompanied by a well-written article. Please find the links below.

https://github.com/Azure-Samples/media-services-v3-rest-postman

https://learn.microsoft.com/en-us/azure/media-services/latest/stream-files-tutorial-with-rest

Hope this will help

Answer 2

1.Is there a way to upload the file directly to Media Services:

• The Media Services SDK requires you to first create an Asset object in our system. That Asset object is backed by a container in Storage. You can create an empty Asset object, and request a write only SAS URL (We call them "Locators" in our API) to upload your content directly into. You may want to check out this AngularJS module and see if it works. http://ngmodules.org/modules/angular-azure-blob-upload

2.Can someone provide an end example that demonstrates the flow from web frontend upload to the file ending up in AMS?

• Your web API/frontend should use the Media Services SDK to create the empty Asset first. Once created, hand create a write only SAS URL and hand that back to your Angular client. The Angular client can then use client side javascript library to upload directly to the blob/container using the SAS URL and a module for azure-blob upload like the one here: http://ngmodules.org/modules/angular-azure-blob-upload

3.Once up there, is there a way to make sure users can view but not download videos?

• Once the video is uploaded, you should Delete the Write only SAS "Locator" from your Asset's Locators collection. This way, nobody can use it to write again.
• At this point you can create a Streaming Locator. Users will only be able to stream the file through our streaming services. Your file has to be encoded in a format that we can support streaming for, so you may have to first kick off an encoding job to get it into the right format and encoding settings (MP4 files with H264 and AAC audio). If you want to stream from Media Services, you need to make sure you have at least 1 streaming reserved unit enabled on your account. In addition, if you are looking to protect your files, you can take a look at our Content Protection services, which will provide on-the-fly AES 128 or PlayReady DRM encryption to your assets. You can integrate that with JWT tokens and Active Directory to authenticate/auth your users before they are able to decrypt the video on the client side.

Answer 3

I'm not too familiar with Azure Media Services but after looking at this guide http://azure.microsoft.com/en-us/documentation/articles/media-services-rest-get-started/ it appears to me that you can create an asset on Azure Media Services and link it to a blob. This means you'll only have one blob container.