javacv拉取rtsp流通过websocket传输到web前端显示
这种方式不适合商业项目思路,只适合作为效果普通简单展示,该方式缺陷:当页面打开过多时,因为后端传输到前端的数据会增加,所以每个页面在单位时间内接收到的数据就会急剧减少,造成出现PPT卡帧现象
说明一下,我这里只是介绍一下如何实现的一个小demo,因为我做的这个rtsp解析主要是一个测试工具,简单说一下需求,其他的服务器为我提供了了一个rtsp流,我要做的就是将这个视频流解析在web端进行展示,我的这个需求很简单,只是作为一个测试工具来说,并不是商业版本,所以为了追求效率,并且也不会遇到什么高并发的情况,只是提供这样一种思路做出快速开发满足于业务需求。其实这就相当于直播的感觉,因为我获取的rtsp流都是通过监控摄像头获取的实时数据,所以我这边是要去解析rtsp流的,至于为什么是rtsp,就要问提供流的为什么是rtsp呢?为了满足需求,想过几种方案,纯前端直接解析rtsp,但是需要组件,而且查询资料后发现这些插件好像并不好使,不是这个不兼容就这那个不兼容,要不是就是需要浏览器去安装插件,太麻烦。后端解析,前端显示呢,大部分的方案都说是将rtsp转换成rtmp流,然后通过前端组件,比如video.js这种去重新解析,还要通过nginx去搭建服务武器,太麻烦,我最不想要的就是搭建各种环境,实际条件也不允许这么麻烦还要搭建环境,最快捷的方式就是写的这个项目,最好直接就能跑起来,所以,我就想到了视频反正都是一帧一帧的图片,不如前端就直接不停的刷新图片得了,这不就是视频了么,再说一下,我这个是监控视频显示,对音频没要求,所以我的处理是没处理音频的,这里只是做视频显示,说了这么多,下面开始正题吧。项目地址:
https://github.com/001ItSky/videoservice
https://gitee.com/dxl96/video-service
追加:2021.06.12 更新方式,更加合理的展示方式,废弃websock,解析更加简单,不依赖第三方服务器,不依赖浏览器插件,单体jar服务,部署即可展示,速度更快,更新为流式解析,解析方式查看最新demo:https://blog.youkuaiyun.com/IT_CREATE/article/details/117830292
1、首先我们需要引入相关的jar包,javacv和websocket的,pom文件如下:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.de</groupId>
<artifactId>videoservice</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>videoservice</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<commons.io.version>2.5</commons.io.version>
<commons.fileupload.version>1.3.3</commons.fileupload.version>
<hutool.version>4.6.4</hutool.version>
<fastjson.version>1.2.47</fastjson.version>
<lang3.version>3.9</lang3.version>
<jsckson.version>2.10.3</jsckson.version>
<javacv.version>1.5.1</javacv.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>${commons.io.version}</version>
</dependency>
<!--文件上传工具类 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons.fileupload.version}</version>
</dependency>
<!-- 阿里JSON解析器 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>${fastjson.version}</version>
</dependency>
<!--好用的工具集-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>${hutool.version}</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>${lang3.version}</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.bytedeco</groupId>
<artifactId>javacv-platform</artifactId>
<version>${javacv.version}</version>
<type>pom</type>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>