práctica en joomla de reproductor de streaming de video y audio

Universidad Internacional De La Rioja

Máster en Dirección e Ingeniería de Sitios Web

Práctica de Difusión de Con-

tenidos Multimedia en la

Web

Presenta: Héctor Garduño Real

México, 05 de abril de 2015

05 de abril de 2015 Página ii

ÍNDICE DE CONTENIDOS

1. INTRODUCCIÓN ..................................................................................................................................... 4

2. INSTALACIÓN Y CONFIGURACIÓN DE JOOMLA ...................................................................................... 4

3. INSTALACIÓN Y CONFIGURACIÓN DE ALL VIDEO SHARE ........................................................................ 8

3.1. Configurar All Video Share .......................................................................................................... 10

3.2. Agregar videos a All Video Share ............................................................................................... 12

4. INSTALACIÓN Y CONFIGURACIÓN DE RAR RADIO ................................................................................ 16

4.1. Instalación del módulo de apache Music Index .......................................................................... 16

4.2. Instalación de servidor de streaming con IceCast ....................................................................... 18

4.3. Instalación de RAR Radio ............................................................................................................ 20

5. CREACIÓN DE UN VIDEO EN ADOBE PREMIERE ................................................................................... 23

ÍNDICE DE IMÁGENES

ILUSTRACIÓN 1. INICIO DE LA INSTALACIÓN DE JOOMLA ................................................................................................... 4

ILUSTRACIÓN 2. CONFIGURACIÓN DE LA BD EN INSTALACIÓN DE JOOMLA ........................................................................... 5

ILUSTRACIÓN 3. CONFIGURACIÓN DE FTP EN INSTALACIÓN DE JOOMLA ............................................................................. 5

ILUSTRACIÓN 4. CONFIRMAR CONFIGURACIÓN ANTES DE INSTALAR JOOMLA ....................................................................... 6

ILUSTRACIÓN 5. FINALIZACIÓN DE INSTALACIÓN DE JOOMLA ............................................................................................ 6

ILUSTRACIÓN 6. SELECCIÓN DE IDIOMA ADICIONAL PARA INSTALAR A JOOMLA ..................................................................... 7

ILUSTRACIÓN 7. ELEGIR IDIOMAS PREDETERMINADOS EN JOOMLA ..................................................................................... 7

ILUSTRACIÓN 8. JOOMLA INSTALADO CORRECTAMENTE ................................................................................................... 7

ILUSTRACIÓN 9. INICIO DE SESIÓN DEL ADMINISTRADOR DE JOOMLA .................................................................................. 8

ILUSTRACIÓN 10. PANEL DE CONTROL DE JOOMLA ......................................................................................................... 8

ILUSTRACIÓN 11. SITIO WEB DE ALL VIDEO SHARE ......................................................................................................... 9

ILUSTRACIÓN 12. INSTALACIÓN DE COMPLEMENTO ALL VIDEO SHARE ............................................................................... 9

ILUSTRACIÓN 13. ALL VIDEO SHARE INSTALADO CORRECTAMENTE .................................................................................... 9

ILUSTRACIÓN 14. SITIO WEB DE JBCORE ................................................................................................................... 10

ILUSTRACIÓN 15. ESTABLECER UNA PLANTILLA COMO PREDETERMINADA .......................................................................... 10

ILUSTRACIÓN 16. EDITAR MENÚS EN JOOMLA ............................................................................................................. 10

ILUSTRACIÓN 17. ESTABLECER MENÚ HOME PARA QUE SEA VIDEO LAYOUT ...................................................................... 11

ILUSTRACIÓN 18. HACER QUE LOS VIDEOS SE MUESTREN EN LA PÁGINA DE INICIO ............................................................... 11

ILUSTRACIÓN 19. CONFIGURAR CUADRO DE BÚSQUEDA EL BLOG ..................................................................................... 11

ILUSTRACIÓN 20. INSERTAR CUADRO DE BÚSQUEDA EN EL BLOG ..................................................................................... 12

ILUSTRACIÓN 21. ABRIR LA EXTENSIÓN ALL VIDEO SHARE ............................................................................................. 12

ILUSTRACIÓN 22. PANEL DE ALL VIDEO SHARE ............................................................................................................ 12

ILUSTRACIÓN 23. CREACIÓN DE UNA NUEVA CATEGORÍA EN ALL VIDEO SHARE .................................................................. 13

ILUSTRACIÓN 24. AGREGAR UN VIDEO DESDE ALL VIDEO SHARE ..................................................................................... 13

ILUSTRACIÓN 25. ALL VIDEO SHARE FUNCIONANDO CON UN VIDEO ................................................................................. 14

05 de abril de 2015 Página iii

ILUSTRACIÓN 26. REPRODUCCIÓN DE UN VIDEO EN ALL VIDEO SHARE ............................................................................. 14

ILUSTRACIÓN 27. ALL VIDEO SHARE FUNCIONANDO CON DIVERSOS VIDEOS ...................................................................... 14

ILUSTRACIÓN 28. MUSIC INDEX FUNCIONANDO EN EL SERVIDOR ..................................................................................... 17

ILUSTRACIÓN 29. AGREGAR UN MENÚ QE EMBEBA LA URL DE MUSIC INDEX .................................................................... 17

ILUSTRACIÓN 30. MUSIC INDEX EMBEBIDO EN EL SITIO WEB DE JOOMLA .......................................................................... 18

ILUSTRACIÓN 31. SERVIDOR ICECAST RECIÉN INSTALADO ............................................................................................... 18

ILUSTRACIÓN 32. PÁGINA WEB DE RAR RADIO ........................................................................................................... 20

ILUSTRACIÓN 33. CARGAR E INSTALAR RAR RADIO EN JOOMLA ...................................................................................... 20

ILUSTRACIÓN 34. INSTALACIÓN EXITOSA DE RAR RADIO ............................................................................................... 21

ILUSTRACIÓN 35. ACTIVAR RAR RADIO PARA QUE SE MUESTRE EN LA PÁGINA PRINCIPAL ..................................................... 21

ILUSTRACIÓN 36. INSERTAR RAR RADIO EN UNA PÁGINA .............................................................................................. 21

ILUSTRACIÓN 37. RAR RADIO INSERTADO Y FUNCIONANDO EN LA PÁGINA PRINCIPAL ......................................................... 22

ILUSTRACIÓN 38. EDICIÓN DE VIDEO EN ADOBE PREMIERE ............................................................................................ 23

ILUSTRACIÓN 39. EXPORTACIÓN DEL PROYECTO A UN VIDEO EXTENSIÓN AVI .................................................................... 23

ILUSTRACIÓN 40. REPRODUCCIÓN DEL VIDEO JUSTO EN EL MOMENTO QUE APARECEN LOS CRÉDITOS DEL AUTOR ...................... 24

ILUSTRACIÓN 41. DIRECTORIO DEL PROYECTO CON TODOS LOS ARCHIVOS FUENTE, JUNTO CON LOS VIDEOS EN VARIOS FORMATOS24

Por: Héctor Garduño Real

Máster en Dirección e Ingeniería de Sitios Web Difusión de Contenidos Multimedia en la Web

05 de abril de 2015 Página 4 de 24

1. INTRODUCCIÓN

La presente práctica fue realizada sobre un servidor conectado a internet, usando sistema operativo

Ubuntu Server 12.04 y ubicado en la siguiente dirección:

http://52.10.233.12/joomla/

Cabe resaltar que se obviaron procedimientos en Linux no esenciales para la asignatura pero que están

implícitos, tales como comandos para asignar permisos a directorios, descargar, mover archivos, etc.

2. INSTALACIÓN Y CONFIGURACIÓN DE JOOMLA

Lo primero que debe de realizarse una vez que se descarga Joomla de la página oficial, es descom-

primir el archivo, y ubicarlo dentro de la carpeta del servidor web. Hecho esto, se puede proceder a

iniciar la instalación con solo poner en la URL la ubicación de Joomla, por ejemplo en para esta

práctica /var/www/html/joomla equivale a www.dominio.com/joomla con lo cual se iniciará el pro-

ceso de instalación como se ve en la imagen. Aquí se deben introducir datos como el usuario admi-

nistrador de Joomla, e identificar el sitio.

Ilustración 1. Inicio de la instalación de Joomla

Posteriormente el segundo paso consistirá en configurar la base de datos con la que trabajará

Joomla, para ello es necesario que se haya creado previamente la base de datos. Ya que la practica

fue hecha sobre un servidor Linux, los comandos usados fueron los siguientes, uno de Linux y otro

de mysql respectivamente

$ mysql –u root –p

http://52.10.233.12/joomla/




mysql> create database joomla;

Ilustración 2. Configuración de la BD en instalación de Joomla

El tercer paso es indicar si se desea utilizar el protocolo de transferencia de archivos, el cual

no se ocupará para esta práctica, por lo que se dejará desactivado

Ilustración 3. Configuración de FTP en instalación de Joomla

En el paso final antes de proceder con la instalación es confirmar todos los datos configurados

anteriormente, sumado con la opción de incluir un blog o sistema de ejemplo para que pueda ser

modificado por aquellos que no tienen muchos conocimientos en Joomla.




Ilustración 4. Confirmar configuración antes de instalar Joomla

Al dar clic en el botón “Instalar”, comenzará el proceso de configuraciones, el cual durará

unos cuantos segundos, hasta que aparezca lo siguiente.

Ilustración 5. Finalización de instalación de Joomla

Como se puede apreciar en la ilustración, ya que una vez instalado Joomla es en inglés, se

ofrece la posibilidad de iniciar la instalar más idiomas, por lo que se da clic en el botón para instalar

el idioma Español.




Ilustración 6. Selección de idioma adicional para instalar a Joomla

Debe seleccionarse el idioma, y posteriormente en el segundo paso elegir si se desea dicho

idioma para la interfaz de administración de Joomla y para el sitio (blog) de Joomla. Para esta práctica

se emplea para ambos, como se puede apreciar en la imagen.

Ilustración 7. Elegir idiomas predeterminados en Joomla

El último paso será solicitará también la eliminación de la carpeta de instalación de Joomla,

y aunque se puede hacer manualmente, se ofrece desde la misma interfaz una opción para eliminarla.

Ilustración 8. Joomla instalado correctamente




Para ingresar al panel de administración Joomla se puede hacer desde la carpeta administrator, tal

como se puede observar en la siguiente imagen.

Ilustración 9. Inicio de sesión del administrador de Joomla

El panel de control de Joomla tendrá la siguiente interfaz por defecto.

Ilustración 10. Panel de control de Joomla

3. INSTALACIÓN Y CONFIGURACIÓN DE ALL VIDEO SHARE

El complemento “All video share” sirve para implementar toda una estructura de videos usando

Joomla, algo similar a Youtube. Aunque hay cuatro formas de realizar la instalación aquí se usará la

de descargar el archivo e instalarlo manualmente, para ello primero será necesario ir a la página del

complemento y descargarlo.




Ilustración 11. Sitio web de All Video Share

A continuación deberá irse al gestor de extensiones de Joomla, desde el menú superior, una

vez ahí, usando la opción de “Subir paquete” se deberá subir e instalar el complemento de All Video

Share en su versión 2.3, tal como se muestra en la imagen.

Ilustración 12. Instalación de complemento All Video Share

Si el proceso de instalación se ha realizado correctamente, se deberá mostrar un mensaje y un

resumen de la instalación.

Ilustración 13. All Video Share instalado correctamente




Siguiendo el mismo procedimiento, se descargará JBCore para usarlo como tema para la interfaz, ya

que fue el propuesto en la misma práctica. Así pues, habrá que ingresar a la página, descargar la

extensión y luego instalarla en Joomla

Ilustración 14. Sitio web de JBCore

Una vez instalado el tema, habrá que dirigirse al “Gestor de plantillas” para activar JBCore para

ponerlo como predeterminado, para ello dando clic en la estrella.

Ilustración 15. Establecer una plantilla como predeterminada

3.1. Configurar All Video Share

Para hacer que una lista de videos aparezca en la página principal, habrá que dirigirse al menú para

editar el menú que viene por defecto llamado “Home”, en el cual se debe dar clic para modificarlo.

La primera opción a modificar en él es hacer que se comporte como una página con la estructura

necesaria para mostrar los videos de All Video Share, tal como se muestra en las siguientes imágenes.

Ilustración 16. Editar menús en Joomla




Ilustración 17. Establecer menú Home para que sea Video Layout

Una vez que se ha establecido como “Video Layout” deberán realizarse las siguientes modi-

ficaciones:

Cambiar el nombre “Home” por “Explorar Videos”

Desde la pestaña “Asignación de módulos” activar y configurar “All Video Share Search”

Ilustración 18. Hacer que los videos se muestren en la página de inicio

Aprovechando la opción ya que se encuentra aquí mismo, se agregará el cuadro de búsquedas confi-

gurándolo desde la pestaña “All Video Share Search”

Ilustración 19. Configurar cuadro de búsqueda el blog




Ilustración 20. Insertar cuadro de búsqueda en el blog

3.2. Agregar videos a All Video Share

Para agregar videos será necesario dirigirse primero al menú “Componentes” y desde ahí “All Video

Share”. Ya estando en la página de esta extensión, es necesario primero que se creen primero las

categorías y posteriormente los videos, tal como se muestra en las imágenes

Ilustración 21. Abrir la extensión All Video Share

Para agregar la categoría basta con hacer clic sobre el botón de “Categorías” y aunque hay

otras opciones, la principal es la de asignar un nombre a la categoría.

Ilustración 22. Panel de All Video Share




Ilustración 23. Creación de una nueva categoría en All Video Share

Una vez que se tienen las categorías deseadas se procederá a insertar los diferentes videos, para lo

cual hay diversas formas, como subir un archivo de video, desde un enlace de Youtube, etc., en este

caso se empleará la opción de Youtube, para lo cual solo bastará con dar el nombre y url del video,

ya que los otros campos aunque pudieran personalizarse, se autocomplementaran.

Una vez agregado el video, debería visualizarse como en la siguiente imagen.

Ilustración 24. Agregar un video desde All Video Share




Ilustración 25. All Video Share funcionando con un video

Ilustración 26. Reproducción de un video en All Video Share

Ilustración 27. All Video Share funcionando con diversos videos




También se puede configurar el módulo “All Video Share Player” desde la página principal

(Explorar Videos) para que se muestre un video en la parte superior de la página. Esto se hace desde

el apartado que se muestra en la Ilustración 19, eligiendo la ubicación correspondiente del tema JBCo-

res.




4. INSTALACIÓN Y CONFIGURACIÓN DE RAR RADIO

RAR Radio es una extensión que permite incrustar en la página un reproductor de streaming, su pro-

ceso de instalación es muy sencillo, pero adicionalmente aquí se agregarán también servicios de strea-

ming.

4.1. Instalación del módulo de apache Music Index

Considerando que ya se encuentra instalado y actualizado Apache, el proceso es el siguiente.

Instalar las librerías de audio con "

$ sudo apt-get install libmad0-dev libid3tag0-dev libogg-dev libvorbis-dev libflac-dev libar-

chive-dev

Instalar el módulo con

$ sudo apt-get install libapache2-mod-musicindex

Crear un archivo para que el módulo maneje su caché con

$ sudo touch /tmp/musicindex

Crear una carpeta para la música en el servidor web y copiar los archivos, por ejemplo

"/var/www/html/musica/"

Editar el archivo de configuración del módulo recién instalado para que contenga lo siguiente:

$ sudo vim /etc/apache2/mods-available/musicindex.conf

Alias /musicindex "/usr/share/mod_musicindex" #Aqui se crea un alias con la ruta

del los archivos de musicindex con la hoja de estilos y botones/imagenes

<Directory "/var/www/html/musica"> #Carpeta sobre la que va a actuar musicindex

#Aquí todas las configuraciones de sobre cómo se comportará musicindex, no tiene

que ir todo esto, sino que solo lo necesario segun las necesidades

Allow from all

Options Indexes MultiViews FollowSymlinks

AllowOverride Indexes

MusicIndex On +Stream +Download +Search -Rss -Tarball

MusicSortOrder album disc track artist title length bitrate freq filetype filename uri

MusicFields title artist album length bitrate

MusicPageTitle Myname

MusicDefaultCss musicindex.css

MusicDirPerLine 3

MusicDefaultDisplay HTML

MusicIndexCache file://tmp/musicindex

MusicIceServer [ice.domain.my]:8000

MusicCookieLife 300

</Directory>

Finalmente hay que reiniciar apache para que cargue el nuevo módulo

sudo service apache2 restart

Finalmente el resultado debería ser como en la siguiente imagen.




Ilustración 28. Music Index funcionando en el servidor

Así pues, se usará esta página para agregar un menú al sitio web de Joomla desde donde se

puedan reproducir vía streaming las pistas de audio. Para ello bastará con agregar un nuevo menú

(como se mostró anteriormente) el cual embeba una URL, las configuraciones y resultado deberán

quedar como se muestran en las dos siguientes imágenes.

Ilustración 29. Agregar un menú que embeba la URL de Music Index




Ilustración 30. Music Index embebido en el sitio web de Joomla

4.2. Instalación de servidor de streaming con IceCast

El proceso de instalación consiste en los siguientes pasos

Ilustración 31. Servidor IceCast recién instalado

Instalar icecast para hacer el servidor de streaming, e instalar ices2 para tener una lista de

reproducción y que el streaming sea en diferido. También se instalan unas herramientas de

audio.

$ sudo apt-get install icecast2 ices2 vorbis-tools

Se edita el archivo de configuración de icecast con los siguientes parámetros

$ sudo vi /etc/icecast2/icecast.xml

<authentication>

<source-password>password</source-password>

<relay-password>password</relay-password>

<admin-user>admin</admin-user>




<admin-password>password</admin-password>

</authentication>

<hostname>localhost</hostname>

<listen-socket>

<port>8000</port>

</listen-socket>

Se edita el archive de demonio de icecast para que se inicie el servicio automáticamente, para

lo cual debe cambiarse a “ENABLE=true”

$ sudo vi /etc/default/icecast2

Para que los cambios surtan efecto hay que reiniciar el servidor

$ sudo /etc/init.d/icecast2 resstart

Ya que ices2 no hace una instalación completa, es necesario crear una carpeta y copiar en

ella una lista de reproducción que incluye por default.

$ sudo mkdir /etc/ices2

$ sudo cp /usr/share/doc/ices2/examples/ices-playlist.xml /etc/ices2/

Para que el servicio funcione adecuadamente, debe configurarse la lista de reproducción para

contener lo siguiente.

$ sudo vi /etc/ices2/ices-playlist.xml

<background>1</background>

<metadata>

<name>Héctor Garduño Real</name>

<genre>UNIR</genre>

<description>Sito web de streaming</description>

</metadata>

<param name="file">/home/ubuntu/playlist.txt</param>

<param name="random">1</param>

<param name="once">0</param>

<hostname>localhost</hostname>

<port>8000</port>

<password>password</password>

<mount>/music.ogg</mount>

Posteriormente será necesario crear la carpeta de registros para ices

$ sudo mkdir /var/log/ices




Y crear un archivo que sea el playlist que tenga todas las rutas de los archivos de música

$ sudo gedit /home/ubuntu/playlist.txt

/home/ubuntu/cacncion1.ogg

/home/ubuntu/cacncion1.ogg

Luego hay que cargar la lista de reproducción al streaming

$ sudo ices2 /etc/ices2/ices-playlist.xml &

4.3. Instalación de RAR Radio

Para realizar la instalación de esta extensión se procede del mismo modo que se hizo anteriormente

con “All Video Share” y con “JBControl”, es decir, ir a la página, descargar el archivo, y luego desde

el panel de control de Joomla, instalarlo.

Ilustración 32. Página web de RAR Radio

Ilustración 33. Cargar e instalar RAR Radio en Joomla

Si la instalación se realizó sin problemas debería mostrarse lo siguiente.




Ilustración 34. Instalación exitosa de RAR Radio

Para configurar RAR Radio para que aparezca en la página principal debe realizarse lo siguiente. Ir a

la edición del menú llamado “Explorar Videos” y ahí, desde la pestaña “Asignación de módulos”

activar RAR Radio con los parámetros que se muestran a continuación. RAR Radio debe tener la

URL del servidor IceCast recién instalado y la posición “lower” del tema JBCore

Ilustración 35. Activar RAR Radio para que se muestre en la página principal

Ilustración 36. Insertar RAR Radio en una página




El resultado de instalar RAR Radio es como el que se muestra en la siguiente imagen.

Ilustración 37. RAR Radio insertado y funcionando en la página principal




5. CREACIÓN DE UN VIDEO EN ADOBE PREMIERE

El video fue realizado usando Adobe Premiere que incluye audios, algunos textos y por supuesto el

video mismo.

Ilustración 38. Edición de video en Adobe Premiere

Ilustración 39. Exportación del proyecto a un video extensión AVI




Ilustración 40. Reproducción del video justo en el momento que aparecen los créditos del autor

Ilustración 41. Directorio del proyecto con todos los archivos fuente, junto con los videos en varios formatos

práctica en joomla de reproductor de streaming de video y audio

Technology