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<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 mapperPUBLIC "-//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_addressfrom 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/86722.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node-red - 读写操作redis

node-red - 读写操作redis 一、前期准备二、node-red安装redis节点三、node-red操作使用redis节点3.1 redis-out节点 - 存储数据到redis3.2 redis-cmd节点 - 存储redis数据3.3 redis-in节点 - 查询redis数据 附录附录1&#xff1a;redis -out节点示例代码附录2&#xff1a;redi…

神仙般的css动画参考网址,使用animate.css

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/这里面有很…

围棋与育种

最近因为娃子报名了围棋课&#xff0c;我本着交一次课学两个人的态度&#xff0c;入门围棋&#xff0c;买了些书&#xff0c;听了些课&#xff0c;有所得。学了两个多月&#xff0c;现在6级水平&#xff0c;了解了基本的攻杀技巧&#xff0c;会判断输赢。 下面截图是今天的一盘…

最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 element-ui 懒加载

最简单 实现 Element-ui el-table的懒加载表格数据 el-table懒加载请求数据 element-ui 懒加载 1、效果图2、代码 1、效果图 2、代码 <template> <el-table :data"tableData" style"width: 100%" expand-change"expandChange"><…

SLAM十四讲学习笔记 第二期:部分课后实践代码

持续更新.... 前期准备第二讲实验一&#xff1a;简单输出 第五讲任务一&#xff1a;imageBasics&#xff08;Ubuntu配置opencv&#xff09;任务二&#xff1a;双目匹配点云&#xff08;Ubuntu配置pangolin&#xff09;检验部分我认为可以加深对CMake的理解 任务三&#xff1a;r…

clickhouse-压测

一、数据集准备 数据集可以使用官网数据集&#xff0c;也可以用ssb-dbgen来准备 1.准备数据 这里最后生成表的数据行数为60亿行&#xff0c;数据量为300G左右 git clone https://github.com/vadimtk/ssb-dbgen.git cd ssb-dbgen/ make1.1 生成数据 # -s 指生成多少G的数据…

React绑定antd输入框,点击清空或者确定按钮实现清空输入框内容

其实实现原理和vue的双向绑定是一样的&#xff0c;就是监听输入框的onChange事件&#xff0c;绑定value值&#xff0c;当输入框内容发生变化后&#xff0c;就重新设置这个value值。 示例代码&#xff1a;我这里是统一在handleCancel这个函数里面处理清空逻辑了&#xff0c;你们…

函数的参数传递和返回值-PHP8知识详解

本文学习的是《php8知识详解》中的《函数的参数传递和返回值》。主要包括&#xff1a;向函数传递参数值、向函数传递参数引用、函数的返回值。 1、向函数传递参数值 函数是一段封闭的程序&#xff0c;有时候&#xff0c;程序员需要向函数传递一些数据进行操作。可以接受传入参…

如何给图片加水印?

如何给图片加水印&#xff1f;在我们的日常生活中&#xff0c;许多热爱摄影的朋友都会选择给自己的照片添加水印。这是因为我们深知&#xff0c;一张出色的照片背后需要付出大量的努力和心血&#xff0c;而通过添加水印可以有效地保护自己照片的版权&#xff0c;这样即使将图片…

数学建模及数据分析 || 4. 深度学习应用案例分享

PyTorch 深度学习全连接网络分类 文章目录 PyTorch 深度学习全连接网络分类1. 非线性二分类2. 泰坦尼克号数据分类2.1 数据的准备工作2.2 全连接网络的搭建2.3 结果的可视化 1. 非线性二分类 import sklearn.datasets #数据集 import numpy as np import matplotlib.pyplot as…

OLBY应用APP说明支持

OLBY应用APP说明支持 OLBY是一款支持在线调节鱼缸灯光控制的APP 支持模拟日出日落&#xff0c;给用户在手持端也可以很好的操作控制设备 技术支持 zcj 331163.com

spring boot 3使用 elasticsearch 提供搜索建议

业务场景 用户输入内容&#xff0c;快速返回建议&#xff0c;示例效果如下 技术选型 spring boot 3elasticsearch server 7.17.4spring data elasticsearch 5.0.1elasticsearch-java-api 8.5.3 pom.xml <dependency><groupId>org.springframework.boot</gr…