利用javacv解析rtsp流，通过websocket将视频帧传输到web前端显示成视频，更新最新方式

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>