ZLMediaKit+SpringBoot+Vue+Geoserver实现拉取摄像头rtsp流并在web端播放

╰半夏微凉° 2023-10-15 09:42 32阅读 0赞

## 场景 ##

SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交：

[SpringBoot+Vue+Openlayers实现地图上新增和编辑坐标并保存提交\_霸道流氓气质的博客-CSDN博客][SpringBoot_Vue_Openlayers_-CSDN]

开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放：

[开源流媒体服务器ZLMediaKit在Windows上运行、配置、按需拉流拉取摄像头rtsp视频流)并使用http-flv网页播放\_srs按需拉流\_霸道流氓气质的博客-CSDN博客][ZLMediaKit_Windows_rtsp_http-flv_srs_-CSDN]

GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)：

[GeoServer简介、下载、配置启动、发布shapefile全流程(图文实践)\_霸道流氓气质的博客-CSDN博客][GeoServer_shapefile_-CSDN]

若依前后端分离版手把手教你本地搭建环境并运行项目：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_ruoyi本地调式\_霸道流氓气质的博客-CSDN博客][ruoyi_-CSDN]

结合以上流程，需要实现对摄像头名称、在地图上位置的增删改查以及摄像头的预览功能。

注意这里的摄像头只支持H264编码格式的拉流和播放。

实现摄像头预览效果

![019ea7beee144283a2c1cc83520098f5.gif][]

![Image 1][]

地图上新增和编辑坐标效果

![4630a0948c764eb1a9f3250f67b0ace7.gif][]

![Image 1][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]

## 实现 ##

1、参考以上搭建前后端分离框架，建表如下

![5b86034e263842fe8b2879b0f7105ec1.png][]![Image 1][]

建表语句：

DROP TABLE IF EXISTS `bus_stream_media_video`;
    CREATE TABLE `bus_stream_media_video`  (
      `id` bigint NOT NULL AUTO_INCREMENT COMMENT '序号',
      `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '名称',
      `rtsp_stream_address` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT 'rtsp流地址',
      `area_name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '位置',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE = InnoDB AUTO_INCREMENT = 26 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci COMMENT = '流媒体摄像头' ROW_FORMAT = DYNAMIC;

2、摄像头拉流预览流程

选择某个摄像头进行预览时，先校验流媒体相关信息是否设置，是才能预览

拿着该条数据的rtsp流地址调用ZLMediaKit的拉流的api进行拉流。

api拼接规则：

http://流媒体服务ip:流媒体服务端口/index/api/addStreamProxy?vhost=流媒体服务ip&app=live&stream=拼接时间戳&url=摄像头rtsp地址&secret= 流媒体服务秘钥

调用拉流api时需要流媒体服务器的ip和端口以及秘钥信息，通过配置页面进行配置并进行修改时的二次密码校验

![78cadc326f294cef96df8c5c3c006685.png][]

![Image 1][]

然后解析拉流接口返回的json数据

![527164c6443a476eb5f9dd2f0339d37e.png][]

![Image 1][]

状态码不为0或接口不通无响应等则提示不可预览，状态码为0则可预览。

解析data下的key，按照/解析，比如上面解析出ip:127.0.0.1,流应用live,流id为test。

进行http-flv视频预览， 预览url拼接规则：

http://key解析的ip:流媒体服务端口/key解析的live/key解析的test.flv

这里的流程可参考上面博客。

2、使用框架自带的代码生成工具生成代码并进行实体类部分修改

摄像头实体类:

import com.ruoyi.common.annotation.Excel;
    import com.ruoyi.common.core.domain.BaseEntity;
    import lombok.AllArgsConstructor;
    import lombok.Builder;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    import java.math.BigDecimal;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    @Builder
    public class BusStreamMediaVideo extends BaseEntity
    {
        private static final long serialVersionUID = 1L;
    
        /** 序号 */
        private Long id;
    
        /** 名称 */
        @Excel(name = "名称")
        private String name;
    
        /** 位置x坐标 */
        private BigDecimal siteX;
    
        /** 位置y坐标 */
        private BigDecimal siteY;
    
        /** 区域位置 */
        @Excel(name = "区域位置")
        private String areaName;
    
        /** RTSP addresss */
        @Excel(name = "rtspAddress")
        private String rtspStreamAddress;
    
        private BigDecimal[] videoAdd;
    
    }

流媒体设置DTO类:

import lombok.AllArgsConstructor;
    import lombok.Builder;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    @Builder
    public class BusStreamMediaVideoParamDto
    {
    
        private String ip;
    
        private String port;
    
        private String secret;
    
    }

Mapper接口层:

import com.ruoyi.system.domain.BusStreamMediaVideo;
    import com.ruoyi.system.redisAop.AopCacheEnable;
    import com.ruoyi.system.redisAop.AopCacheEvict;
    import java.util.List;
    
    public interface BusStreamMediaVideoMapper
    {
        /**
         * 查询摄像头参数
         *
         * @param id 摄像头参数ID
         * @return 摄像头参数
         */
            public BusStreamMediaVideo selectBusStreamMediaVideoById(Long id);
    
        /**
         * 查询摄像头参数列表
         *
         * @param
         * @return 摄像头参数集合
         */
        @AopCacheEnable(key = "busStreamMediaVideo",expireTime = 86400)
        public List<BusStreamMediaVideo> selectBusStreamMediaVideoList(BusStreamMediaVideo busStreamMediaVideo);
    
        /**
         * 新增摄像头参数
         *
         * @param
         * @return 结果
         */
        @AopCacheEvict(key = "busStreamMediaVideo")
        public int insertBusStreamMediaVideo(BusStreamMediaVideo busStreamMediaVideo);
    
        /**
         * 修改摄像头参数
         *
         * @param
         * @return 结果
         */
        @AopCacheEvict(key = "busStreamMediaVideo")
        public int updateBusStreamMediaVideo(BusStreamMediaVideo busStreamMediaVideo);
    
        /**
         * 删除摄像头参数
         *
         * @param id 摄像头参数ID
         * @return 结果
         */
        @AopCacheEvict(key = "busStreamMediaVideo")
        public int deleteBusStreamMediaVideoById(Long id);
    
        /**
         * 批量删除摄像头参数
         *
         * @param ids 需要删除的数据ID
         * @return 结果
         */
        @AopCacheEvict(key = "busStreamMediaVideo")
        public int deleteBusStreamMediaVideoByIds(Long[] ids);
    }

注意这里使用了自定义缓存注解。

SpringBoot中通过自定义缓存注解(AOP切面拦截)实现数据库数据缓存到Redis：

[SpringBoot中通过自定义缓存注解(AOP切面拦截)实现数据库数据缓存到Redis\_redis切面\_霸道流氓气质的博客-CSDN博客][SpringBoot_AOP_Redis_redis_-CSDN]

Mapper.xml：

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.ruoyi.system.mapper.BusStreamMediaVideoMapper">
    
        <resultMap type="BusStreamMediaVideo" id="BusStreamMediaVideoResult">
            <result property="id" column="id"/>
            <result property="name" column="name"/>
            <result property="areaName" column="area_name"/>
            <result property="rtspStreamAddress" column="rtsp_stream_address"/>
        </resultMap>
    
        <sql id="selectBusStreamMediaVideoVo">
            select id, name, area_name, rtsp_stream_address
            from bus_stream_media_video
        </sql>
    
        <select id="selectBusStreamMediaVideoList" parameterType="BusStreamMediaVideo"
                resultMap="BusStreamMediaVideoResult">
            <include refid="selectBusStreamMediaVideoVo"/>
            <where>
                <if test="name != null  and name != ''">and name = #{name}</if>
                <if test="areaName!=null and areaName != ''">and area_name = #{areaName}</if>
                <if test="rtspStreamAddress!=null and rtspStreamAddress != ''">and rtsp_stream_address = #{rtspStreamAddress}</if>
            </where>
        </select>
    
        <select id="selectBusStreamMediaVideoById" parameterType="Long" resultMap="BusStreamMediaVideoResult">
            <include refid="selectBusStreamMediaVideoVo"/>
            where id = #{id}
        </select>
    
        <insert id="insertBusStreamMediaVideo" parameterType="BusStreamMediaVideo">
            insert into bus_stream_media_video
            <trim prefix="(" suffix=")" suffixOverrides=",">
                <if test="id != null">id,</if>
                <if test="name != null">name,</if>
                <if test="areaName != null">area_name,</if>
                <if test="rtspStreamAddress != null">rtsp_stream_address,</if>
            </trim>
            <trim prefix="values (" suffix=")" suffixOverrides=",">
                <if test="id != null">#{id},</if>
                <if test="name != null">#{name},</if>
                <if test="areaName != null">#{areaName},</if>
                <if test="rtspStreamAddress != null">#{rtspStreamAddress},</if>
            </trim>
        </insert>
    
        <update id="updateBusStreamMediaVid

[SpringBoot_Vue_Openlayers_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121150132
[ZLMediaKit_Windows_rtsp_http-flv_srs_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/130136245
[GeoServer_shapefile_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109636080
[ruoyi_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[019ea7beee144283a2c1cc83520098f5.gif]: https://img-blog.csdnimg.cn/019ea7beee144283a2c1cc83520098f5.gif
[Image 1]: 
[4630a0948c764eb1a9f3250f67b0ace7.gif]: https://img-blog.csdnimg.cn/4630a0948c764eb1a9f3250f67b0ace7.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[5b86034e263842fe8b2879b0f7105ec1.png]: https://img-blog.csdnimg.cn/5b86034e263842fe8b2879b0f7105ec1.png
[78cadc326f294cef96df8c5c3c006685.png]: https://img-blog.csdnimg.cn/78cadc326f294cef96df8c5c3c006685.png
[527164c6443a476eb5f9dd2f0339d37e.png]: https://img-blog.csdnimg.cn/527164c6443a476eb5f9dd2f0339d37e.png
[SpringBoot_AOP_Redis_redis_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118267333