Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Capture, record, clip, embed and play, search: video from newbie to ninja

1,330 views

Published on

Example driven way, on how you can easily control provisioning of resources, stream, record video, clip it and embed it in your web site.
Integration of video workflows with search and indexing processor to leverage a complete end-to-end solution like a video sharing portal

Published in: Internet

Capture, record, clip, embed and play, search: video from newbie to ninja

  1. 1. Capture Record Clip Embed and play Search Video from newbie to ninja http://creativecommons.org/licenses/by-nc-sa/3.0/ Vito Flavio Lorusso @vflorusso http://github.com/vflorusso
  2. 2. Things that kept me busy… 6. CDN 4. Cloud Ingest2. Broadcaster Toronto Facility 3. Encoding 5. Storage & Streaming 7. Immersive Player Client 15 live feeds 1. FIFA Broadcast Facilities
  3. 3. H.264 HLS DASH What does “video in the cloud” look like? INGEST ENCODE DELIVER PACKAGE ENCRYPT
  4. 4. “This looks complicated… I am just a web developer… and I want my Youtube”
  5. 5. Creating the Media Services Account Create a Storage Account New-AzureStorageAccount -StorageAccountName [name] -Label [label] -Location [location] -Type [storage-type] Create a Media Services Account New-AzureMediaServicesAccount -Name [ams-name] - StorageAccountName [stg-name] -Location [location] Create a Media Services Account Get-AzureMediaServicesAccount -Name [ams-accountname]|Format- Table Name, MediaServicesPrimaryAccountKey
  6. 6. Creating the CloudMediaContext using Microsoft.WindowsAzure.MediaServices; using Microsoft.WindowsAzure.MediaServices.Client; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Auth; using Microsoft.WindowsAzure.Storage.Blob; public static CloudMediaContext createAMSContext() { MediaServicesCredentials credentials = new MediaServicesCredentials(amsAccountName, amsAccountKey); CloudMediaContext mediaClient = new CloudMediaContext(credentials); return mediaClient; }
  7. 7. Creating your with Azure Youtube Vimeo Dailymotion MP4 Video Upload and Create Asset Media Services Account WEB APP
  8. 8. Uploading videos… (1/2) static public IAsset CreateAssetAndUploadSingleFile(CloudMediaContext amsAccount, AssetCreationOptions assetCreationOptions, string singleFilePath) { var assetName = "UploadSingleFile_" + DateTime.UtcNow.ToString(); var asset = CreateEmptyAsset(amsAccount, assetName, assetCreationOptions); var fileName = Path.GetFileName(singleFilePath); var assetFile = asset.AssetFiles.Create(fileName); Console.WriteLine("Created assetFile {0}", assetFile.Name); …
  9. 9. Uploading videos… 2/2 var accessPolicy = amsAccount.AccessPolicies.Create(assetName, TimeSpan.FromDays(3), AccessPermissions.Write | AccessPermissions.List); var locator = amsAccount.Locators.CreateLocator(LocatorType.Sas, asset, accessPolicy); Console.WriteLine("Upload {0}", assetFile.Name); assetFile.Upload(singleFilePath); Console.WriteLine("Done uploading of {0} using Upload()", assetFile.Name); locator.Delete(); accessPolicy.Delete(); return asset; } …
  10. 10. Creating your with Azure Youtube Vimeo Dailymotion MP4 Video Upload and Create Asset Media Services Account Media Services Encoding Units Process Asset Subtitles Thumbnails manifest Adaptive bitrate MP4 video WEB APP
  11. 11. Processing… Encode static public IAsset EncodeToAdaptiveBitrateMP4Set(IAsset asset, string pathToLocalPresetFile) { IJob job = _context.Jobs.Create("Media Encoder Standard Job"); IMediaProcessor processor = GetLatestMediaProcessorByName("Media Encoder Standard"); ITask task = job.Tasks.AddNew("My encoding task", processor, "H264 Multiple Bitrate 720p", TaskOptions.None); task.InputAssets.Add(asset); task.OutputAssets.AddNew("Output asset", AssetCreationOptions.None); job.StateChanged += new EventHandler<JobStateChangedEventArgs>(JobStateChanged); job.Submit(); job.GetExecutionProgressTask(CancellationToken.None).Wait(); return job.OutputMediaAssets[0]; }
  12. 12. Processing… Thumbnails <?xml version="1.0" encoding="utf-8"?> <Thumbnail Size="100%,*" Type="Jpeg" Filename="{OriginalFilename}_{Size}_{ThumbnailTime}_{ThumbnailIndex}_{Date}_{Ti me}.{DefaultExtension}"> <Time Value="10%" Step="10%" Stop="95%"/> </Thumbnail> string configuration = File.ReadAllText(Path.GetFullPath(configFilePath + @"Thumbnails.xml")); ITask task = job.Tasks.AddNew("My thumbnail task", processor, configuration, TaskOptions.ProtectedConfiguration);
  13. 13. Processing… Subtitles string configuration = string.IsNullOrEmpty(configurationFile) ? "" : File.ReadAllText(configurationFile); ITask task = job.Tasks.AddNew("My Indexing Task", processor, configuration, TaskOptions.None); <?xml version="1.0" encoding="utf-8"?> <configuration version="2.0"> <input> <metadata key="title" value="[Title of the media file]" /> <metadata key="description" value="[Description of the media file]" /> </input> <settings> </settings> <features> <feature name="ASR"> <settings> <add key="Language" value="English"/> <add key="CaptionFormats" value="ttml;sami;webvtt"/> <add key="GenerateAIB" value ="true" /> <add key="GenerateKeywords" value ="true" /> </settings> </feature> </features> </configuration>
  14. 14. Creating your with Azure Youtube Vimeo Dailymotion MP4 Video Upload and Create Asset Media Services Account Media Services Encoding Units Process Asset Subtitles Thumbnails manifest Adaptive bitrate MP4 video Media Services Streaming EndpointsCDN WEB APP
  15. 15. Creating the Endpoint public static void createStreamingEndpoint(CloudMediaContext amsAccount, string seName) { IStreamingEndpoint amsEndpoint = amsAccount.StreamingEndpoints.Create(seName, 1); amsEndpoint.StartAsync(); }
  16. 16. Get the streaming URL (1/2) static string streamSmoothLegacy = "(format=fmp4-v20)"; static string streamDash = "(format=mpd-time-csf)"; static string streamHLSv4 = "(format=m3u8-aapl)"; static string streamHLSv3 = "(format=m3u8-aapl-v3)"; static string streamHDS = "(format=f4m-f4f)"; private static string GetStreamingOriginLocatorEndPoint(CloudMediaContext amsAccount, IAsset assetToStream) { var theManifest = from f in assetToStream.AssetFiles where f.Name.EndsWith(".ism") select f; // Cast the reference to a true IAssetFile type. IAssetFile manifestFile = theManifest.First(); IAccessPolicy policy = null; ILocator originLocator = null; // Create a 30-day readonly access policy. policy = amsAccount.AccessPolicies.Create("Streaming policy", TimeSpan.FromDays(30), AccessPermissions.Read); …
  17. 17. // Create an OnDemandOrigin locator to the asset. originLocator = amsAccount.Locators.CreateLocator(LocatorType.OnDemandOrigin, assetToStream, policy, DateTime.UtcNow.AddMinutes(-5)); // Create a full URL to the manifest file. Use this for playback // in streaming media clients. string urlForClientStreaming = originLocator.Path + manifestFile.Name + "/manifest"; // Return the locator. return urlForClientStreaming; } Get the streaming URL (2/2) …
  18. 18. Managing Media Services from «code» • Command Line • Windows: PowerShell • Code • Azure Media Services REST APIs • Azure Media Services SDK for .NET • Azure SDK for Java • Azure Media Services for Node.js • Azure PHP SDK
  19. 19. Wrapping up: what makes a Media Service Media Service Account Storage Account AssetAssetAsset Streaming Endpoint Streaming Unit Encoding Job Task Live Streaming Channel Program
  20. 20. Creating your with Azure Youtube Vimeo Dailymotion MP4 Video Upload and Create Asset Media Services Account Media Services Encoding Units Process Asset Subtitles Thumbnails manifest Adaptive bitrate MP4 video Media Services Streaming EndpointsCDN Azure Search WEB APP <video /> <img /> <input /> <div />
  21. 21. Create Search Account #only lowercase letters and numbers accepted $searchdeploymentname = "vitolosearch01" $dbdeploymentname = "vitotestdb02" $dbservername = "vitotestdbsrv02" $dbadminname = "vito" $dbpassword = Read-Host "Type DB password" #parameters for creating the search service $searchparams = @{name=$deploymentname; location=$location; sku= "standard"; replicaCount=1; partitionCount=1} Switch-AzureMode AzureResourceManager Add-AzureAccount -Credential $credential Select-AzureSubscription $subscriptionName New-AzureResourceGroup –Name $resourcegroupname –Location $location New-AzureResourceGroupDeployment -ResourceGroupName $resourcegroupname - nameFromTemplate $searchdeploymentname -DeploymentName $searchdeploymentname - TemplateFile .Microsoft.Search.1.0.5.json -TemplateParameterObject $searchparams
  22. 22. Create Index string searchServiceName = ConfigurationManager.AppSettings["SearchServiceName"]; string apiKey = ConfigurationManager.AppSettings["SearchServiceApiKey"]; _searchClient = new SearchServiceClient(searchServiceName, new SearchCredentials(apiKey)); _indexClient = _searchClient.Indexes.GetClient(_moviesIndexName); _serviceUri = new Uri("https://" + ConfigurationManager.AppSettings["SearchServiceName"] + ".search.windows.net"); _httpClient = new HttpClient(); _httpClient.DefaultRequestHeaders.Add("api-key", apiKey); CreateMovieIndex();
  23. 23. CreateMovieIndex() internal static void CreateIndex(string collectionName) { try { var definition = new Index() { Name = collectionName, Fields = new[] { new Field(“MOVIE_KEY", DataType.String) { IsKey = true, IsSearchable = false, IsFilterable = false, IsSortable = false, IsFacetable = false, IsRetrievable = true}, new Field(“MOVIE_DATA", DataType.String) { IsKey = false, IsSearchable = true, IsFilterable = true, IsSortable = false, IsFacetable = true, IsRetrievable = true} } }; _searchClient.Indexes.Create(definition); } catch (Exception ex) { Console.WriteLine("Error creating index: {0}rn", ex.Message.ToString()); } }
  24. 24. Wrap up: Azure Search Search Service Client Collection Index Fields Facets Indexer Search Query key
  25. 25. Creating your with Azure Youtube Vimeo Dailymotion MP4 Video Upload and Create Asset Media Services Account Media Services Encoding Units Process Asset Subtitles Thumbnails manifest Adaptive bitrate MP4 video Media Services Streaming EndpointsCDN Azure Search WEB APP <video /> <img /> <input /> <div />
  26. 26. The web page: Media Player <link href=“http://amp.azure.net/libs/amp/latest/skins/amp- default/azuremediaplayer.min.css" rel="stylesheet"> <script src= “http://amp.azure.net/libs/amp/[version]/azuremediaplayer.min.js"></script> <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data- setup='{"nativeControlsForTouch": false}'> <source src="http://amssamples.streaming.mediaservices.windows.net/91492 735-c523-432b-ba01- faba6c2206a2/AzureMediaServicesPromo.ism/manifest" 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>
  27. 27. The web page: Search <html> <head> <script src="azure-search.min.js"></script> </head> <body> <script> var client = AzureSearch({ url: "https://MY_SEARCH_SERVICE_NAME.search.windows.net", key:"MY_QUERY_KEY" }); client.search('myindex', {search:'document'}, function(err, results){ // results is an array of matching documents }); </script> </body> </html>
  28. 28. Questions?
  29. 29. Useful links Azure Media Services Dev Center http://azure.microsoft.com/en-us/develop/media-services/ Azure Media Services Explorer http://aka.ms/amse Azure Media Player http://aka.ms/azuremediaplayer Azure Search https://azure.microsoft.com/en- us/documentation/articles/search-workflow/
  30. 30. webnextconf.eu

×