美文网首页
gstreamer编码rtsp->rtmp通过flv.js播放

gstreamer编码rtsp->rtmp通过flv.js播放

作者: 一只飞 | 来源:发表于2021-05-31 15:52 被阅读0次

1、安装gstreamer

apt-get install libgstreamer1.0-0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly gstreamer1.0-libav gstreamer1.0-doc gstreamer1.0-tools gstreamer1.0-x gstreamer1.0-alsa gstreamer1.0-gl gstreamer1.0-gtk3 gstreamer1.0-qt5 gstreamer1.0-pulseaudio

如果不行就再查查别的吧(好久之前装的了)
2、通过gstreamer对摄像头rtsp进行编码解码处理
gst-launch-1.0 rtspsrc location=rtsp://xxxxxxx ! rtpbin ! rtph265depay ! h265prse ! avdec_h265 ! x264enc ! h264parse ! flvmux ! rtmpsink location='rtmp://localhost:1935/live/test'
3、流媒体服务器,也就是要推流
https://github.com/illuspas/Node-Media-Server
npm install node-media-server --save

const NodeMediaServer = require('node-media-server')
const port = 8000
const config = {
    //rtmp流媒体服务器
    rtmp: {
        port: 1935,
        chunk_size: 10240,
        gop_cache: true,
        ping: 30,
        ping_timeout: 60
    },
    http: {
        port: port,
        allow_origin: '*'
    }
}
 
var nms = new NodeMediaServer(config)
nms.run()

4、通过flv.js播放
Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发(ECMAScript 6 编写) ,没有用到 Flash。 它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流,并实时转封装为 fmp4 ,通过 Media Source Extensions 喂给浏览器,实现了 FLV 格式视频的播放。
https://github.com/Bilibili/flv.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
        <video id="videoElement" style="width: 80%;" controls="controls" autoplay muted></video>
        <script>
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                     isLive: true,//实时流
                  url:'ws://192.168.1.120:8000/live/test'//有没有.flv都行
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                flvPlayer.play();
            }
        </script>
    </body>
</html>

参考:
Vue整合Rtmp流实现无Flash播放[flv+websocket篇]
https://blog.csdn.net/qq_37306786/article/details/105944057

相关文章

网友评论

      本文标题:gstreamer编码rtsp->rtmp通过flv.js播放

      本文链接:https://www.haomeiwen.com/subject/cflyjltx.html