ffmpeg+jsmpeg+h5实现rtsp网页免插件播放

最新推荐文章于 2024-09-21 10:34:28 发布

九剑决

最新推荐文章于 2024-09-21 10:34:28 发布

阅读量1.7k

点赞数 1

分类专栏：视频流文章标签： ffmpeg jsmpeg rtsp 视频流播放

本文链接：https://blog.csdn.net/u013014636/article/details/113504907

版权

视频流专栏收录该内容

2 篇文章 1 订阅

订阅专栏

ffmpeg+jsmpeg+h5实现rtsp网页免插件播放

下载jsmpeg
https://github.com/phoboslab/jsmpeg
安装jsmpeg依赖

npm install

启动jsmpeg：

node websocket-relay supersecret 18089 18090

拉取ffmpeg docker镜像

docker pull jrottenberg/ffmpeg

拉取流，推入jsmpeg（supersecret 对应上面websocket的密码）：

docker run jrottenberg/ffmpeg -rtsp_transport tcp -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" -q 0 -f mpegts -codec:v mpeg1video -s 320x240 http://127.0.0.1:18089/supersecret/1

编写网页播放逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">
        html, body {
            text-align: center;
        }
    </style>
    
</head>
<body>
    <canvas id="video-canvas"></canvas>
    
    <canvas id="video-canvas1"></canvas>
    
    <script type="text/javascript" src="jsmpeg.min.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://127.0.0.1:18090/1';
        var player = new JSMpeg.Player(url, {canvas: canvas});
        
        
    </script>
</body>
</html>

最终效果：