实时流协议（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 播放器，进入界面，在上方菜单栏中点击＂媒体＂——＂流＂选项，如图
2）、弹出＂打开媒体＂对话框，如图，点击右侧的＂添加＂按钮，选择用于测试的 ts 或 mp4 格式文件，然后点击＂串流＂，如果此处显示的不是串流，可以点击下拉菜单进行切换
3）、直接点击＂下一个＂按钮
4）、进入如下界面，点击下拉菜单，选择＂RTSP＂，然后点击右侧的＂添加＂按钮；另外建议勾选＂在本地显示＂，以便后面发流时可在本地同步看到视频内容
5）、点击上步骤的添加后，可自行设置RTSP流的端口号和路径，也可以不改，接着点击＂下一个＂按钮
6）、取消激活转码
7）、直接点击＂流＂，即可发出 rtsp 流；
8）、如果你之前勾选了＂在本地显示＂，则 VLC 会显示正在发送的视频内容和进度
9）、VLC播放器也可以直接播放RTSP流，所以现在新建一个VLC播放器窗口，在菜单栏中点击＂媒体＂——＂打开网络串流＂
10）、在打开媒体的窗口中，选择“网络”，然后输入刚刚创建的RTSP流地址：rtsp://localhost:8554/，点击播放
11）、能正常播放，则表示RTSP流发送成功
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端口
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 :强制转换为什么格式，后接格式
<!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
