在浏览器中从 gstreamer 播放流

Question

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

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

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

Answer 1

使用节点webrtc project，我能够将gstreamer 的输出与webrtc 调用结合起来。对于 gstreamer，有一个项目可以使其与节点 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" });