Geekly articles weekly

Transmisión de videollamadas RTMP


Hoy en día, las plataformas de transmisión están en la cima de la popularidad, ya que millones de personas talentosas comparten regularmente sus conocimientos, leen, usan la transmisión al máximo. A medida que este mercado está creciendo, hay muchas aplicaciones que pueden transmitir video en vivo usando un teléfono inteligente o una cámara portátil. Quizás también desee introducir dicha funcionalidad en su aplicación; si es así, entonces nos apresuramos a complacer, ahora Voximplant le permite reenviar llamadas de video a través de RTMP a cualquier CDN que admita este protocolo.

Esta funcionalidad es posible gracias al nuevo módulo Voxengine : StreamingAgent . Debajo del corte, espera 5 pasos para configurar esta integración, ¡bienvenido!

Esquema



Una llamada de video desde una aplicación móvil / web o SIP llega a nuestra nube, que la dirige a una CDN de transmisión. A su vez, el CDN envía transmisiones de audio y video a los usuarios finales, como suele hacer. Tenga en cuenta que RTMP solo admite H.264, por lo que es muy importante especificar explícitamente este códec al transmitir.

Necesitarás


  • una cuenta en un servicio de transmisión, por ejemplo, Twitch o Youtube ;
  • Cuenta Voximplant. Si no lo tiene, entonces el registro vive aquí ;
  • Aplicación Voximplant, así como un script, una regla y un solo usuario. Crearemos todo esto en este tutorial;
  • cliente web para capturar video y audio: utilizaremos nuestro videochat de demostración

1. Configuración de transmisión


En primer lugar, deberá obtener los valores de dos parámetros, que utilizamos en el script de la nube: nombre / clave de secuencia y URL del servidor . A continuación se muestra cómo obtener estos valores usando Twitch y YouTube como ejemplos.

Contracción


Inicie sesión en su cuenta, haga clic en la imagen de perfil en la esquina superior derecha y seleccione Productor de video.



En la sección Configuración, seleccione Canal y luego haga clic en Copiar en la parte superior de la página para obtener su Clave de transmisión principal. Tenga en cuenta que la clave solo está disponible con la autenticación de dos factores activada. Pegue este valor en su editor de texto o simplemente deje esta página abierta para copiar el valor más adelante.

Para encontrar la URL del servidor, vaya a la página stream.twitch.tv/ingests , seleccione uno de los servidores recomendados y cópielo sin la última barra, por ejemplo: rtmp: //live-sfo.twitch.tv/app

YouTube


Inicie sesión en su cuenta, haga clic en el avatar en la esquina superior derecha y seleccione YouTube Studio (beta).



Si no tiene un canal de YouTube, aparecerá un cuadro de diálogo sobre la creación de un canal. Haga clic en Crear canal y verá un panel del canal creado con una notificación de que la transmisión será posible dentro de las 24 horas.



Mientras esté en YouTube Studio, vaya a Otras funciones -> Transmisión en vivo ahora a través del menú de la izquierda. Se abre una nueva página, en la parte inferior del bloque de configuración del codificador. Desde aquí, debe tomar la URL del servidor y el nombre de Stream / valores clave (o dejar la página abierta).



2. Configuración de VOXIMPLANT


Ahora debe realizar los ajustes desde el lado de Voximplant. Primero inicie sesión en su cuenta: https://manage.voximplant.com/auth . En el menú de la izquierda, haga clic en "Aplicaciones", luego en "Nueva aplicación" y cree una aplicación llamada transmisión. Vaya a la nueva aplicación, cambie a la pestaña "Scripts" para crear un script startStream con este código (no olvide sustituir los valores del paso anterior en las líneas 8 y 9):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); });

Este es un script simple que inicia una secuencia y también monitorea todos sus estados posibles, como: Conectado, Conexión fallida, StreamStarted, etc. - Los detalles del guión serán ligeramente inferiores. Ahora debe ir a la pestaña "Enrutamiento" de su aplicación y hacer clic en "Nueva regla". Denomine streamRule, especifique el script startStream y deje la máscara predeterminada (. *).


Lo último que se debe hacer en esta etapa es crear un usuario. Vaya a la pestaña "Usuarios", haga clic en "Crear usuario", especifique un nombre (por ejemplo, usuario1) y contraseña, luego haga clic en "Crear". Necesitaremos este par de nombre de usuario / contraseña para la autenticación en el cliente web.


La configuración de Voximplant se ha completado, pero antes de pasar al cliente web, propongo comprender cómo funciona el módulo StreamingAgent en nuestro escenario.

3. El escenario


El módulo StreamingAgent permite a los desarrolladores lanzar transmisiones RTMP a plataformas de estimulación populares. Para usar la funcionalidad del módulo, debemos conectarlo al comienzo del script:

 require(Modules.StreamingAgent);

A continuación, debe especificar explícitamente el códec que se utilizará al transmitir. Dado que muchas plataformas (incluidas Twitch y YouTube) usan RTMP, que, a su vez, admite H.264, esto es lo que indicaremos:

 VoxEngine.setVideoCodec("H264");

Si no se especifica el códec, se puede generar el evento StreamingAgentEvents.StreamError , que contiene el texto de error:
 "Video codec mismatch. " + codecName + " granted, but should be H.264"

Luego agregamos un controlador para el evento CallAlerting para manejar la videollamada desde el cliente web (sí, lo veremos pronto). En primer lugar, agregaremos una llamada al método createStreamingAgent al controlador . El método tiene los siguientes parámetros, la mayoría de ellos son obligatorios, los opcionales se marcan por separado:

  • protocolo : hasta ahora solo se admite RTMP;
  • url : URL del servidor, consulte el paso 1;
  • streamName : nombre / clave de transmisión, consulte el paso 1;
  • applicationName (opcional): parte de streamName, por ejemplo, live2. Use esta opción si la plataforma seleccionada lo requiere;
  • keyframeInterval (opcional, segundos): con qué frecuencia se generará un fotograma clave en la secuencia. Si no se especifica, el valor predeterminado es 2.

En la lista de secuencias de comandos anterior, la llamada al método createStreamingAgent se ve así:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 });

Pero podemos omitir keyframeInterval y usar applicationName, así:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" });

Después de crear el objeto de transmisión, el script continúa procesando la llamada dentro del controlador. El siguiente paso es dirigir la transmisión de video entrante desde el cliente web al objeto de transmisión creado:

 e.call.sendMediaTo(streaming);

Luego usamos todos los posibles eventos de transmisión para la depuración: los controladores no hacen nada más que enviar información al registro de sesión de Voximplant. No puede usar este código si lo desea.

Después de procesar los eventos, el script responde la llamada entrante:

 e.call.answer();

Finalmente, debemos manejar correctamente el final de la transmisión cuando el cliente web deja de enviar el video. Formalmente, tampoco podemos usar este controlador, pero la sesión finalizará solo después de 60 segundos después de que el video haya dejado de enviarse. No tiene sentido esta expectativa, por lo tanto, es mejor finalizar la sesión, comenzando por los eventos desconectados :

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); });

Entendiendo la lógica del escenario, estamos listos para comenzar la última, pero no menos importante, parte de nuestra configuración.

4. Cliente web


Clone o descargue nuestra demostración de videochat . Luego vaya a la carpeta del repositorio y abra el archivo WebApp / JS / app.js en un editor de texto / IDE. Cambie el nombre de la aplicación en la línea 5 y guarde el archivo:


En realidad, eso es todo.

5. Comience a transmitir


Debe ejecutar la carpeta de la aplicación web localmente o en su servidor web. Para ejecutar localmente, puede usar la utilidad de servidor en vivo o la aplicación Servidor web para Chrome . Al iniciar el cliente web, debe darle el nombre de su cuenta Voximplant, por ejemplo:
  http://127.0.0.1:8080/index.html#accname=johngalt


Después de iniciar el cliente, ingrese el par de inicio de sesión y contraseña del paso 2:


Ingrese cualquier conjunto de caracteres junto al signo @ y presione Llamar. Si todo se hizo correctamente, su transmisión comenzará pronto :) ¡Transmisión exitosa y desarrollo productivo para usted!

Source: https://habr.com/ru/post/472402/

More articles:


All Articles