reescritas las instruccions y añadidos ficheros

main
jorge 1 year ago
parent 2e309e88d4
commit 0e75f7f8ad
No known key found for this signature in database
GPG Key ID: 0C20E2ED33727336
  1. 1
      .gitignore
  2. 5
      Dockerfile
  3. 165
      README.md
  4. 0
      assets/styles-sintoniza.css
  5. 2
      index.html
  6. 0
      nginx-site-default.conf

1
.gitignore vendored

@ -0,0 +1 @@
*.swp

@ -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

@ -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
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live.ejemplo.com</title>
<link rel="stylesheet" href="video-js.min.css">
<style type="text/css">
img { border: 0px; }
</style>
</head>
<body class="">
<main class="contain">
<header class="">
<h1 id="title">live.ejemplo.com</h1>
</header>
<content class="live-streaming">
<video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
<div id="instructions" style="display:none;">
<p>
Para crear un nuevo stream, elije un nombre único para ello y ponlo en tu sofware de emisión para que envie la señal a rtmp://live.ejemplo.com/entrada/</i> con una llave (strem key) <i>nombre_stream</i> que tu quieras.
</p>
<p>
En ese momento podrás ver el directo en:
<i>https://live.ejemplo.com/#<b>nombre_stream</b></i>.
</p>
<p>
Tambien puedes apuntar tu visor de video favorito a la URL
<i>https://live.ejemplo.com/hls/<b>nombre_stream</b>.m3u8</i>. Usa este mismo enlace para incrustar el vídeo en tu web.
</p>
</div>
</content>
<footer class="">
</footer>
</main>
<script src="jquery-slim.min.js"></script>
<script src="video.min.js"></script>
<script>
$(function() {
if (window.location.hash) {
var name = window.location.hash.substr(1);
console.log('playing "' + name + '"');
$('#title').text('live.ejemplo.com - ' + name);
var v = videojs('video');
v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
} else {
$('#video').hide();
$('#instructions').show();
}
});
</script>
</body>
</html>
```
Puedes crear tu propia hoja de estilos **css** y añade en `index.html`
esta línea `<link rel="stylesheet" href="assets/css/example_com-static-app.css">` en la sección `header` tras la línea `<link rel="stylesheet" href="video-js.min.css">`:
```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`.
~<code>rtmp://live.ejemplo.com/entrada/</code>~
~<code>rtmp://live.sindominio.net/entrada/</code>~
`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.

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sintoniza.sindominio.net - tu streaming en sindominio - plataforma de emisiones en directo autogestionada por sindominio.net</title>
<link rel="stylesheet" href="assets/video-js.min.css">
<link rel="stylesheet" href="assets/styles-mirar.css">
<link rel="stylesheet" href="assets/styles-sintoniza.css">
<style type="text/css">
</style>
</head>

Loading…
Cancel
Save