网上有很多例子可以使用带有"tcpclient链接"；或"；udpsink"；使用NodeJS来消耗输出到Web浏览器的GStreamer管道。
但我找不到任何示例或文档来清楚地解释如何将webrtcbin元素与NodeJS服务器一起使用，以将流发送到web浏览器。(webrtcbin的替代方案也不错。(
我有以下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
更新：最后，我能够使用问题中提到的NodeJS教程实现GStreamer到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', function (req, 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', function (req, 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;
}
并共享HTML代码：
<!DOCTYPE html>
<head>
<title>GStreamer with NodeJS Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<style>
html,
body {
overflow: hidden;
}
</style>
<script>
function buffer() {
//Start playback as soon as possible to minimize latency at startup
var dStream = document.getElementById('vidStream');
try {
dStream.play();
} catch (error) {
console.log("Error in buffer() method.");
console.log(error);
}
}
</script>
</head>
<body onload="buffer();">
<video id="vidStream" width="640" height="480" muted>
<source src="/stream" type="video/mp4" />
<source src="/stream" type="video/webm" />
<source src="/stream" type="video/ogg" />
<!-- fallback -->
Your browser does not support the <code>video</code> element.
</video>
</body>
不幸的是，事情并没有那么简单。你必须有一些方式与浏览器交互，才能交换SDP报价/答案，以及ICE候选人交换。
你可以在这里看看的例子
gstreamer(以及浏览器等其他应用程序(有一个很好的集成测试：https://github.com/sipsorcery/webrtc-echoes/tree/master/gstreamer.它工作，有最小的怪癖(至少在铬(。它从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