Smooth Streaming con Microsoft Silverlight Media Framework (SMF)

Haciendo pruebas para un amigo que me comentó acerca de las posibilidades de hacer streaming de video con Internet Information Services 7 (IIS 7) me acordé que en el MIX10 se habló del reproductor realizado en Silverlight para los Juegos Olímpicos de Invierno de Vancouver.

 Este reproductor está desarrollado utilizando el open source Silverlight Media Framework que  podemos descargar de Codeplex y que nos permite utilizar el IIS Smooth Streaming.  Tal y como vemos en codeplex,  SMF está basado en el Smooth Streaming Player Developer Kit.

 

 

 

Conociendo esto, voy a indicar en unos sencillos pasos como configurar el IIS para hacer streaming. Luego,  a partir de un recurso multimedia  que tengamos como por ejemplo un video en formato AVI, vamos a utilizar el Expression Encoder 3 para codificar el video AVI al formato deseado.

Finalmente veremos cómo utilizar el reproductor para personalizarlo y poder ver el video en streaming alojado en el IIS desde cualquier navegador en cualquier sitio.

 

Lo primero es configurar el IIS agregándole la Smooth Streaming extensión. Para ello  descargamos el IIS Media Services 3.0 desde aquí teniendo en cuenta si nuestro sistema es de 32 o 64 bits. (para más información o problemas de instalación ver aquí )

Una vez instalado abrimos el administrador de IIS y en la parte inferior al hacer clic en nuestro sitio web por defecto podemos ver la sección de media.

 

Picando en Smooth Streaming podemos ver las características como número de peticiones e intervalos, caché de servidor…

 

 

Una vez tenemos listo el IIS vamos a tratar el video AVI para poder hacer streaming. Vamos a aplicarle un códec para poder facilitar su transmisión vía streaming.

Para ello abrimos el Microsoft Expression Encoder 3 e importamos el video al trabajo (menú Archivo > Importar)

 

Una vez tenemos el video totalmente importado (tarda dependiendo de su peso), vamos a elegir los códecs de salida de audio y video…

 

En el panel de la derecha en Sistema elegimos Codificación para Silverlight  y Transmisión para secuencias suave IIS. Luego en la pestaña Codificar:

Elegimos como formato de salida Trasmisión por secuencias suave IIS y el códec de video H.264 y el de audio AAC.

Finalmente en la pestaña Salida podemos seleccionar si queremos ver alguna miniatura que represente el video (un fotograma en particular o personalizarlo), podemos usar las plantillas que nos ofrece Expression Encoder 3 de reproductor y debemos elegir el nombre del archivo multimedia. Por ejemplo {Nombre de archivo original}. {Extensión predeterminada}.  Le decimos el directorio de salida (tenemos que tener presente que este directorio tiene que tener permisos de escritura, ojo si seleccionamos directamente algún directorio dentro de Inetpub.

En la pestaña Metadatos podemos poner el título, Autor,… del video.

 

Una vez todo listo le damos a Codificar  y a esperar, que lleva su tiempo.

 

 

 

En la siguiente pantalla muestro los archivos generados en el proceso:

 

 

 

Aunque el Expression Encoder 3  ya nos ha generado unas plantillas de reproductor (archivos Default.html, MediaPlayerTemplate.xap y SmoothStreaming.xap) ,nosotros vamos a crear un reproductor utilizando el SMF.

Creamos un nuevo proyecto Silverlight > Aplicación de Silverlight. Y elegimos hospedarla en un proyecto de aplicación ASP.NET (en nuestro caso).

 

 

 

Tendremos creados los dos proyectos siguientes:

 

 

 El primero es el proyecto Silverlight y el segundo el proyecto web que va a hospedar el reproductor.

 Lo primero que hacemos es añadir las referencias que necesitamos en el proyecto Silverlight. Añadimos las referencias del SMF y además la del Microsoft Media Smooth Streaming.

 

  Las que vamos a utilizar en nuestro control son:

·         Microsoft.SilverlightMediaFramework.Player

·         Microsoft.Web.Media.SmoothStreaming

 

Ahora nos vamos a MainPage.xaml y añadimos los namespaces que vamos a utilizar:

xmlns:p=”clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player”

    xmlns:s=”clr-namespace:Microsoft.Web.Media.SmoothStreaming;assembly=Microsoft.Web.Media.SmoothStreaming”

 

y añadimos el reproductor:

<p:Player>

            <s:SmoothStreamingMediaElement

                AutoPlay=”True” SmoothStreamingSource=”http://localhost/IISSmooth/GreenZone.ism/Manifest” />

        </p:Player>

Vemos que el element Player pertenece al namespace p correspondiente al Player mientras que el elemento que nos permite hacer smoothstreaming pertenece al namespace s.

He indicado que comience automáticamente y le indico la ruta donde se encuentra el Manifiesto del archivo que voy a reproducir. En este ejemplo he creado un directorio virtual llamado IISSmooth donde almaceno los videos.

Y para hacer las pruebas me he creado una aplicación en IIS que he llamado PruebaSMF.Web que contiene el código que hemos desarrollado.

 

 

 Vemos que la aplicación Silverlight la he incluido también en el IIS dentro de la carpeta PruebaSMF.

 

Luego abriendo un navegador y poniendo la url http://localhost/PruebaSMF.Web/PruebaSMFTestPage.aspx  podemos ver el ejemplo en funcionamiento.

 

 

 Con este ejemplo sencillo he intentado mostrar cómo utilizar este framework open source (SMF) para poder crear fácilmente un reproductor que consuma recursos vía streaming.

Espero sea de utilidad.

Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *