Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理_视频流资源-程序员宅基地

技术标签： rtmp java web ▷项目总结流媒体 rtsp ▷Java程序开发 ffmpeg

Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理

方案一：服务器端用 websocket 接受 rtsp ，然后，推送至客户端
- 实现步骤：
方案二：使用 ffmpeg + nginx 把 rtsp 转成了 hls 协议，客户端使用 videojs 播放
- 实现步骤
方案三：用 ffmpeg 把 rtsp 转成 rtmp 通过 nginx代理出去，其中核心处用到了 nginx 的 nginx-rtmp-module 模块，在客户端则使用著名的网页播放器 jwplayer 来播放 rtmp 流即可，但是 jwplayer 播放器好像是付费的，此方案也是搭建流媒体服务器的通用方案之一。
- 实现步骤：
四：video-source资源

掘金：clouding：浏览器播放rtsp视频流解决方案
 利用JAVACV解析RTSP流，通过WEBSOCKET将视频帧传输到WEB前端显示成视频
 CSDN：zctel：javacv
CSDN：斑马jio：JavaCV转封装rtsp到rtmp（无需转码，低资源消耗）
博客园：之乏：流媒体
 Gitee：chengoengvb：RtspWebSocket

方案一：服务器端用 websocket 接受 rtsp ，然后，推送至客户端

此方案，客户端因为直接转成了mp4，所以H5的video标签直接可以显示。

参考地址：https://github.com/Streamedian/html5_rtsp_player

实现步骤：

服务器安装streamedian服务器
客户端通过video标签播放

<video id="test_video" controls autoplay></video>
<script src="free.player.1.8.4.js"></script>
<script>

    if (window.Streamedian) {
     
        var errHandler = function(err){
     
            console.log('err', err.message);
        };

        var infHandler = function(inf) {
     
            console.log('info', inf)
        };

        var playerOptions = {
     
            socket: "ws://localhost:8088/ws/",
            redirectNativeMediaErrors : true,
            bufferDuration: 30,
            errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player  = document.getElementById("test_video");
        html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov";

        var player = Streamedian.player('test_video', playerOptions);

        window.onbeforeunload = function(){
     
            player && player.destroy();
            player = null;
            Request = null;
        }
    }
</script>

方案二：使用 ffmpeg + nginx 把 rtsp 转成了 hls 协议，客户端使用 videojs 播放

参考地址：

https://videojs.com/getting-started/

HLS (HTTP Live Streaming) 直播是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件。

HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端，至少在一个分段媒体文件被完全下载后才能够开始播放，而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。

此外，在客户端开始下载之前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引，以保证观众任何时候连接进来都会看到较新的内容，实现近似直播的效果。
这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。

实现步骤

安装ffmpeg工具
ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"

ffmpeg 关于hls方面的指令说明：

-hls_time n: 设置每片的长度，默认值为2。单位为秒
-hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
-hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量
-hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>

<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL">
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('my_video_1', {
     "autoplay":true});
    player.play();
</script>

方案三：用 ffmpeg 把 rtsp 转成 rtmp 通过 nginx代理出去，其中核心处用到了 nginx 的 nginx-rtmp-module 模块，在客户端则使用著名的网页播放器 jwplayer 来播放 rtmp 流即可，但是 jwplayer 播放器好像是付费的，此方案也是搭建流媒体服务器的通用方案之一。

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp
rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash。

实现步骤：

安装ffmpeg工具
安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}

ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {
     "autoplay":true});
    player.play();
</script>

注意：使用谷歌浏览器播放时，需要开启flash允许

四：video-source资源

视频播放测试服务（spring boot+javacv+websocket）
spring boot+opencv+websocket:https://www.freesion.com/article/2770277090/

Web下无插件播放rtsp视频流的方案总结_网络_经验之外:https://blog.csdn.net/ajrm0925/article/details/91879551?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2

FFmpeg转封装rtsp到rtmp（无需转码，低资源消耗）_Java_banmajio的博客-程序员宅基地:https://blog.csdn.net/weixin_40777510/article/details/103764198?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

easyCV/pom.xml at master · eguid/easyCV · GitHub:https://github.com/eguid/easyCV/blob/master/pom.xml
javacv rtsp rtmp_Java：https://blog.csdn.net/zb313982521/article/details/88110368

JAVA中通过JavaCV实现跨平台视频/图像处理-调用摄像头：https://blog.csdn.net/weixin_33881041/article/details/85992437

javacv 通过rtsp 获取视频流设置帧率：https://www.cnblogs.com/svenwu/p/9663038.html

javaCV开发详解之8：转封装在rtsp转rtmp流中的应用（无须转码，更低的资源消耗）：https://www.cnblogs.com/eguid/p/10195557.html

RTSP实例解析：https://www.cnblogs.com/qq78292959/archive/2010/08/12/2077039.html

JAVACV集成海康摄像头RTSP流时出现的丢包与无法解析的问题：https://bbs.csdn.net/topics/392237412?page=1java使用opencv拉取rtsp流：https://blog.csdn.net/sinat_21184471/article/details/93978622

WebSocket插件：https://www.bbsmax.com/A/RnJW3xRRJq/sockjs+stomp的websocket插件

sockjs+stomp的websocket插件：https://www.bbsmax.com/A/pRdBPLN9Jn/

SpringBoot使用Websocket：https://blog.csdn.net/weixin_43835717/article/details/94066791

SpringBoot2.0集成WebSocket，实现后台向前端推送信息：https://blog.csdn.net/moshowgame/article/details/80275084

【Websoket】实时推送图像数据，前端实时显示：https://blog.csdn.net/qq_20038925/article/details/70919307

WebSocket传输图片：https://www.cnblogs.com/jzblogs/p/5613988.html

JavaScript进行WebSocket字节流通讯示例：https://blog.coloc.cc/2018/11/javascriptwebsocket.html

JavaScript进行WebSocket字节流通讯示例：https://www.cnblogs.com/coloc/p/8127268.html

spring boot 使用WebSocket与前端进行byte字节数组交互：https://blog.csdn.net/m0_37992075/article/details/83587624

spring boot集成javacv + websocket实现实时视频推流回放（延时1-2秒）：https://blog.csdn.net/qq_23945685/article/details/104074262

本文链接：https://blog.csdn.net/An1090239782/article/details/106659024

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

2024最新计算机毕业设计选题大全-程序员宅基地

文章浏览阅读1.6k次，点赞12次，收藏7次。大家好！大四的同学们毕业设计即将开始了，你们做好准备了吗？学长给大家精心整理了最新的计算机毕业设计选题，希望能为你们提供帮助。如果在选题过程中有任何疑问，都可以随时问我，我会尽力帮助大家。在选择毕业设计选题时，有几个要点需要考虑。首先，选题应与计算机专业密切相关，并且符合当前行业的发展趋势。选择与专业紧密结合的选题，可以使你们更好地运用所学知识，并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景，能够解决实际问题或改善现有技术。

dcn网络与公网_电信运营商DCN网络的演变与规划方法(The evolution and plan method of DCN)...-程序员宅基地

文章浏览阅读3.4k次。摘要：随着电信业务的发展和电信企业经营方式的转变，DCN网络的定位发生了重大的演变。本文基于这种变化，重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn

动手深度学习矩阵求导_向量变元是什么-程序员宅基地

文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么

月薪已炒到15w？真心建议大家冲一冲数据新兴领域，人才缺口极大！-程序员宅基地

文章浏览阅读8次。近期，裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前，国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行，裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要？在双碳的大背景下，ESG已然成...

对比传统运营模式，为什么越拉越多的企业选择上云？_系统上云的前后对比-程序员宅基地

文章浏览阅读356次。云计算快速渗透到众多的行业，使中小企业受益于技术变革。最近微软SMB的一项研究发现，到今年年底，78％的中小企业将以某种方式使用云。企业希望投入少、收益高，来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低，它们不必再建本地互联网基础设施，节省时间和资金，降低了企业经营风险。科技创新已成时代的潮流，中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境，提升企业经营效率的同时，也为企业..._系统上云的前后对比

esxi网卡直通后虚拟机无网_esxi虚拟机无法联网-程序员宅基地

文章浏览阅读899次。出现选网卡的时候无法选中，这里应该是一个bug。3.保存退出，重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网