ZLMediaKit+SpringBoot+Vue+Geoserver实现拉取摄像头rtsp流并在web端播放
场景
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 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：
select id, name, area_name, rtsp_stream_address
from bus_stream_media_video
insert into bus_stream_media_video
id,
name,
area_name,
rtsp_stream_address,
#{id},
#{name},
#{areaName},
#{rtspStreamAddress},