如何在网络浏览器中使用GStreamer的webrtcbin？

如何解决如何在网络浏览器中使用GStreamer的webrtcbin？

在线上有很多示例，它们可以将GStreamer管道与“ tcpclientsink”或“ udpsink”一起用于NodeJS，以将GStreamer管道输出到Web浏览器。

但是我找不到任何示例或文档来清楚地说明如何将webrtcbin管道与NodeJS服务器一起使用，以将流发送到Web浏览器。

我有以下GStreamer管道：

gst-launch-1.0 videotestsrc  \
! queue ! vp8enc ! rtpvp8pay \
! application/x-rtp,media=video,encoding-name=VP8,payload=96 \
! webrtcbin name=sendrecv

有人可以帮助使用基于NodeJS的服务器使用此管道以将流显示到Web浏览器上吗？

这是一个类似的示例，但是它使用tcpclientsink： https://tewarid.github.io/2011/04/26/stream-live-webm-video-to-browser-using-node.js-and-gstreamer.html

解决方法

不幸的是，事情并非如此简单。您必须有某种方式与浏览器进行交互，以便能够交换SDP报价/答案以及ICE候选人交换。

您可以查看示例here

,

更新： 最后，我能够使用问题中提到的 NodeJS tutotial 实现 GStreamer to Browser。这是一个概念验证代码，有人可以在需要时使用（或者在教程链接从互联网上删除的情况下）：

var express = require('express')
var http = require('http')
var net = require('net');
var child = require('child_process');
require('log-timestamp');   //adds timestamp in console.log()

var app = express();
app.use(express.static(__dirname + '/'));

var httpServer = http.createServer(app);
const port = 9001;  //change port number is required

//send the html page which holds the video tag
app.get('/',function (req,res) {
    res.send('index.html');
});

//stop the connection
app.post('/stop',res) {
    console.log('Connection closed using /stop endpoint.');

    if (gstMuxer != undefined) {
        gstMuxer.kill();    //killing GStreamer Pipeline
        console.log(`After gstkill in connection`);
    }
    gstMuxer = undefined;
    res.end();
});

//send the video stream
app.get('/stream',res) {

    res.writeHead(200,{
        'Content-Type': 'video/webm',});

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

    tcpServer.maxConnections = 1;

    tcpServer.listen(function () {
        console.log("Connection started.");
        if (gstMuxer == undefined) {
            console.log("inside gstMuxer == undefined");
            var cmd = 'gst-launch-1.0';
            var args = getGstPipelineArguments(this);
            var 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 Stream 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) {
    //Replace 'videotestsrc','pattern=ball' with camera source in below GStreamer pipeline arguments.
    //Note: Every argument should be written in single quotes as done below
    var args =
        ['videotestsrc','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;
}

,

这里有一个很好的 gstreamer（以及其他应用程序，如浏览器）的集成测试：https://github.com/sipsorcery/webrtc-echoes/tree/master/gstreamer。它的工作原理是最小的怪癖（至少在 chrome 中）。它从这个 gstreamer 管道中获取数据

  pipeline =
     gst_parse_launch ("webrtcbin bundle-policy=max-bundle name=sendonly "
       "videotestsrc is-live=true pattern=ball ! videoconvert ! queue ! vp8enc deadline=1 ! rtpvp8pay ! "
       "queue ! " RTP_CAPS_VP8 " ! sendonly. ",&error);

并为浏览器打开一个 Web 服务器以获取此流。您必须手动打开 index.html