利用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>
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值