diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1377554 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.swp diff --git a/Dockerfile b/Dockerfile index 346f0b6..bbbe612 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,4 +19,7 @@ RUN mkdir -P /var/www/assets/ COPY assets/styles-mirar.css /var/www/html/assets/ COPY assets/video-js-7.10.2.min.css /var/www/html/assets/video-js.min.css COPY assets/video-js-7.10.2.min.js /var/www/html/assets/video-js.min.js -COPY assets/jquery-3.5.1.slim.min.js /var/www/html/assets/jquery-slim.min.js +COPY assets/jquery-3.5.1.slim.min.js /var/www/html/assets/jquery-slim.min.js + +# copiar la configuración por defecto de nginx con nuestros cambios incluidos +COPY nginx-site-default.conf /etc/nginx/sites-available/default diff --git a/README.md b/README.md index 08b227c..12a44a7 100644 --- a/README.md +++ b/README.md @@ -6,20 +6,13 @@ title: streaming directo servido a traves de sintoniza.sindominio.net un canal para hacer streming video y audio. -## container Labo03 - -Elegimos instalarlo en [txirbilenea]({{< ref "txirbilenea.md" >}}) junto a [mumble]({{< ref "mumble.md" >}}) y [meetjitsi]({{< ref "meetjitsi.md" >}}) ya que así se convierte en nuestro server de comunicación, - -## instalación servidor Hemos seguido los pasos documentados por [guifi.net + exo](https://gitlab.com/guifi-exo) y explicados aqui (https://gitlab.com/guifi-exo/wiki/-/blob/master/howto/real-time-media/rtmp_streamer.md) Usaremos el estandar [RTMP](https://en.wikipedia.org/wiki/Real-Time_Messaging_Protocol) Real-Time Messaging Protocol. ---- -> OJO: ADAPTAR MANUAL PARA DOCKER ---- +# creación del Dockerfile ## Install rtmp mod for nginx @@ -29,11 +22,9 @@ apt install libnginx-mod-rtmp ## Preparar nginx para estrimear en `rtmp` -_En este ejemplo se presume que `nginx` es el servidor web por defecto y que usa la direccón `ejemplo.com`_ - _Nginx puede estrimear codecs de HSL y Dash/MPEG, en **este ejemplo** únicamente veremos **HLS**_ -en `/etc/nginx/nginx.conf` añade esto: +en `/etc/nginx/nginx.conf` añadimos la configuración del fichero `nginx-rtmp.conf` ``` rtmp { @@ -47,7 +38,7 @@ rtmp { live on; # enciende HLS hls on; - hls_path /var/www/html/live.ejemplo.com/hls/; + hls_path /var/www/html/live.sindominio.net/hls/; # ajustes de hls hls_fragment 3; hls_playlist_length 60; @@ -60,136 +51,46 @@ rtmp { ``` ## Prepara los directorios de tu web -Crea `/var/www/html/live.ejemplo.com` y los subdirectorios `hls` donde los trozos de vídeos serán almacenados: +La pagina se sirve desde `/var/www/html/` para automatizar el proceso de creación de Docker y usar la configuración por defecto de Nginx en Debian. + +Crea el subdirectorio `/var/www/html/hls` donde los trozos de vídeos serán almacenados: ```bash -mkdir -P /var/www/html/live.ejemplo.com/hls +mkdir -P /var/www/html/live.sindominio.net/hls ``` - -## nginx: aplica los cambios +le damos permisos de lectura, escritura y ejecución a cualquier user ya que montaremos el volumen fuera del docker ```bash -nginx -t -nginx -s reload +chmod 777 /var/www/html/hls ``` -## Prepara tu web -Tendrás que descargar los siguientes ficheros y guardarlos en `/var/www/html/live.example.org/` : +## Prepara tu web -* video.min.js - Apache license 2 https://videojs.com/ -* video-js.min.css - Apache license 2 https://videojs.com/ -* jquery-slim.min.js - MIT license https://jquery.com/ +Ponemos la página `index.html` en `/var/www/html/` para que la sirva por defecto. +Esta página llama a los ficheros js que permiten recibir y enviar video así como los css que dan forma gráfica y de usabilidad a la página. -**videojs**: iremos a https://github.com/videojs/video.js/releases, bajaremos la última versión pero utilizaremos únicamente `video-js.min.css` y `video.min.js`. Si queremos traducciones también el directorio `lang/` +Por organización y limpieza creamos el directorio `assets/` donde pondremos los siguiente ficheros: -**jquery** : Bajaremos la última versión minimizada desde https://jquery.com/download/ y la renombraremos `jquery-slim.min.js` +* styles-sintoniza.css - diseño de nuestra página +* video-js.min.css - estilos del player (botones, ventana, volumen, etc...) +* video-js.min.css - interacción js del player, tanto para recibir como para enviar video +* jquery-slim.min.js - dependencia de jquery por parte del js del player +obtención de los ficheros: +**styles-sintoniza.css** los escribimos. -```bash -cd /tmp/ -wget https://github.com/videojs/video.js/releases/download/v7.10.2/video-js-7.10.2.zip -unzip video-js-7.10.2.zip -d video-js-7.10.2 -cp video-js-7.10.2/video-js.min.css video-js-7.10.2/video.min.js /var/www/html/live.ejemplo.com/ -wget https://code.jquery.com/jquery-3.5.1.slim.min.js -mv /tmp/jquery-3.5.1.slim.min.js /var/www/html/live.ejemplo.com/jquery-slim.min.js -``` -Crearemos `/var/www/html/live.ejemplo.com/index.html` con un contenido similar al de https://live.autistici.org/index.html +**videojs**: iremos a https://github.com/videojs/video.js/releases, bajaremos la última versión pero utilizaremos únicamente `video-js.min.css` y `video.min.js`. Si queremos traducciones también el directorio `lang/` -```html - - - - - - - live.ejemplo.com - - - - -
-
-

live.ejemplo.com

-
- - - - - -
- - - - - -``` -Puedes crear tu propia hoja de estilos **css** y añade en `index.html` - esta línea `` en la sección `header` tras la línea ``: -```bash -mkdir -p assets/css/ -vim /var/www/html/live.ejemplo.com/assets/css/example_com-static-app.css -``` +**jquery** : Bajaremos la última versión minimizada desde https://jquery.com/download/ y la renombraremos `jquery-slim.min.js` -Puedes incluir por ejemplo la anchura para el player de video: -```css -/*only for video-js and live streaming*/ -@media screen { - .contain{ - width:100vw; - padding: 1rem; - } - .live-streaming .video-js, .live-streaming .video-dimensions { - width: calc(30vw * 3); - height: calc(15vw * 3); - } -} -@media screen and (min-width:768px) { - .contain{ - max-width:970px; - } - .live-streaming .video-js, .live-streaming .video-dimensions { - width: calc(30vw * 2); - max-width:970px; - height: calc(15vw * 2); - max-height:calc(970px / 2); - } -} -``` ## Servir la nueva web con nginx _en este ejemplo asumimos que ya tienes los certificados creados con letsencrypt_ -en el fichero `/etc/nginx/sites-available/live.ejemplo.com` añade bajo el bloque `443 ssl`: +En el fichero por defecto añadimos el siguiente codigo +`/etc/nginx/sites-available/default` añade bajo el bloque `443 ssl`: ``` location /hls { @@ -220,7 +121,7 @@ en el fichero `/etc/nginx/sites-available/live.ejemplo.com` añade bajo el bloqu ### En el servidor * controla tu firewall y permite la entrada de trafico por el puerto 1935 -* haz que `/var/www/html/live.ejemplo.com/` y sus contenidos puedan ser leidos por `www-data` +* haz que `/var/www/html/live.sindominio.net/` y sus contenidos puedan ser leidos por `www-data` * comprueba y reinicia nginx `nginx -t` y luego `nginx -s reload` @@ -230,7 +131,7 @@ ahora puedes instalarte [OBS](https://obsproject.com/) `apt install obs-studio` -Envia el directo a `rtmp://live.ejemplo.com:1935/entrada/stream_key` y miralo en `https://live.ejemplo.com/#stream_key` +Envia el directo a `rtmp://live.sindominio.net:1935/entrada/stream_key` y miralo en `https://live.sindominio.net/#stream_key` # Extra @@ -241,7 +142,7 @@ Envia el directo a `rtmp://live.ejemplo.com:1935/entrada/stream_key` y miralo en * Nginx te permite ajustar el HLS, instrucciones: https://nginx.org/en/docs/http/ngx_http_hls_module.html * Si quieres que la gente pueda recibir el stream directamente comenta la línea "deny play all;" -* Puedes enviar el stream recibido directammente en `rtmp://live.ejemplo.com/entrada/stream_name` a un servicio externo como _youtube.com_ añadiendo `push rtmp://a.rtmp.youtube.com/live2/stream_key;` +* Puedes enviar el stream recibido directammente en `rtmp://live.sindominio.net/entrada/stream_name` a un servicio externo como _youtube.com_ añadiendo `push rtmp://a.rtmp.youtube.com/live2/stream_key;` * Puedes enviar y recibir streams simultáneamente a otros lugares o páginas web añadiendo más bloques de `aplicacones` con diferentes nombres ## Otras referencias @@ -250,7 +151,7 @@ Envia el directo a `rtmp://live.ejemplo.com:1935/entrada/stream_key` y miralo en ## Más de un dominio en el mismo servidor -Si quieres enviar stream a más de un dominio desde el mismo servidor (ejemplo.com ejemplo2.com) y no mezclar los _streams_key_: +Si quieres enviar stream a más de un dominio desde el mismo servidor (sindominio.net ejemplo2.com) y no mezclar los _streams_key_: edita `nginx.conf` @@ -258,13 +159,13 @@ Crea más aplicaciones bajo la sección `rtmp`: Como nombre de la aplicación usaremos `entrada-ejemplo` and `entrada-ejemplo2` pero puedes poner lo que quieras, cada una de ellas apuntando a lugares diferentes donde el `HLS` estará disponible. Sujerimos utilizar una palabra específica para que no haya conflictos con en la aplicación. ``` -# application directory for ejemplo.com +# application directory for sindominio.net application entrada-ejemplo { access_log /var/log/nginx/rtmp-example-access.log; live on; # Turn on HLS hls on; - hls_path /var/www/html/live.ejemplo.com/hls/; + hls_path /var/www/html/live.sindominio.net/hls/; # finetune hls hls_fragment 3; hls_playlist_length 60; @@ -291,14 +192,14 @@ En Nginx edita los **sites-available** y **site-enabled** con el nuevo `ejemplo2 copia la estructura de ficheros del dominio ya configurado anteriormente. ```bash -cp -r /var/www/html/live.ejemplo.com /var/www/html/live.ejemplo2.com +cp -r /var/www/html/live.sindominio.net /var/www/html/live.ejemplo2.com chown -R www-data:www-data /var/www/html/ejemplo2.com ``` Tenemos que editar ambos `index.html` y las URL del servidor OBS para el RMTP reemplazadno `entrada` por `entrada-ejemplo` y/o `entrada-ejemplo2`. - ~rtmp://live.ejemplo.com/entrada/~ + ~rtmp://live.sindominio.net/entrada/~ - `rtmp://live.ejemplo.com/entrada-ejemplo/` + `rtmp://live.sindominio.net/entrada-ejemplo/` `rtmp://live.ejemplo2.com/entrada-ejemplo2/` @@ -317,7 +218,7 @@ reemplazar la salida `src:` v.src({type: 'application/x-mpegURL', src: '/hls/LOQUESEAQUEQUIERAS.m3u8'}); ``` -Nuestra **URL de rtmp** tiene que ser: `rtmp://live.ejemplo.com/entrada/` y el **stream_key** será `LOQUESEAQUEQUIERAS` +Nuestra **URL de rtmp** tiene que ser: `rtmp://live.sindominio.net/entrada/` y el **stream_key** será `LOQUESEAQUEQUIERAS` de este modo podemos dar la URL exacta a otras personas para ofrecer nuestro servicio o evitar abusos en el servirdor. diff --git a/assets/styles-mirar.css b/assets/styles-sintoniza.css similarity index 100% rename from assets/styles-mirar.css rename to assets/styles-sintoniza.css diff --git a/index.html b/index.html index 005a05a..1f133b2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ sintoniza.sindominio.net - tu streaming en sindominio - plataforma de emisiones en directo autogestionada por sindominio.net - + diff --git a/nginx.conf b/nginx-site-default.conf similarity index 100% rename from nginx.conf rename to nginx-site-default.conf