electron+vue网页直接播放RTSP视频流?

目前大部分摄像头都支持RTSP协议,但是在浏览器限制,最新版的浏览器都不能直接播放RTSP协议,Electron 桌面应用是基于 Chromium 内核的,所以也不能直接播放RTSP,但是我们又有这个需求怎么办呢?

市场上的方案很多,有很多免费开源的,同时也有比较成熟的商业软件,丰俭由人,大家可以自己选择。

1.免费开源方案,其实就是转码方案。

优势:免费。

劣势:延迟高,有的甚至达到几秒或者十几秒。播放容易卡顿,服务器性能严重影响播放质量,特别播放高清视频或者多路视频非常容易卡住。

原理:一般是RTSP转RTMP或者转http-flv、转HLS(延迟高)、转WebRTC,播放端用flv.js播放或video.js播放。

2.网页直接播放方案:首选推荐猿大师播放器。

优势:成熟的商业软件,直接播放RTSP视频流,延迟低,最低300毫秒延迟,播放稳定,同时播放20路不卡顿,支持H.264和H.265格式,兼容最新版本主流浏览器,包含最新版Chrome,支持的协议和视频格式非常广泛。

劣势:终端电脑需要安装插件。

原理:底层调用VLC播放器或FFPLAY播放器控件播放,理论上 VLC播放器和FFPLAY播放器能播放的视频格式,猿大师播放器都可以播放,支持本地硬件解码和加速,性能与桌面版播放器播放效果一样,这两款开源的播放程序,能支持目前已知的大部分视频格式。

第一步:下载猿大师播放器,下载地址:http://www.yuanplayer.com/xiazai/

第二步:联系在线客服开通试用版,首次7天,到期后可以延长。

第三步:用猿大师提供的在线网页进行测试,网址:http://test.yuanmaster.com/player

这个测试页面是猿大师播放器多引擎版本,可以选择VLC播放引擎或者FFPLAY播放引擎,效果与用电脑桌面版播放完全一致,另外还可以找客服要VUE或者HTML的范例源码,纯前端的插件,集成到项目上很简单,懂前端的技术一看就会。

相关推荐
开开心心就好5 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
默_笙9 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan11 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
+VX:Fegn089512 小时前
计算机毕业设计|基于springboot + vue旅游管理系统(源码+数据库+文档)
java·开发语言·vue.js·spring boot·课程设计
雪芽蓝域zzs12 小时前
第 7 章:双 Y 轴组合图(柱状 + 折线,看板高频场景)
vue.js·echars
一 乐13 小时前
二手交易平台|基于springboot + vue二手交易平台(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序
天若有情67313 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具
vx-程序开发14 小时前
【计算机毕设】django校园跑腿服务系统83141
java·数据库·vue.js·spring boot·spring·elasticsearch·django
林语琛14 小时前
我写的 switch…break 被 Babel 偷偷吞了
前端·javascript·babel
liuchangng14 小时前
Jev 模型研究:从生成式大模型到决策式模型——System One、RLCD 校准与采用边界
java·javascript·人工智能·python·深度学习