场景

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

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

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

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

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

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

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

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

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

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

实现摄像头预览效果

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

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi

实现

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和端口以及秘钥信息，通过配置页面进行配置并进行修改时的二次密码校验

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

状态码不为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博客

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

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

场景

实现

猜你喜欢