【流媒体服务】本地视频推流、转码、拉流、直播综合应用（五）：【1】VLC+FFMPEG+Nginx实现RTSP到RTMP网页直播

最新推荐文章于 2024-04-22 18:42:12 发布

liuyonghong159632

最新推荐文章于 2024-04-22 18:42:12 发布

阅读量6.3k

点赞数 1

分类专栏：流媒体服务文章标签：音视频 nginx 运维

本文链接：https://blog.csdn.net/liuyonghong159632/article/details/121891065

版权

流媒体服务专栏收录该内容

6 篇文章 7 订阅

订阅专栏

文章目录

前言
一、前几章节回顾
二、操作步骤
三、网页播放视频流
- 1、准备测试网页：test.html
- 2、各种浏览器打开test.html测试页面：
四、总结

前言

前几章节已完成推流拉流转码直播相关的基础工作准备，本章节整体演示综合直播应用，延迟5秒钟左右…

一、前几章节回顾

二、操作步骤

1、准备本地视频

准备本地视频用于推流： 暗战2.mp4

2、VLC：获取RTSP视频流

参考链接：【流媒体服务】推流拉流体验（二）：【1】使用VLC轻松体验本地视频推流、拉流、播放功能
生成RTSP视频流：rtsp://localhost:8554/rtsp001

3、FFMPEG：转码推流服务准备

参考链接：【流媒体服务】安装推流转码工具（三）：【1】下载安装ffmpeg推流转码工具
准备好转码推流服务。

4、Nginx：网站服务准备

参考链接：【流媒体服务】Web网站服务搭建（四）：【1】下载安装Nginx网站服务
完成Nginx网站服务准备：
注意网站端口已经改为81，即http://localhost:81；
rtmp监听端口为1935，即http://localhost:1935。

5、FFMPEG推流：rtsp转rtmp

cmd 执行命令：ffmpeg -i “rtsp://:8554/rtsp001” -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/live/movie
看到如下界面表示成功：
cmd 打开另外要给窗口：ffplay.exe rtmp://localhost:1935/live/movie
看到如下窗口表示成功：

6、FFMPEG推流：rtsp转hls

cmd执行如下命令：ffmpeg -i “rtsp://:8554/rtsp001” -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/movie
看到如下窗口表示成功：
cmd 打开新窗口：ffplay.exe http://localhost:81/hls/movie.m3u8
看到如下窗口表示成功：
此时Nginx网站根目录下会多出很多视频流文件：
出现的问题：hls实时数据流播放一会儿就卡死了，需要结束掉重新启动 ffplay.exe http://localhost:81/hls/movie.m3u8

三、网页播放视频流

1、准备测试网页：test.html

<html>
<head>
<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
</head>
<body>


<div id="dplayer"></div>
<script>
    const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'http://localhost:81/hls/movie.m3u8', /*注意这个为实时视频数据流*/
        type: 'customHls',
        customType: {
            customHls: function(video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
        },
    },
});
</script>

</body>
</html>