欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

海康RTSP流转RTMP并推送至Web端展示

程序员文章站 2022-07-07 09:02:24
...

最近帮着老师做项目的时候碰到一个难题，将海康摄像头的影像实时传输到前端页面进行展示。Google查了两天，终于有些眉目，记录一下经验。

大致需要经过以下几个步骤：

  1. 获取海康摄像头的视频流（基于RTSP协议的视频流）
  2. 流媒体服务器搭建
  3. 前端页面选用合适的播放器进行播放

下面详细说明一下每个步骤

1. 获取海康摄像头的视频流（基于RTSP协议的视频流）

不仅仅是海康摄像头，市面上大多数摄像头的视频流都是基于RTSP协议的，查阅了一下资料了解到海康的RTSP流格式：

rtsp://<账号>:<密码>@<IP>:554/<编码>/<通道>/main/av_stream
例如 rtsp://admin:aaa@qq.com:554/h264/ch1/main/av_stream

说一下 ‘/h264/ch1/main/av_stream’ 这部分， 其中“h264”代表获取h264格式编码的流，我们实验室用的摄像头支持两种格式的编码，h264和h265，可以在终端进行设置，虽然h265编码比较好，但是后边几个步骤用到的技术对这个格式的支持很不友好，因此在这里建议使用h264的编码。后边的“ch1/main/av_stream”表示一些主码流、子码流、通道一类的信息，一般情况下按照这个格式填写就行。

拿到最终的URL后，最好测试一下是否是正确的，这里推荐用最新版的VLC做测试，VLC是一个非常强大的播放器，几乎支持所有格式的视频播放。
海康RTSP流转RTMP并推送至Web端展示
打开VLC-媒体-打开网络串流，弹出上面这个页面，把rtsp地址填进去，看看是否正常播放，如果不能，应该是账号密码错误或者格式不对。

2.流媒体服务器搭建

首先是rtsp转码
浏览器直接展示RTSP流稍微有点困难，但是也并不是没有办法，VLC Plugin 貌似可以做到，但是新版本的浏览器都不再支持这个插件了，所以只能将RTSP进行一个转码。
一开始计划了两种方案，一个是转成m3u8格式（基于HLS协议），另一个是采用FLV格式（基于RTMP协议），因为前者的延时比较大，所以最后采用了后者（从效果来看，RTMP协议的延时几乎察觉不出来）。
这两种转码的方式差不多，都是用ffmpeg进行转码+推流，指令如下：
ffmpeg -i "rtsp://admin:aaa@qq.com:554/h265/ch1/main/av_stream" -f flv -r 25 -s 640x360 -an rtmp://localhost:1935/live/room
这个指令中有两个URL，一个是RTSP视频流的地址，另外一个是接收RTMP流的流媒体服务器地址。流媒体服务器需要另外搭建，我这里选择的是整合了RTMP模块的Nginx。Linux版本的安装随便一百度就有，但是Windows版本就稍微复杂点，我这有一个整合好了的可以直接用的，需要的可以自取。

链接: https://pan.baidu.com/s/19cqUxAdZPEA1WlwSMKMkSg 密码: r3sr

RTMP默认端口号1935，开启Nginx后可以直接用ffmpeg直接推过去，rtmp://localhost:1935/live/room的路径部分是可以随意更换的。注意要先开Nginx然后再推流，下边是在windows下的效果图
海康RTSP流转RTMP并推送至Web端展示
然后复制rtmp://localhost:1935/live/room到VLC中，如果正常播放，说明流服务器搭建成功。

前端播放

支持RTMP播放的播放器找了好久，最后选择了videojs。 这里还有一些坑。首先是播放器页面如果不丢到服务器环境下可能出现无法播放的情况。还有就是，因为播放器是基于flash的，需要浏览器开启flash支持，但是一般情况下如果需要flash，浏览器都会弹窗询问，但是不晓得为啥这个播放器不会弹窗，所以需要手动启动浏览器的flash支持。chrome的话是点击url栏左边的感叹号进行设置，其他浏览器不太清楚。 另外，这个设置不是全局设置，也就是说如果项目站点移植之后，需要重新设置一下。
页面代码如下：‘

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Video.js | HTML5 Video Player</title>
    <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/5.20.1/videojs-ie8.min.js"></script>
</head>
<body width="640px" height="360px">

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640px" height="360px"  data-setup="{}">
    <source src="rtmp:/localhost:80/live/opencv" type="rtmp/flv">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>

  <script src="http://vjs.zencdn.net/5.20.1/video.js"></script>
</body>
</html>

上一篇： 通过live555实现H264 RTSP直播

下一篇： HEVC去方块滤波原理以及代码流程

推荐阅读