【笔记】使用 nginx 搭建 rtmp 服务器,将 rtsp 视频流转换成网页可播放的视频格式

Linux tytrock ⋅ 于 2022-12-16 17:27:38 ⋅ 998 阅读

实时流协议(RTSP)是一种网络应用协议,专为娱乐和通信系统使用,以控制流媒体服务器。该协议用于创建和控制终端之间的媒体会话。媒体服务器的客户端发布VCR命令,例如播放,录制和暂停,以便实时控制服务器到客户端或客户端到服务器的媒体流。

最近对接海康录像机设备,需要获取摄像头的实时画面,而通过接口返回的URL是一个RTSP地址,而RTSP地址是无法通过html里的video标签直接播放的,所以必须先将rtsp流转换成html可播放的格式。


本次实践采取的思路是:

1、使用VLC 播放器发送 RTSP流

2、使用nginx搭建RTMP服务器

3、使用ffmepg进行推流

4、网页播放rtmp推流


1、使用VLC 播放器发送 RTSP流

为了方便测试,我需要通过VLC在本地生成RTSP流的视频地址。VLC是一款强大的多媒体播放器,它能够直接播放RTSP流的视频,也能选择本地视频文件生成RTSP流。

VLC官网下载地址:https://www.videolan.org/


1)、下载并安装VLC播放器后,打开 VLC Media Player 播放器,进入界面,在上方菜单栏中点击"媒体"——"流"选项,如图

image.png


2)、弹出"打开媒体"对话框,如图,点击右侧的"添加"按钮,选择用于测试的 ts 或 mp4 格式文件,然后点击"串流",如果此处显示的不是串流,可以点击下拉菜单进行切换

image.png


3)、直接点击"下一个"按钮

image.png


4)、进入如下界面,点击下拉菜单,选择"RTSP",然后点击右侧的"添加"按钮;另外建议勾选"在本地显示",以便后面发流时可在本地同步看到视频内容

image.png


5)、点击上步骤的添加后,可自行设置RTSP流的端口号和路径,也可以不改,接着点击"下一个"按钮

image.png


6)、取消激活转码

image.png


7)、直接点击"流",即可发出 rtsp 流;

image.png


8)、如果你之前勾选了"在本地显示",则 VLC 会显示正在发送的视频内容和进度

image.png


9)、VLC播放器也可以直接播放RTSP流,所以现在新建一个VLC播放器窗口,在菜单栏中点击"媒体"——"打开网络串流"

image.png


10)、在打开媒体的窗口中,选择“网络”,然后输入刚刚创建的RTSP流地址:rtsp://localhost:8554/,点击播放

image.png


11)、能正常播放,则表示RTSP流发送成功

image.png



2、使用nginx搭建RTMP服务器

1)、nginx安装rtmp模块

...


2)、编辑nginx.conf,加入rtmp模块内容(与http同级)

http{
...
}
rtmp { 
    server { 
        listen 1935; 
        chunk_size 4096;  
        
        application hls { #hls的地址
            live on;
            hls on;
            hls_path html/hls;
            hls_fragment 1s;
        }
        application vod {
            play /html/hls; #//视频文件存放位置。
        }
        application live { #rtmp的地址

             live on;
 
        }
 
    }
}

3)、重启nginx


4)、telnet一下rtmp服务是否已启动,1935端口

image.png


3、使用ffmepg进行推流

1)、ffmepg安装

centos安装教程:https://tytrock.com/topics/328


2)、使用ffmepg将RTSP流转成HLS

ffmpeg -re -i rtsp://192.168.1.188:8554/ -vcodec copy -f flv rtmp://localhost:1935/hls/movie

-re:  代表按照帧率发送,如果不加ffmpeg会一股脑地按最高的效率发送数据

-i: 后面是rtsp地址

-vcodec copy: 强制使用codec编解码方式,要加,否则ffmpeg会重新编码输入的H.264裸流

-f :强制转换为什么格式,后接格式

ffmpeg参数中文详细解释

image.png






<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
 
<body>
<style>
    .video-js .vjs-tech {position: relative !important;}
</style>
<div>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 60%;height: auto'>
        <source id="source" src="http://localhost/hls/movie.m3u8" type="application/x-mpegURL"></source>
    </video>
</div>
<div style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()// 视频播放
    myVideo.pause() // 视频暂停
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
 
    }
    var src = 'http://localhost/hls/movie.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
    })
</script>
</html>







https://tech.wmzhe.com/article/14251.html

https://blog.csdn.net/cat_of_ming/article/details/120058450

https://www.jianshu.com/p/a9f51e0f18f6

https://www.jb51.net/article/249100.htm

https://blog.csdn.net/qq_45228330/article/details/117129115

https://blog.csdn.net/qq_35593448/article/details/124155905

回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter