Il mio Blog

Lo scorso 26 Settembre ho avuto il piacere di partecipare alla WEC, Web European Software.

Una sessione per me molto interessante è stata quella di Vito Flavio Lorusso, Technical Evangelist @Microsoft, dal titolo “Video from newbie to ninja“, di cui potete trovare le slide a questo link e che ringrazio.

Da acerbo conoscitore degli Azure Media Services ho deciso di approfondire il talk e di crearmi un mio portale dove poter distribuire video.

Per illustrarvi le procedure ho deciso di semplificare molto lo scenario proposto durante il talk: non ho sviluppato la parte di upload del video ma l’ho demandata totalmente al tool Azure Media Service Explorer e ho creato una pagina HTML per distribuire il video caricato. Questo passaggio servirà per testare le qualità e le capacità della piattaforma Azure.

Vediamo quindi i passaggi che ho fatto:

  • Mi sono connesso alla mia Subscription di Azure (se non l’avete, iscrivetevi qui per una prova gratuita!) all’indirizzo http://portal.azure.com del portale Preview
  • Ho creato uno storage account proprio per i miei media (con modello di distribuzione Classico)AMS00
  • Mi sono successivamente connesso al ‘vecchio’ Portale Azure (https://manage.windowsazure.com) per creare un nuovo Servizio Multimediale (O Media Service) in quanto sul portale Preview non è ancora gestita tale funzionalità.
    AMS10Nel wizard sopra sono stato attento a scegliere l’Account di Archiviazione (o Storage Account) creato in precedenza.
  • Ho quindi scaricato e installato Azure Media Service Explorer. Una volta avviato l’applicativo, ci vengono richiesti il nome dell’account del servizio multimediale (1) e la chiave d’accesso al servizio multimediale primario (2)
    AMS20che possiamo recuperare dal portale selezionando il nostro Servizio Multimediale e cliccando in basso su “Gestisci Chiavi“, azione che vi mostrerà la seguente finestra:
    AMS30
    Vi consiglio di cliccare su “<– Save to the list” nella finestra di Azure Media Service Explorer così da salvare le credenziali per i futuri usi.
  • Una volta cliccato su “Connect” sul Tool vedrete vari “Tabs” con un contatore affianco al nome. I Tab che per questo post sono importanti sono:
    1. Assets: contiene l’elenco di tutti i Media presenti.
    2. Jobs: contiene l’elenco di tutte le operazioni eseguite.
    3. Streaming endpoints: definisce gli endpoints con il quale distribuiremo i nostri media.
    4. Storage: contiene l’elenco degli Storage Accounts associati al Media Service. All’inizio il nostro contatore visualizzerà 1, ma potremo associarne altri.

    AMS40

  • Seleziono quindi un video da caricare: Dal menù Assets scelgo Upload  e poi From Local File (single file Assets). Selezionate quindi il video e il Tool procedura inizierà a fare l’upload del file nel vostro Media Service e nel vostro Storage. Nel Tab “Transferts” vedrete l’avanzamento di tale operazione
    AMS50
    Quando il processo sarà ultimato, vedrete nel Tab Assets il file caricato.La procedura di caricamento potremo farla anche dal Portale Azure cliccando su “Carica” in “Contenuto” nel Media Service
    AMS45
  • Ora è necessario effettuare una procedura di Encode del video. Sul Tab Assets cliccate con il tasto destro sul video e selezionate Encode e successivamente Encode Asset(s) with Media Encoder (system preset). Apparirà una nuova finestra dove selezionare “H264 Multiple Bitrate 720p” come encoding profile e cliccate su “Launch encoding”.
    AMS60
  • Verrà così creato un nuovo Job che si occuperà di eseguire la procedura di Encondig. Nel Tab Jobs ne vedrete l’avanzamento.
    AMS70
    La velocità di encoding dipende dalla capacità riservata (Basic, Standard, Premium) e dal numero di unità di Encoding. A questo link un dettaglio su come scalare.E’ possibile effettuare anche questa operazione dal Portale Azure:
    AMS65
  • Sul nuovo Asset generato, opzionalmente, possiamo generare delle Thumbnails, ovvero delle istantanee di fotogrammi, che potranno essere utilizzate dal player per facilitare la navigazione e la scelta del punto di interesse nel video. Per fare questo è necessario cliccare con il tasto destro sull’Asset e selezionare “Generate thumbnails for the asset(s)“. Verrà presentata una finestra dove scegliere ogni quanto effettuare la ‘foto’, che può essere un tempo (ogni 5 secondi) o una percentuale (ogni 10%)AMS80
  • Potremmo, opzionalmente e se il video contiene parlato in Inglese e/o Spagnolo (le uniche due lingue attualmente supportare), ricavare dall’audio il parlato in formato testo e visualizzarlo come sottotitolo. Azure Media Indexer è lo strumento che si occupa di tale meravigliosa feature e possiamo lanciarla dal Tool selezionando con il tasto destro l’Asset e cliccando su “Index asset(s) with Azure Media Indexer
  • Voglio adesso pubblicare il mio video. Tasto destro sull’Asset e poi “Publish” e nuovamente “Create a locator“. Nella finestra che appare noterai che è presente una scritta in rosso “Dynamic Packaging will not work as there is no scale unit streaming endpoint in this account“.
    Chiudete quindi la finestra e andate sul Tab “Streaming endpoints” dove ne è presente uno di nome “default” con zero ScaleUnits. Clicca con il tasto destro e seleziona “Streaming endpoint information and settings” e nel Tab Settings aumentate ad uno le Streaming Units. NB: Questa operazione comporterà dei costi (117,22€/mese), consiglio di riportare a zero questo valore dopo il test.Posso scalare le Unità anche da Portale Azure:
    AMS95
    e successivamenteAMS96
  • Torno quindi su “Publish” e creo il Locator. Noterai che non c’è più il messaggio in rosso.AMS100
  • Noterai che nella parte bassa del Tool, che funge da Log, sono comparsi degli URL: sono gli indirizzi al quale adesso l’asset è frubile. E’ inoltre presente un’icona nella colonna Publication nell’asset pubblicato.AMS110
  • Se clicco sul link “Smooth Streaming URL” mi viene chiesto di scaricare un file manifest. Questo file non è altro che un XML che contiene le informazioni del video che serviranno al player per usare lo streaming adattivo e per costruire le richieste da inviare al server, in base a frammenti “virtuali” in cui è suddiviso il video, e i bitrate disponibili.
  • AMS120
  • Passiamo ora a creare una Web App per pubblicare questo video. Nel Portale Azure Preview clicco su “Nuovo“, poi su “Web e dispositivi mobili” e poi su “App Web“. E’ più che sufficiente utilizzare un App Web con piano Free per la prova.Voglio quindi pubblicare un semplice HTML che conterrà il codice per utilizzare l’Azure Player per visualizzare il mio video.Nella Web App appena creata, clicco su “Strumenti” e nel pannello “Sviluppo” clicco su “Estensioni“. Aggiungo quindi l’estensione “Visual Studio Online” così da poter modificare comodamente i file presenti.AMS130e una volta installata l’estensione posso selezionarla e cliccare su “SfogliaAMS140
  • Creo il mio file index.html e ci incollo il seguente testo

    dove, alla riga 24, c’è da sostituire l’url con quello della “Smooth Streaming URL”.

  • Salvo il file index.html e navigo sulla mia Web App: Il risultato è il seguente.AMS150
  • Se non volete pubblicare la Web App, potete testare con il Tool il video pubblicato con il tasto destro sull’Asset, selezionando “Playback” e “with Azure Media Player” che vi rimanderà ad un sito dove è presente una preview simile a quanto mostrato sopra.
  • Visto il successo della pubblicazione, grazie anche alle slide presenti ad inizio articolo, posso adesso pensare a come creare la mia Web App per supportare il caricamento e la visualizzazione di più video… magari vedrete lo sviluppo in qualche articolo successivo 🙂

Buon divertimento 🙂

PS: Per i costi vi rimando a questo link. 

Comments ( 0 )