基于SpringBoot实现的浏览器网页端视频监控流播放器，支持RTSP、RTMP视频流

最新推荐文章于 2024-04-30 11:17:59 发布
最新推荐文章于 2024-04-30 11:17:59 发布
阅读量2.1k 收藏 15
点赞数 4
文章标签： 音视频 spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42375133/article/details/132699897
版权

基于SpringBoot实现的浏览器网页端视频监控流播放器，支持RTSP、RTMP视频流

前言

该项目是RTSP、RTMP 流媒体网页直播服务
支持任意的 RTSP 或 RTMP 协议的视频流
实现了 HTTP-FLV 和 WS-FLV 两种传输协议
无需安装插件，兼容大部分浏览器
超低延迟，追帧播放，实时更新


一、项目搭建

1、创建springBoot项目

2、下载ffmpeg解码器（https://ffmpeg.org/download.html）放入项目的资源文件夹中

在这里插入图片描述

3、下载mpegts.js播放器（https://github.com/xqq/mpegts.js/releases）放入项目的static文件夹中

在这里插入图片描述


二、后端实现

在这里插入图片描述


三、前端实现

在这里插入图片描述


总结

具体代码请移步至 https://gitee.com/thetsing/IPCLiveServer 查看

如果这篇博客对你有帮助的话，记得给我点个赞，你的鼓励是对我最大的支持！谢谢｡◕‿◕｡

TheTsing
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
mpegts.js:HTML5 MPEG2-TS流播放器
03-25
mpegts.js 用TypeScript和JavaScript编写HTML5 MPEG2-TS流播放器。 mpegts.js针对低延迟的实时流播放进行了优化，例如DVB / ISDB电视或监视摄像机。 该项目基于 概述 mpegts.js的工作原理是将MPEG2-TS流转换为ISO BMFF（分段MP4）段，然后通过 API将mp4段馈送到HTML5 <video>元素中。 演示版 特征 通过H.264 + AAC编解码器在http（s）或WebSocket中传输的MPEG2-TS流进行回放 最好的情况下，只有1秒的极低延迟 支持处理动态编解码器参数更改（例如，视频分辨率更改） 支持Chrome，FireFox，Safari，Edge（旧版或Chromium）或任何基于Chromium的浏览器 支持自动跟踪HTMLMediaElement内部缓冲区的延迟 低CPU开销和低内存使用率
Springboot+netty实现的流媒体服务（可用于直播点播）
04-28
介绍：Springboot、netty实现的http-flv、websocket-flv流媒体服务（可用于直播点播），支持rtsp、h264、h265等、rtmp等多种源，h5纯js播放（不依赖flash），不需要依赖nginx等第三方，低延迟（支持识别h264、aac编码自动转封装）。 介绍：Springboot、netty实现的http-flv、websocket-flv流媒体服务（可用于直播点播），支持rtsp、h264、h265等、rtmp等多种源，h5纯js播放（不依赖flash），不需要依赖nginx等第三方，低延迟（支持识别h264、aac编码自动转封装）。 介绍：Springboot、netty实现的http-flv、websocket-flv流媒体服务（可用于直播点播），支持rtsp、h264、h265等、rtmp等多种源，h5纯js播放（不依赖flash），不需要依赖nginx等第三方，低延迟（支持识别h264、aac编码自动转封装）。 介绍：Springboot、netty实现的http-flv、websocket-flv流媒体服务（可用于直播点播），支持r
本项目是由springboot构建的red5流媒体服务器 服务添加了hls支持http请求支持
07-03
本项目是由springboot构建的red5流媒体服务器。服务添加了hls支持http请求支持。red5_hls是对red5的1.1.1版本进行springboot整合，整合后直接使用springboot进行启动和管理。打jar包运行。目前通过实时推流测试。该项目主要是用来方便学习red5的源码。同时新增了http,rtsp,udp,hls等协议的支持。项目带有推送demo。在red5项目原有的基础上可以进行hls协议的离线和在线视频推流观看
MPEGTS.js: 一个轻量级的JavaScript库，用于处理MPEG-TS流
gitblog_00037的博客
03-25 562
MPEGTS.js: 一个轻量级的JavaScript库，用于处理MPEG-TS流 项目地址:https://gitcode.com/xqq/mpegts.js MPEGTS.js是一个开源JavaScript库，专门设计用来解析和操作MPEG-2 Transport Stream（MPEG-TS）数据，让你在Web环境中轻松处理视频流服务。通过纯JavaScript实现，无需任何后端依赖，它为前...
Android IjkPlayer 播放RTSP/RTMP视频流 Demo
11-01
Android IjkPlayer 播放RTSP/RTMP视频流 Demo 具体可以看我的博客 Rtsp服务器搭建 : https://blog.csdn.net/EthanCo/article/details/125321957 ijkPlayer so编译详见 : https://blog.csdn.net/EthanCo/article/details/125271541 支持RTSP视频播放，支持RTMP视频，以及 GoPro的udp://@0.0.0.0:8554 视频流播放
h264视频流可用于rtmp和rtsp推流测试
09-13
1、本视频流为h264编码，流来源为海康摄像头。 2、本视频播放时长为3分03秒，几乎可以满足所有测试需要。 3、本视频以原有电影为素材进行剪辑加工而成。 4、本视频分辨率为：1920*1080，帧率为25。 5、本视频下载无需积分，比同网其他资源所需几十积分的资源那是相当地有良心。 6、欢迎大家积极下载，积极评论。
rtmp推流工具_SpringBoot整合腾讯云直播，生成推拉流配置及工具类详细讲解！
weixin_39701861的博客
12-13 4825
一、申请腾讯云账号，用自己的微信即可，第一次申请会送腾讯云直播20G的流量，用来测试足够了此截图为腾讯云后台截图二、创建Springboot工程，无需引入其他jar包三、1.分析腾讯云要求生成推流，拉流(直播)规则推流域名(domain)：自己的账号rtmp://+id+livepush.myqcloud.com例如我id为123456，那么我的推流域名(domain)rtmp://12...
springboot毕设项目基于的童车销售平台ms1r5（java+VUE+Mybatis+Maven+Mysql）
计算机程序设计
08-09 1505
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。springboot毕设项目基于的童车销售平台ms1r5（java+VUE+Mybatis+Maven+Mysql）Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。...
SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)
weixin_43703364的博客
12-06 7456
我使用直接解压的方式 可以去nginx官网下载喜欢的nginx版本 ，上传到服务器 解压然后编译（这个应该不难，可以使用 make make install ） 安装完成之后长这样 可以看到我这个截图上多了一个 nginx-http-flv-module 这个目录，这个是必要安装的一个模块 否则无法实现正常的监控视频播放建议直接下载到nginx的目录下、我安装到了 /user/lo
ZLMediaKit+SpringBoot+Vue+Geoserver实现拉取摄像头rtsp流并在web端播放
BADAO_LIUMANG_QIZHI的博客
08-24 1650
结合以上流程，需要实现对摄像头名称、在地图上位置的增删改查以及摄像头的预览功能。注意这里的摄像头只支持H264编码格式的拉流和播放。
整合SpringBoot + Nginx-http-flv-module + JavaCV(FFmpeg) RTSP推流，使用VUE + Flv.js播放
Prinz_Corn的博客
10-18 2854
目录1、安装nginx-rtmp-module2、Maven引入JavaCV包3、编写Java核心代码4、VUE安装video.js和flv.js5、编写前端测试代码6、运行效果 1、安装nginx-rtmp-module 参考这边：https://blog.csdn.net/Prinz_Corn/article/details/120746676 2、Maven引入JavaCV包 <dependency> <groupId>org.bytedeco</gr
springboot 摄像头 实时播放
04-13
html实时播放摄像头rtsp协议视频流
QT+FFMPEG设计的流媒体播放器(播放rtsp+rtmp流).zip
06-21
这是QT+FFMPEG设计的流媒体播放器完整源码 1. 支持RTMP流播放 2. 支持RTSP流播放 3. 支持音频播放 4. 支持视频播放 编译器： MinGW 32位 QT版本: 5.12.6
Android 内置RTSP/RTMP服务器，实现局域网内视频推流与播放 Demo
04-26
在同一局域网中，Android推流端(比如平板)内置RTSP/RTMP服务器，Android推流端将摄像头的画面...手机端支持对RTSP/RTMP视频流的播放 具体可以看我的博客 : https://blog.csdn.net/EthanCo/article/details/130387829
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
网页无插件播放rtsp视频，支持最新浏览器内核
10-18
支持最新浏览器内核，实现了用RTSP协议接入已有流媒体平台或摄像机的视频，通过转码后用WebRTC进行播放，只要支持WebRTC的浏览器或移动端都可以使用。用WebRTC播放监控视频可以处理高版本浏览器不支持插件的情况，且...
在PR中使用 obs 和 vokoscreen 录制的视频遇到的问题
i8520-酷谷的谷子-博客
04-27 330
1. obs 录制的视频 在 Adobe Premiere Pro CS6 中只有音频没有视频。vokoscreen 这里 主要是在Linux 系统使用 ，我这里是在虚拟机。录制的视频都是可以正常播放的，在PR不行。windows 10 系统开始菜单 点此轮图标（设置）2. vokoscreen 录制的视频，没有声音。这是是和视频录制的编码有关系，也和显卡驱动关系。首先 obs 点击 文件 ---> 设置。1.如果是虚拟机没有声音首先这样设置。2.系统有声音，录制视频没有声音。
音视频入门基础：像素格式专题（1）——RGB简介
最新发布
崔杰城的博客
04-30 807
三原色光模式（RGB color model，又称RGB表色系统、RGB颜色模型、红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加混色，以合成产生各种色彩光。RGB颜色模型的主要目的是在电子系统中检测，表示和显示图像，比如电视和电脑，利用大脑强制视觉生理模糊化（失焦），将红绿蓝三原色子像素合成为一色彩像素，产生感知色彩（其实此真彩色并非加色法所产生的合成色彩，原因为该三原色光从来没有重叠在一起，只是人类为了“想”看到色彩，大脑强制眼睛失焦而形成。
web浏览器通过videojs对接实时视频流rtsp、rtmp格式
05-13
Web浏览器通常无法直接播放实时视频流RTSP和RTMP格式的视频，但是可以使用video.js库对接实时视频流实现播放。video.js是一个基于HTML5 video标签的开源JavaScript库，提供了一组API，用于在Web浏览器中播放视频，支持多种格式的视频，包括MP4、WebM和FLV等。 通过对接实时视频流的方式，可以使用video.js播放RTSP和RTMP格式的视频，具体方法是通过使用video.js的HTTP Live Streaming（HLS）插件或Flash插件。HLS是HTTP基础之上的流媒体传输协议，可以将视频流分割成一个个小的ts文件，然后通过HTTP协议进行传输。Flash插件则使用RTMP协议，能够直接从流媒体服务器获取实时视频流。 在使用video.js播放RTSP和RTMP格式的视频时，需要先将实时视频流转换成HLS或RTMP格式，然后向Web浏览器提供播放地址。同时，还需要使用video.js API设置播放参数，如自动播放、循环播放、音量大小等。 总之，通过使用video.js库对接实时视频流，可以方便地在Web浏览器中实现实时视频流的播放，为应用程序提供更多的功能和交互性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值