Archivo por meses: septiembre 2013

Smooth Streaming desde Windows Azure en Windows Phone

En mi anterior entrada explique cómo publicar contenido multimedia en Windows Azure. En este post, explico cómo consumir la URI generada por Azure desde un dispositivo Windows Phone. Voy a detallar cómo hacer lo mismo en sistemas de Windows Phone 7 y 8 pues es ligeramente diferente por el SDK que debemos utilizar.

Lo primero que debemos hacer es instalar Microsoft Media PlatformUna vez instalado este SDK debemos instalar el Development Kit Smooth Client de IIS pues Azure sirve sus contenidos multimedia mediante IIS Smooth Srtreaming.

Una vez tenemos esto nos vamos al Visual Studio 2010 y creamos un nuevo proyecto para Windows Phone 7.8 añadiendo las siguientes librerías,

  • Microsoft.SilverlightMediaFramework.Compatibility.Phone
  • Microsoft.SilverlightMediaFramework.Core.Phone
  • Microsoft.SilverlightMediaFramework.Plugins.Phone
  • Microsoft.SilverlightMediaFramework.Plugins.Progressive.Phone
  • Microsoft.SilverlightMediaFramework.Plugins.SmoothStreaming.Phone
  • Microsoft.SilverlightMediaFramework.Utilities.Phone
  • Microsoft.Web.Media.SmoothStreaming

Todas ellas ubicadas en las carpetas de C:\Program Files (x86)\Microsoft SDKs\Microsoft Silverlight Media Framework\v2.7\Silverlight For Phone\Bin a excepción de la librería del IIS que se encuentra en C:\Program Files (x86)\Microsoft SDKs\IIS Smooth Streaming Client\v2.0\Windows Phone.

Con estas librerías añadidas, podemos añadir estas dos referencias en el código XAML de nuestra página,

xmlns:Core="clr-namespace:Microsoft.SilverlightMediaFramework.Core;assembly=Microsoft.SilverlightMediaFramework.Core.Phone"
xmlns:Media="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core.Phone"

Y posteriormente, poner la propiedad SupportedOrientations y Orientation de la página en Landscape. Finalmente, en dónde deseemos poner nuestro vídeo, insertaremos este código con la URI de Azure y pulsaremos F5 para ver los resultados,

<Core:SMFPlayer>
<Core:SMFPlayer.Playlist>
<Media:PlaylistItem DeliveryMethod=”AdaptiveStreaming” MediaSource=”http://clibbdev.origin.mediaservices.windows.net/143c0bc2-24e5-40c8-ab69-b28f27eca237/Jaguar_Attacks_Crocodile_EXCLUSIVE_VIDEO.ism/Manifest”/>
</Core:SMFPlayer.Playlist>
</Core:SMFPlayer>

Y aquí van los resultados :)

Por cierto, mi vídeo no es de mucha cualidad pues está bajado de YouTube y transformado a MP4,y además, codificado. Decir que los vídeos, una vez tratados en Windows Azure, conservan la misma cualidad que tenían originalmente y que van muy rápidos.

En Windows Phone 8, prácticamente, es lo mismo pero usando Visual Studio 2012. A diferencia de lo mostrado deberemos instalar otra versión del Player Framework y de Smooth Client.

En este caso solo necesitaremos las librerías siguientes,

Microsoft.Web.Media.SmoothStreaming.dll
Microsoft.PlayerFramework.dll
Microsoft.PlayerFramework.Adaptive.dll

Posteriormente deberemos añadir las dos referencias en el código XAML y usar estas en nuestra MediaPlayer,

xmlns:mmppf="clr-namespace:Microsoft.PlayerFramework;assembly=Microsoft.PlayerFramework"
xmlns:adaptive="clr-namespace:Microsoft.PlayerFramework.Adaptive;assembly=Microsoft.PlayerFramework.Adaptive"
<Gridx:Name="MainGrid"Background="Transparent" <mmppf:MediaPlayerSource="http://clibbdev.origin.mediaservices.windows.net/143c0bc2-24e5-40c8-ab69-b28f27eca237/Jaguar_Attacks_Crocodile_EXCLUSIVE_VIDEO.ism/Manifest" <mmppf:MediaPlayer.Plugins>  <adaptive:AdaptivePlugin/>  </mmppf:MediaPlayer.Plugins>  </mmppf:MediaPlayer> </Grid>

Y ya estamos listos para hacer una APP para Windows Phone con Smooth Streaming usando nuestra infrastructura multimedia en Windows Azure.
Happy media :)

Hospedar contenido Multimedia en Windows Azure

En varias aplicaciones o escenarios de nuestras aplicaciones móviles, web u otras, nos podemos encontrar con la necesidad de usar contenido multimedia.

Windows Azure es la plataforma de servicios en la nube de Microsoft y la primera del mercado en incorporar este tipo de servicios. Con ellos puedes crear soluciones de distribución de multimedia escalables y capaces de transmitir vía streaming contenido multimedia a Adobe Flash, Android, iOS, XBOX, Windows… y casi en todos los dispositivos y plataformas existentes.

El secreto de este servicio es conocer la codificación de vídeos necesaria para poder trabajar con las diferentes plataformas pues en si, el resto de pasos, es muy sencillo.
Lo primero que debemos tener es una cuenta de Azure y acceder a nuestro portal.

Una vez estamos en nuestro portal debemos ir a la sección de Servicios Multimedia y crear una cuenta de servicios multimedia.

Windows Azure creación del servicio multimedia

Le damos a crear el servicio multimedia y en pocos minutos tendremos nuestro servicio multimedia preparado. Cómo siguiente punto, debemos subir contenido. Para ello nos vamos a la sección de contenido y le damos a cargar y nos esperamos unos minutos más, todo dependiendo de nuestra línea.

Hasta aquí todo bastante fácil.
Supongamos que en nuestro escenario de aplicación es una aplicación móvil que tenemos que desarrollar en diferentes plataformas; Windows Phone, Android y iOS. Estas tres plataformas, de fabricantes diferentes tienen diferentes codificaciones de vídeo. Nuestro fantástico servicio de Azure nos permite, una vez el contenido está subido, codificar el mismo para las diferentes plataformas.

 Cómo veis en la imagen anterior, he subido un vídeo en formato mp4. Ahora, si nos vamos en la sección de Codificar nos aparecerá una ventana con un desplegable con diferentes opciones para poder codificar el vídeo y reproducir el mismo en diferentes formatos para diferentes destinos.

La primera vez que vi tal listado me quedé anonadado y luego, gracias a @borisarm, aprendí a usar las diferentes opciones y espero que ahora podáis usar la mas adecuada según vuestro escenario,

  • Reproducir en PC/Mac (a través de Flash/Silverlight). Es un formato específico para que la reproducción del vídeo en un ordenador sobremesa con Windows o Mac reproduzcan el mismo en Flash o Silverlght dependiendo del plugin que tengan instalado.
  • Reproducir a través de HTML5 (IE/Chrome/Safari). Es un formato específico para reproducir el vídeo en navegadores sin necesidad de plugin.
  • Reproducir en dispositivos iOS y PC/Mac. Es la suma de la primera opción con un formato específico para reproducción en dispositivos iOS.

Estos son los valores preestablecidos y seguramente los mas usados, pero en aplicaciones complejas, debemos ir a los avanzados. En estos veremos que todos usan el formato H264 que es el estándar de codificación de vídeo aceptado por todos los dispositivos. Para saber más de cada una de ellas se detalla más específicamente aquí. Resumiendo el enlace,el cual os recomiendo, básicamente nos ofrece un conjunto de formatos resultantes con un CBR (Codificación constante de bits) mediante H265 (Estándar de codificación) en un formato de archivo re-producible con más o menos cualidad y una capacidad de adaptación a la pantalla en función del destino y necesidad.

En nuestro escenario para Windows Phone 7.8 deberemos usar H264 Smooth Streaming Windows Pohne 7 Series, para Android usaremos H264 Broadband con la resolución que necesitemos (En un móvil una 4/3 es correcta y en un tablet una 720p también. El 1080p es de FullHD y debemos tener cuidado si vamos por 3G) pues Android no soporta HLS (HTTP Live Streaming) o Smooth Sreaming y para iOS usaremos H264 Adaptative Bitare MP4 Set SD 4×3 para terminales iOS. Supongo que os preguntaréis porqué iOS tiene un servicio especifico. Bien, el tema está en que para certificar una aplicación que se suba al App Store de Apple, debe estar el audio codificado a baja velocidad con 56kbps.

Una vez situados con los formatos, vamos a seleccionar el nuestro y a crear un trabajo de codificación. En nuestro escenario, vamos a usar Windows Phone 7 por lo que seleccionaremos la última opción. Si os habeís fijado he nombrado el hecho de crear un trabajo de codificación.

Windows Azure tiene una cola de trabajo en background que se encarga de realizar la codificación del vídeo y la cual podemos consultar en todo momento.

Una vez termine, deberemos ir otra vez a la pestaña de contenidos, seleccionar el vídeo con la codificación correcta y publicar en la nube para que sea accesible.
Esta publicación nos dará una URL para que podamos usarla en nuestra aplicación móvil.

Y ahora… ¿Cómo reproduzco este vídeo en Windows Phone? En el siguiente articulo.

 Tener en cuenta que este artículo se basa en la versión 2.2.0.0 de Windows Azure Media Econder y que, a futuro, puede variar.
Happy encoder! 😉