百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

浏览器播放rtsp视频流解决方案 浏览器播放rtsp流媒体

liuian 2024-12-23 12:08 68 浏览

最近项目中需要实时播放摄像头rtsp视频流，于是就专门做了些研究。而浏览器不能直接播放，只有通过插件或者转码来实现这个需求。

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

方案一: html5 + websocket_rtsp_proxy 实现视频流直播

实现原理

实现步骤

  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>

注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1

优缺点

  • 优点：实现比较简单
  • 缺点：收费的，免费版有很多限制

参考链接

  • html5 + websocket_rtsp_proxy 实现视频流直播
  • streamedian
  • html5_rtsp_player

方案二：ffmpeg + nginx + video，rtsp转rtmp播放

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

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

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~

实现步骤

  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;
        }
    }
}

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允许

参考链接

  • 在 Nginx 中启用 RTMP 服务
  • ffmpeg.org
  • videojs
  • videojs flash

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

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

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

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

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

  1. 安装ffmpeg工具
  2. 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
  1. 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 hls
  • videojs
  • videojs-contrib-hls

方案四：VLC插件播放

播放步骤

  1. 下载安装vlc
  2. 浏览器播放
<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>

优缺点

  • 优点： 可以直接播放RTSP，无需任何中介服务器的帮助
  • 缺点： 需要手动安装插件； 基于NPAPI，不被最新的 Chrome 和 Firefox 支持
  • 如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

参考链接

  • VLC wiki
  • 插件安装方法

其他方案

WebRTC

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

h5stream

参考地址：

  • github.com/liweilup/h5…
  • 使用H5Stream开发实时监控系统
  • H5Stream入门级应用，播放RTSP流视频

GB28181

参考地址：

  • LiveGBS GB28181流媒体服务
  • github

jsmpeg.js + ffmpeg + websocket + node

参考地址

  • # 在web中播放rtsp视频方案对比

原文 浏览器播放rtsp视频流解决方案 - 掘金

相关推荐

360防蹭网软件（360防蹭网软件下载）

无线防蹭网在：功能大全——网络优化——无线防蹭网（倒数第二个）右键360软件球的图标之后，弹出下拉的菜单中，进行选择“看网速。”进入到看网速的界面中，可以看到各个菜单中的“防蹭网”的选项。进入到防蹭网...

查找隐藏的文件夹（查找隐藏的文件夹在哪里）

1.用Windows电脑，打开文件夹，点击顶部目录的“查看”。2.弹出查看的所有目录，勾选最右边的“隐藏的项目”。3.勾选成功后，文件夹就会显示出隐藏的文件夹了。查找隐藏文件夹的方式如下：1、点...

蓝屏代码0x000000be（蓝屏代码0x0000003b）

按开机按钮，关闭操作系统，再开机时，按F8键进入选择菜单，进入安全模式，也许会有改善，再重启电脑，继续按F8键，此时可以选择使用最后一次正确的配置启动Windows选项，解决诸如新添加的驱动程序与硬件...

开始菜单在哪里（开始菜单在哪里电脑）

1、要显示出Excel表中的开始选项卡，需要在主菜单栏中点击“文件”，然后进入“选项”页面。2、在“选项”页面中选择“自定义功能区”，接着在右侧的“主选项卡”列表中勾选“开始”，然后点击“确定”按钮...

更新显卡驱动后黑屏（更新显卡驱动后黑屏重启）

很明显是显卡没有正常工作，驱动程序不正确，系统没有成功启动，可以尝试启动后按f8键，选择带网络连接的安全模式，进入后启动360安全卫士的软件管家，下载驱动大师，启动系统驱动检测，然后根据提示安装驱动就...

无限内存（无限内存购买的恐怖躲猫猫三旧版游戏）

在计算机系统中，没有真正意义上的无限内存。内存资源是有限的，如果被消耗完，计算机系统也会崩溃或变得非常缓慢。但是，对于某些需要处理大规模数据的任务，可能需要扩大内存以提高计算速度和效率。这可以通过以下...

qq浏览器手机版下载（qq浏览器手机版下载官网）

你是不是没有下载完整的软件，如果你一直用手机试验不成功的话，你可以尝试用电脑进行安装，首先，既然你喜欢在手机上使用qq浏览器，那么我们电脑也用qq浏览器，我平时也喜欢用qq浏览器，看新闻的话，添加书签...

qq电子邮件的格式怎么写的（qq电子邮件的一般格式）

1、常用格式：最常用的就是自己的“qq号+@qq.com”就好了2、英文邮箱账号：“英文或者数字@qq.com”3、foxmail邮箱：开通需要去注册，在格式后方加上“@foxmail.co...

显卡怎么区分级别（显卡等级怎么看）

1、以性能来分，4650以下为入门级（9600以下），4670以上，4830、4850等为中级（9600以上，GTX260以下），4870、5750、4890、5770等为高级（GTX260+以上）...

360手机杀毒完整版下载安装（手机360杀毒 免费下载）

对每台电脑的影响不同。常见的有：某些设置无法使用、自动更新出现问题，系统升级时升级不了、电脑运行速度变慢等。实际上win10系统自带的杀毒软件“Windows安全中心”的防御和杀毒能力非常突出，而且免...

回收站清空了怎么恢复文件（还原回收站被删除文件）

如果你清空了回收站的文件，别担心，还有多种方式可以尝试恢复这些文件。首先，如果你刚刚清空回收站且没有进行任何其他的操作，可以尝试使用撤销还原法来恢复文件。只需同时按住快捷键【Ctrl＋Z】即可完成撤销...

安卓adb驱动免费版（adb手机驱动）

1.下载ADB驱动程序你可以从Android官方网站下载最新版的ADB驱动，或者从第三方网站上下载。在下载后将文件解压到你想要的目录。2.安装ADB驱动程序运行驱动程序的安装程序，...

两台电脑连接重装系统（两台电脑怎么给另一台电脑重装系统）

如果电脑C盘确实安装了两个系统，建议格式化C盘重装系统。如果不知怎么有两个启动选项可以将其删除右击我的电脑/属性/高级/启动和故障恢复中的设置/在“默认操作系统”的下拉列表中选择你要使用的操作系统，然...

win10无法连接网络打印机（win10连不上打印机显示网络错误）
  • win10无法连接网络打印机（win10连不上打印机显示网络错误）
  • win10无法连接网络打印机（win10连不上打印机显示网络错误）
  • win10无法连接网络打印机（win10连不上打印机显示网络错误）
  • win10无法连接网络打印机（win10连不上打印机显示网络错误）
教务网络管理系统入口（内蒙古民族大学教务网络管理系统入口）
教务网络管理系统入口（内蒙古民族大学教务网络管理系统入口）

钟山学院官网http://www.zscollege.com/钟山学院教务处http://jwc.njzs.edu.cn/钟山学院教务处学生登录入口http://jwgl.zscollege.com/jwweb/（网站左侧）三江学院的...

2025-12-28 02:05 liuian

一周热门
最近发表
标签列表