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

最新推荐文章于 2024-04-22 11:12:55 发布

傲娇的鲤鱼

最新推荐文章于 2024-04-22 11:12:55 发布

阅读量6w

点赞数 31

分类专栏： java 服务器

本文链接：https://blog.csdn.net/LLittleF/article/details/81111713

版权

java 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

服务器

14 篇文章 1 订阅

订阅专栏

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

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

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

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

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

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

rtsp://<账号>:<密码>@<IP>:554/<编码>/<通道>/main/av_stream
例如 rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream

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

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

2.流媒体服务器搭建

首先是rtsp转码
浏览器直接展示RTSP流稍微有点困难，但是也并不是没有办法，VLC Plugin 貌似可以做到，但是新版本的浏览器都不再支持这个插件了，所以只能将RTSP进行一个转码。
一开始计划了两种方案，一个是转成m3u8格式（基于HLS协议），另一个是采用FLV格式（基于RTMP协议），因为前者的延时比较大，所以最后采用了后者（从效果来看，RTMP协议的延时几乎察觉不出来）。
这两种转码的方式差不多，都是用ffmpeg进行转码+推流，指令如下：
ffmpeg -i "rtsp://admin:wls771102@192.168.14.175: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下的效果图
ffmpeg转码+推流
然后复制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>

2019-01-10补充说明

前端播放部分，除了使用videoJS，还可以使用百度的 cyberplayer,是在videoJS的基础上开发的，针对直播做了很多优化，使用方便而且文档也比较全，强烈安利！

2019-01-21补充说明

注意：本教程仅适用h264编码的流，有些受硬盘录像机管理的摄像头，即便是填写了/h264这个参数（rtsp://admin:12345@192.0.0.64:554/h264/ch1/main/av_stream ），但是返回的仍然是h265格式的流，这个需要在硬盘录像机里修改。直接访问摄像头后台修改的话，过几分钟会被重置。如果按照教程配置到最后出现VLC可以播放但是web无法播放的情况，很有可能就是这个问题。

查看摄像头编码的方法：

直接在硬盘录像机里查看
VLC里边查看：首先在VLC里拉流->tools->Codec选项卡->查看Codec参数

傲娇的鲤鱼

关注

31
点赞
踩
179

收藏

觉得还不错? 一键收藏
61
评论
海康RTSP流转RTMP并推送至Web端展示

最近帮着老师做项目的时候碰到一个难题，将海康摄像头的影像实时传输到前端页面进行展示。Google查了两天，终于有些眉目，记录一下经验。大致需要经过以下几个步骤：获取海康摄像头的视频流（基于RTSP协议的视频流）流媒体服务器搭建前端页面选用合适的播放器进行播放下面详细说明一下每个步骤1. 获取海康摄像头的视频流（基于RTSP协议的视频流）不仅仅是海康摄像头，市面上大多...
复制链接

扫一扫