实现浏览器播放rtsp视频流的解决方案

于 2023-06-15 11:09:32 发布
阅读量642 收藏
点赞数
文章标签： ffmpeg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiehuanbin/article/details/131223679
版权

要实现这个目的，可以采用的方案非常得多，有商业的也有开源的，这里主要列举一些开源的方案。这里的方案都是我尝试过了的，有些成功，有些没成功。但是因为每个项目情况不同，这次没成的方法，换个项目也许就能成。

实现步骤

  1. 服务器安装streamedian服务器
  2. 客户端通过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 + video，rtsp转rtmp播放

rtmp是adobe开发的协议，一般使用adobe media server 可以方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也可以直接使用nginx实现rtmp

rtmp方式的最大的优点在于低延时，经过测试延时普遍在1-3秒，可以说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而由于flash本身的安全，现代浏览器大多禁用flash

实现步骤

3.video 播放

  1. 安装ffmpeg工具
  2. 安装nginx 注意：linux系统需要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)
  3. 更改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;
        }
    }
}

    4.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"

    5.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>

    方案：ffmpeg + video，rtsp转hls播放

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

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

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

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

    这种方式的理论最小延时为一个ts文件的时长，一般为2-3个ts文件的时长。

    实现步骤

  4. 安装ffmpeg工具
  5. 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方面的指令说明

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

    3.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>

    方案：VLC插件播放

    播放步骤

  10. 下载安装vlc
  11. 浏览器播放 
    <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

    其他方案

    一、WebRTC

    WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。

    二、h5stream

    三、GB28181

    四、jsmpeg.js + ffmpeg + websocket + node

LiveWeb视频管理平台
关注
博客
Liveweb视频监控汇聚平台
02-01 2319
LiveWeb服务器端包装包下载地址： https://haoyou456.com/test/LiveWeb.rar。liveWebPlayer H265播放器测试地址： https://haoyou456.com/test/支持RTMP分发、HLS分发、HTTP-FLV分发、WS-FLV分发、WebRTC分发;支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，视频对讲;WEB后台管理、二次开发接口、防盗链、播放地址加密、播放器集成等;云端录像、云端录像点播、云端录像下载;
博客
支持H.265视频网页Web播放的Liveweb播放器（播放2K实时视频，非常流畅）
01-13 4045
Liveweb是一款无插件web实时视频播放器，能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WSS视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式。Liveweb是一款无插件web实时视频播放器，能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WSS视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式。在安防领域，视频技术也经历了从H.261、H.263到H.264、H.265编解码格式的发展。
博客
海康、大华等安防摄像头、NVR,如何通过GB28181协议接入liveweb国标流媒体平台?
01-05 2225
基于GB28181协议的视频流媒体平台liveweb可接入海康、大华、华为、科达、宇视等等各家摄像头、NVR、平台，做到统一管理，以及统一视频接入、并实现WEB端无插件直播，同时支持PC浏览器、手机浏览器、微信等直播、回放。目前基本所有的安防设备厂家的摄像头、NVR、视频平台都支持GB28181协议，是各家设备统一接入管理最好的标准。2、打开摄像头或NVR的配置页面，找到平台接入的GB28181平台配置，将第二步中服务端配置中心的信息设置到设备的配置页面，设备就可以自动注册啦。
博客
视频流媒体服务解决方案/Liveweb视频汇聚平台赋能视频监控升级
09-04 1957
流媒体技术与视频监控的深度融合正在引领一场新的技术革命。随着5G网络、生成式AI、云计算和大数据等技术的不断发展和应用，Liveweb视频汇聚平台也在不断融合新兴技术与行业发展趋势，这一融合不仅提升了视频监控系统的性能和功能，还推动了整个安防行业的创新和发展。Liveweb视频融合汇聚系统广泛应用于小区监控、社区监控、公共场所监控（如机场、火车站、地铁站、商场等）、工业监控（如工厂、石化、煤矿等）等多个领域。
博客
智慧安防系统/一网统管Liveweb视频汇聚平台的视频轻量化特点及应用
09-04 1232
Liveweb视频汇聚平台以其独特的视频轻量化特点在安防监控领域展现出强大的应用潜力。通过高效接入与汇聚、多协议支持、视频转码与分发以及轻量化存储与回放等功能特点，平台为智慧城市、数字乡村、工业生产、智慧安防等多个领域提供了高效稳定的视频服务。随着技术的不断进步和应用场景的不断拓展，Liveweb视频汇聚平台将在未来发挥更加重要的作用。
博客
实时摄像头视频拼接的应用及价值
09-03 647
安防视频监控系统Liveweb视频综合管理平台，采用了开放式的网络结构，可以提供实时远程视频监控、视频录像、录像回放与存储、多路视频拼接、添加水印、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力，同时还具备权限管理、设备管理、鉴权管理、流媒体接入与转发等管理能力。边界防护：在边境、机场、港口等地区，实时摄像头视频拼接可以将多个摄像头的视频流拼接成一个连续的监控画面，以增强对边界安全的监测能力。视频墙显示：在监控中心或指挥中心，实时摄像头视频拼接经常用于视频墙显示。
博客
视频汇聚平台Liveweb支持H.265编码播放
09-03 1075
Liveweb支持多种主流视频流媒体协议，如HLS、HTTP-FLV、WebSocket-FLV、WebRTC、RTSP、RTMP、WS-FMP4、HTTP-FMP4等，以及GB28181等国家标准协议和多家知名厂商的私有协议，使得平台能够兼容市面上几乎所有的视频源设备，提升系统的灵活性和兼容性。H.265在相同画质下的码率比H.264更低，这意味着在相同的带宽下，H.265可以传输更高质量的视频。此外，在相同的画质和码率下，H.265占用的存储空间比H.264少约50%，这进一步降低了存储成本。
博客
视频监控Liveweb汇聚平台：视频集中录制存储/云端录像/顺序倒放功能操作介绍
09-02 919
安防视频监控系统Liveweb视频综合管理平台，采用了开放式的网络结构，可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力，同时还具备权限管理、设备管理、鉴权管理、流媒体接入与转发等管理能力。今天我们来具体介绍下Liveweb视频融合平台的录像存储功能及相关配置操作。Liveweb支持利用多个存储服务器来做集中存储，以此增加服务资源的利用率。
博客
视频监控汇聚平台Liveweb新增支持多路通道拼接功能
09-02 543
Liveweb通过视频拼接技术，对有重叠区域的多路源视频数据利用拼接算法进行无缝实时拼接，消除重叠区域，形成宽角度、大视场视频图像，从而实现将多路监控视频拼接成一路视频，使拼接后的视频清晰无缝，并实时播放，同时支持回放查看，解决多个人同时对同一监控场景不同角度进行观看的需求，充分满足用户的需求。在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。在此需求的环境下，多路监控视频拼接、视频融合则应运而生。
博客
视频监控汇聚平台Liveweb通道播放支持添加水印及操作步骤介绍
09-02 682
安防视频监控平台Liveweb采用了开放式的网络结构，系统可支持的接入协议包括：国标GB28181、RTSP/Onvif、RTMP，以及厂家的私有协议与SDK，如：海康ehome、海康sdk、大华sdk、宇视sdk、华为sdk、萤石云sdk、乐橙sdk等，兼容各品牌的IPC、NVR、移动手持终端、执法仪、布控球、无人机等设备的接入，可以覆盖市面上99%的前端监控设备。1）在平台导航栏【设备管理】中，点击设备的通道列表，选择需要添加水印的通道，点击【编辑】按钮，找到【水印设置】的选项；
博客
视频监控汇聚平台Liveweb视频流媒体服务平台解决方案和常见的接入方式
08-30 746
LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，云台控制，视频对讲;它能够统一管理和整合不同品牌、不同协议的视频资源，构建视频数据资源池，并通过视频资源目录为各类业务场景提供丰富、实时、高清的视频资源。- 利用视频接入网关，整合已有的或新建的视频资源，支持向上/向下级联推送。
博客
视频汇聚平台Liveweb视频流媒体平台视频监控系统解决方案
08-30 976
Liveweb作为一款灵活部署、具有强大扩展性的安防视频监控平台，不仅支持多种主流标准协议如GB28181、RTSP/Onvif、RTMP等，还能兼容各厂家的私有协议和SDK，如海康Ehome、海大宇等。LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，云台控制，视频对讲;
博客
Liveweb视频汇聚平台支持WebRTC协议赋能H.265视频流畅传输
08-29 1330
LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，云台控制，视频对讲;此外，Liveweb平台还支持多种视频流格式的分发，如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WS-FMP4、HTTP-FMP4等，可以满足不同用户和设备的需求。在这些场景中，视频监控是不可或缺的一部分。
博客
实现国标GB/T28181流媒体服务解决方案安防4G摄像头互联网直播方案
08-29 861
国标GB28181视频流媒体服务Liveweb负责将GB28181设备/平台推送的PS流转成ES流，然后提供RTSP、RTMP、FLV、HLS多种格式进行分发，实现web浏览器、手机浏览器、微信、PC客户端等各终端无插件播放。同时，Liveweb流媒体服务器对外提供HTTP API接口，通过接口可以获知流媒体转发服务的运行状态信息，转发会话信息，服务器配置和版本信息等。
博客
基于国标GB28181和Ehome等多协议接入Liveweb视频汇聚平台方案
08-28 839
云端录像、云端录像点播下载、设备录像点播下载;Liveweb视频融合/汇聚云平台支持多协议、多类型设备接入，可将各个地域、各个点位部署的前端设备快速接入（如：挂载无人机监控视频、定点视频监控、执法记录仪、4G布控球、单兵及视频会议等），将海量视频资源汇聚至平台进行智能识别与分析、监控视频查看、抓拍、录像与存储、视频流分发、告警消息推送、视频数据共享等服务，从而提供扁平化、可视化、综合化的视频汇聚与融合管理能力。视频支持单画面、多画面显示，可选择任意一路或多路视频观看，视频窗口数量1、4、9、16个可选。
博客
Liveweb视频汇聚融合平台解决方案常见的接入方式及场景应用
08-28 679
Liveweb视频汇聚与融合赋能平台支持多协议（GB28181/Onvif/RTSP/RTMP/海康SDK/Ehome/大华SDK/宇视SDK）、多类型设备(IPC/NVR/监控平台)的接入，可将分散不同品牌、不同协议的视频资源进行统一整合和管理，实现视频图像资源大数据的一网汇聚，构建视频数据资源池，同时通过构建视频资源目录，为各类业务场景提供丰富、实时、高清的视频资源，满足多样化的视频资源调度与业务使用需求。2、高度灵活：实现多部门业务系统、不同平台、不同设备灵活接入，也可非常方便的进行各种应用的叠加。
博客
安防视频监控平台Liveweb视频汇聚管理系统
08-27 829
智慧安防监控Liveweb视频管理平台能在复杂的网络环境中，将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚Liveweb平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力。今天我们来介绍下安防视频监控平台Liveweb系统的管理能力。
博客
视频汇聚平台：Liveweb流媒体协议支持的前瞻性
08-26 900
深圳好游科技Liveweb视频汇聚平台是一款基于云-边-端一体化架构的视频融合+AI智能分析平台，广泛应用于工地、仓储、工厂、社区、校园、楼宇等多个领域。平台凭借其强大的数据接入、处理、转码及分发能力，在视频监控领域展现出显著的技术优势和应用前景。本文将详细介绍Liveweb视频汇聚平台对流媒体协议的支持及其特点。
博客
视频监控/监控汇聚系统Liveweb平台方案分享
08-26 562
LiveWeb是深圳市好游科技有限公司开发的一套综合视频汇聚管理平台，可提供多协议（RTSP/RTMP/GB28181/海康Ehome/大华，海康SDK等）的视频设备接入，支持GB/T28181上下级联，RTSP\RTMP转GB/T28181，云台控制，视频对讲;视频安防产品可接入标准协议的摄像头，提供设备管理、视频存储、监控回看和用量统计等一体化视频安防解决方案，实现实时监控管理，应用于安全生产、平安城市、智慧校园等多个场景。为用户提供接入监控上云，监控视频存储在对象存储里，可随时查看监控历史流信息。
博客
视频监控/视频汇聚Liveweb视频监控系统解决方案
08-22 457
以上方案可以将监控系统、应急联动系统、GIS技术等有机结合在一起，实现了远程监控、遥控和报警联网系统的无缝连接，同时投入费用合理，能够更加有效地实现公安领域的安全防范，提高安全防范技术水平。5、单兵系统接入技术：将单兵系统与监控系统进行接入，将单兵记录仪的实时采集的图像、视频、语音等信息传输到后台管理平台，实现对单兵设备的集中管理，为警务工作提供更加优质的技术支持。6、后台管理平台：通过云端管理平台，实现对执法人员使用终端设备的授权与权限管理、设备状态监控和远程维护、数据存储管理、数据统计分析等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值