Programacion

Uso de GStreamer en Node.js

belial9826

Lo que vas a encontrar...

Introducción

GStreamer es un marco para crear aplicaciones de transmisión multimedia. Con el marco GStreamer, es posible diseñar y construir aplicaciones de baja latencia capaces de manejar cualquier tipo de transmisión de datos, incluidas las capacidades de audio y video.

El núcleo de GStreamer proporciona un marco para complementos, transmisión y administración de tipos de medios. También proporciona una API para escribir aplicaciones utilizando varios complementos.

El marco basado en complementos proporciona varios códecs y otras funciones que se pueden vincular y organizar en una canalización, que define el flujo de datos. Sin embargo, en el momento de escribir este artículo, no existe un puerto/enlace oficial de Node.js para las aplicaciones GStreamer.

En este artículo, hablaremos sobre las características de GStreamer y cómo configurarlo con Node a través de las siguientes secciones:

Características y casos de uso

Uno de los principales casos de uso de GStreamer es la creación de reproductores multimedia. Como desarrollador, puede usar un conjunto integral de herramientas poderosas para crear canalizaciones de medios sin escribir una sola línea de código.

De forma predeterminada, GStreamer incluye componentes para crear un reproductor multimedia compatible con una gran variedad de formatos, incluidos MP3, Ogg/Vorbis, MPEG-1/2, AVI, QuickTime, mod, etc.

Sin embargo, GStreamer ofrece mucho más que otros reproductores multimedia. Sus principales ventajas son que los complementos se pueden mezclar en conductos arbitrarios para que sea posible escribir una aplicación de edición de video o audio. Específicamente, GStreamer proporciona:

Una API para aplicaciones multimedia
Una arquitectura de complemento
Una arquitectura segmentada
Un mecanismo para administrar/negociar tipos de medios

Arquitectura del complemento GStreamer

A través de complementos, GStreamer puede conectarse con otros marcos multimedia para reutilizar componentes existentes (por ejemplo, códecs) y otros mecanismos de entrada/salida de la plataforma.

El núcleo de GStreamer es esencialmente independiente de los medios. Solo conoce bytes y bloques y contiene solo elementos básicos. Toda la funcionalidad de administración de medios es proporcionada por complementos externos al núcleo. Estos le dicen al núcleo cómo manejar tipos de medios específicos.

Los complementos de GStreamer se pueden clasificar en los siguientes grupos:

Gestión de protocolos
Fuentes: para audio y video (involucra complementos de protocolo)
Formatos: analizadores, formateadores, multiplexores, demultiplexores, metadatos, subtítulos
Códecs: codificadores y decodificadores
Filtros: convertidores, mezcladores, efectos
Receptores: para audio y video (involucra complementos de protocolo)

Instalación de GStreamer

Para instalar GStreamer, la documentación ofrece diferentes enfoques para elegir según su elección de sistema operativo.

Para macOS X, necesitamos instalar OSX Snow Leopard (10.6) o posterior y XCode 3.2.6 o posterior. Sin embargo, la versión recomendada del sistema es macOS Sierra con XCode 8. Podemos instalar instaladores tanto de tiempo de ejecución como de desarrollo desde la página de descarga de GStreamer, que podemos encontrar aquí.

Para otros sistemas operativos/entornos, incluidos Windows, iOS, Android y Linux, podemos consultar la página de descarga de documentación, que consta de una lista de todos los ecosistemas admitidos y formas de crear SDK GStreamer para fines de desarrollo.

Podemos navegar a /Library/Frameworks/GStreamer.framework/Commands en la ruta de nuestro sistema para ver los comandos disponibles para jugar con GStreamer. Algunos de los comandos populares incluyen gst-launch-1.0, gst-inspect-1.0, gst-play-1.0.

Configurar GStreamer con Node.js

Después de la instalación, podemos continuar usando el tiempo de ejecución de Node.js para usar una canalización de GStreamer y enviar el resultado a un navegador web.

Creemos una carpeta de nuestra elección e instalemos Express.js usando npm o Yarn y sigamos las instrucciones para configurar un proyecto básico con un archivo package.json:

npm install express or yarn add express

1	npm install express or yarn add express

A continuación, cree un archivo index.js que contenga el código JavaScript para nuestro ejemplo de transmisión con GStreamer. Consulte el archivo index.js a continuación:

Contenido Recomendado

Más artículos interesantes de LogRocket:

const express = require('express')
const http = require('http')
const net = require('net');
const child = require('child_process');

const app = express();
app.use(express.static(__dirname + "https://blog.logrocket.com/"));

const httpServer = http.createServer(app);
const port = 3000;  

//send the html page which holds the video tag
app.get("https://blog.logrocket.com/", function (req, res) {
    res.send('index.html');
});

//stop the connection
app.post('/stop', function (req, res) {
    console.log('Connection closed using /stop endpoint.');
    if (gstMuxer != undefined) {
        gstMuxer.kill();    //kill the GStreamer Pipeline
    }
    gstMuxer = undefined;
    res.end();
});

//send the video stream
app.get("https://blog.logrocket.com/stream", function (req, res) {
    res.writeHead(200, {
        'Content-Type': 'video/webm',
    });

    const tcpServer = net.createServer(function (socket) {
        socket.on('data', function (data) {
            res.write(data);
        });
        socket.on('close', function () {
            console.log('Socket closed.');
            res.end();
        });
    });

    tcpServer.maxConnections = 1;

    tcpServer.listen(function () {
        console.log("Connection started.");
        if (gstMuxer == undefined) {
            console.log("inside gstMuxer == undefined");
            const cmd = 'gst-launch-1.0';
            const args = getGstPipelineArguments(this);
            const gstMuxer = child.spawn(cmd, args);
            gstMuxer.stderr.on('data', onSpawnError);
            gstMuxer.on('exit', onSpawnExit);
        }
        else {
            console.log("New GST pipeline rejected because gstMuxer != undefined.");
        }
    });
});

httpServer.listen(port);
console.log(`Camera Streaming App listening at http://localhost:${port}`)

process.on('uncaughtException', function (err) {
    console.log(err);
});

//functions
function onSpawnError(data) {
    console.log(data.toString());
}

function onSpawnExit(code) {
    if (code != null) {
        console.log('GStreamer error, exit code ' + code);
    }
}

function getGstPipelineArguments(tcpServer) {
    const args =
        ['/Users/alexandernnakwue/Downloads/samplevideo.mp4', 'pattern=ball',
            '!', 'video/x-raw,width=320,height=240,framerate=100/1',
            '!', 'vpuenc_h264', 'bitrate=2000',
            '!', 'mp4mux', 'fragment-duration=10',
            '!', 'tcpclientsink', 'host=localhost',
            'port=" + tcpServer.address().port];
    return args;
}

const express = require('express')

const http = require('http')

const net = require('net');

const child = require('child_process');

const app = express();

app.use(express.static(__dirname + "https://blog.logrocket.com/"));

const httpServer = http.createServer(app);

const port = 3000;

//send the html page which holds the video tag

app.get("https://blog.logrocket.com/", function (req, res) {

res.send('index.html');

});

//stop the connection

app.post('/stop', function (req, res) {

console.log('Connection closed using /stop endpoint.');

if (gstMuxer != undefined) {

gstMuxer.kill(); //kill the GStreamer Pipeline

}

gstMuxer = undefined;

res.end();

});

//send the video stream

app.get("https://blog.logrocket.com/stream", function (req, res) {

res.writeHead(200, {

'Content-Type': 'video/webm',

});

const tcpServer = net.createServer(function (socket) {

socket.on('data', function (data) {

res.write(data);

});

socket.on('close', function () {

console.log('Socket closed.');

res.end();

});

tcpServer.maxConnections = 1;

tcpServer.listen(function () {

console.log("Connection started.");

if (gstMuxer == undefined) {

console.log("inside gstMuxer == undefined");

const cmd = 'gst-launch-1.0';

const args = getGstPipelineArguments(this);

const gstMuxer = child.spawn(cmd, args);

gstMuxer.stderr.on('data', onSpawnError);

gstMuxer.on('exit', onSpawnExit);

}

else {

console.log("New GST pipeline rejected because gstMuxer != undefined.");

}

});

httpServer.listen(port);

console.log(`Camera Streaming App listening at http://localhost:${port}`)

process.on('uncaughtException', function (err) {

console.log(err);

});

//functions

function onSpawnError(data) {

console.log(data.toString());

}

function onSpawnExit(code) {

if (code != null) {

console.log('GStreamer error, exit code ' + code);

}

function getGstPipelineArguments(tcpServer) {

const args =

['/Users/alexandernnakwue/Downloads/samplevideo.mp4', 'pattern=ball',

'!', 'video/x-raw,width=320,height=240,framerate=100/1',

'!', 'vpuenc_h264', 'bitrate=2000',

'!', 'mp4mux', 'fragment-duration=10',

'!', 'tcpclientsink', 'host=localhost',

'port=" + tcpServer.address().port];

return args;

}

Como podemos ver en el archivo de arriba, tenemos tres puntos finales:

Un punto final para enviar la página HTML, que contiene la etiqueta de video
Un punto final para enviar la transmisión de video
Un punto final para finalizar la conexión.

Luego, cree la página HTML (index.html), que contiene la etiqueta de video como se muestra a continuación.

&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;title&gt;GStreamer with NodeJS Demo&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=0.9"&gt;
    &lt;style&gt;
        html,
        body {
            overflow: hidden;
        }
    &lt;/style&gt; 
    &lt;script&gt;
        function buffer() {
            //Start playback as soon as possible to minimize latency at startup 
            const dStream = document.getElementById("vidStream');
            try {
                dStream.play();
            } catch (error) {
                console.log(error);
            }

        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;body onload="buffer();"&gt;
    &lt;video id="vidStream" width="640" height="480" muted&gt;
        &lt;source src="https://blog.logrocket.com/stream" type="video/mp4" /&gt;
        &lt;source src="https://blog.logrocket.com/stream" type="video/webm" /&gt;
        &lt;source src="https://blog.logrocket.com/stream" type="video/ogg" /&gt;
        &lt;!-- fallback --&gt;
        Your browser does not support the video element. &lt;/video&gt; &lt;/body&gt;

<!DOCTYPE html>

<head>

<title>GStreamer with NodeJS Demo</title>

<style>

html,

body {

overflow: hidden;

}

</style>

function buffer() {

//Start playback as soon as possible to minimize latency at startup

const dStream = document.getElementById("vidStream');

try {

dStream.play();

} catch (error) {

console.log(error);

}

</script>

</head>

Your browser does not support the video element. </video> </body>

Como mencioné en la introducción, actualmente no hay un puerto o enlace oficial para Node.js. El código anterior está adaptado de este artículo de Stack Overflow.

Podemos continuar usando el comando gst-launch-1.0 para iniciar la aplicación de transmisión y los argumentos, que incluyen fuente de video o audio para transmisión, puerto y dirección TCP, parámetros, etc. A medida que se carga la página, reproducimos la transmisión de video lo antes posible con el método play().

Nota: Esto solo funciona en navegadores basados en Chromium. Voy a explicar más a continuación.l

Algunas limitaciones de Gstreamer

La implementación actual de GStreamer para Node.js no está estandarizada y aún falta. Por ejemplo, la implementación actual no es totalmente compatible con los navegadores y solo funciona en los basados en Chromium, ya que algunos de los encabezados HTTP necesarios en Chrome para cargar recursos no están disponibles. Además, todavía es difícil construir GStreamer en algunas arquitecturas de sistemas porque todavía contiene muchos errores.

GStreamer aún no admite puertos directamente para varios lenguajes de programación diferentes. Esto significa que los desarrolladores que pretendan usar GStreamer en aplicaciones Node.js deben usar node-addon-api para llamar al código C directamente desde Node. Este método, sin embargo, requiere mucha mano de obra y puede ser particularmente propenso a errores cuando se construye con node-gyp.

Conclusión

Como nos habrámos dado cuenta, hoy en día existen enlaces de GStreamer limitados para Node.js.

Hay otros enlaces disponibles, como node-gstreamer-superficial, pero según la documentación, este no es un enlace JS completo para GStreamer y, con suerte, algún día será reemplazado por (o implementado con) node-gir.

Otros enlaces o hacks disponibles simplemente no funcionan como se esperaba, no están estandarizados o son propensos a errores. De hecho, este es un gran desafío y, en un futuro cercano, se debe construir un puerto de enlace de Node.js estandarizado y para toda la industria.

200 solo Supervise las solicitudes de red fallidas y lentas en producción

Implementar una aplicación web o un sitio web basado en Node es la parte fácil. Asegurarse de que su instancia de Node continúe proporcionando recursos a su aplicación es donde las cosas se ponen más complicadas. Si desea asegurarse de que las solicitudes al backend o a los servicios de terceros sean exitosas, pruebe LogRocket. https://logrocket.com/regístrate/

LogRocket es como un DVR para aplicaciones web y móviles, literalmente graba todo lo que sucede cuando un usuario interactúa con su aplicación. En lugar de adivinar por qué ocurren los problemas, puede agregar y marcar solicitudes de red problemáticas para comprender rápidamente la causa raíz.

LogRocket instrumenta su aplicación para registrar tiempos de rendimiento básicos, como el tiempo de carga de la página, el tiempo hasta el primer byte, las solicitudes de red lentas y también registra las acciones/estados de Redux, NgRx y Vuex. Comience a monitorear de forma gratuita.

Fuente

belial9826

Hijo, esposo y padre de un hermoso niño. Amante de los animales, la tecnología, informática y programación. Si tienes alguna duda, inquietud, comentario o deseas comunicarte directamente conmigo, puedes enviarme un correo electrónico a admin@jagonzalez.org