在浏览器中从 gstreamer 播放流

Question

我想在网络浏览器中播放来自 gstreamer 的流。

我玩过 RTP、WebRTC 和 SDP 文件，但是，虽然 VLC 能够通过简单的 SDP 连接到流，但浏览器却不能。我后来了解到 WebRTC 需要安全连接，这只会使事情复杂化，而且我的目的不需要它。我偶然发现了 Media Source Extension (MSE) of html5，这似乎可以提供帮助，但我无法找到一些全面的教程或适当的规范来说明如何让 gstreamer 流式传输正确的数据，然后再了解如何使用 MSE 播放它们。我也不确定使用 MSE 的延迟。

那么有没有办法在浏览器中播放来自 gstreamer 的流？谢谢。

Answer 1

使用节点 webrtc project, I was able to combine output from gstreamer with webrtc call. For gstreamer, there is a project which enables it's use with node gstreamer superficial。所以基本上，您需要从节点进程运行 gstremaer 进程，然后它可以控制 gstremaer 的输出。在每个 gstreamer 帧上都有一个回调调用，它接受帧并将其发送到 webrtc 调用。

然后需要实现一个webrtc调用。呼叫需要一些信令协议。呼叫的一侧将是服务器，另一侧将是客户端的浏览器，而不是两个浏览器。然后将创建一个视频轨道，其中将推送来自 gstreamer 表面的帧。

const { RTCVideoSource } = require("wrtc").nonstandard;
const gstreamer = require("gstreamer-superficial");

const source = new RTCVideoSource();
// This is WebRTC video track which should be used with addTransceiver see below
const track = source.createTrack();

const frame = {
        width: 1920,
        height: 1080,
        data: null
};

const pipeline = new gstreamer.Pipeline("v4l2src ! videorate ! video/x-raw,format=YUY2,width=1920,height=1080,framerate=25/1 ! videoconvert ! video/x-raw,format=I420 ! appsink name=sink");
const appsink = pipeline.findChild("sink");
const pull = function() {
        appsink.pull(function(buf, caps) {
                if (buf) {
                        frame.data = new Uint8Array(buf);
                        try {
                                source.onFrame(frame);
                        } catch (e) {}
                        pull();
                } else if (!caps) {
                        console.log("PULL DROPPED");
                        setTimeout(pull, 500);
                }
        });
};

pipeline.play();
pull();

// Example:
const useTrack = SomeRTCPeerConnection => SomeRTCPeerConnection.addTransceiver(track, { direction: "sendonly" });

在浏览器中从 gstreamer 播放流

Play stream from gstreamer in browser

html

stream

gstreamer

webrtc

media-source