位置: IT常识 - 正文

vue播放rtsp视频流

编辑:rootadmin
vue播放rtsp视频流

推荐整理分享vue播放rtsp视频流,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

工作有要播放视频监控的需求,最近就自己先了解了一下网页播放rtsp视频流的方法,以下是我的个人经验。 最终选择了vue+webrtc-streamer实现在网页播放rtsp流这种方法进行测试。

个人经验

第一次尝试了vue-video-player+videojs的方法,发现只适用于支持flash的浏览器,但目前所有浏览器的最新版都已不支持flash插件,于是放弃。

注意vue-video-player有个坑,在引入css文件的时候一直报错,原因是直接npm install vue-video-player出了问题。

经过各种百度半天,发现我使用的是vue2,不知道为什么没人说,vue2版本如果想要使用vue-video-player的话必须下载4.x版本。vue3的下载已经更改了插件名,是@videojs-player/vue。

下载4.0.1版本发现css文件可以正常引入,但是浏览器不支持flash所以没有播放成功。

第二次尝试ffmpeg,发现太复杂了,琢磨了半天无果。

第三次尝试webrtc-streamer,终于成功,并且相对于前两种方法都更简单!

vue+webrtc-streamer实现在网页播放rtsp视频流vue播放rtsp视频流

首先下载webtrc-streamer的压缩包,在github上有

https://github.com/mpromonet/webrtc-streamer/releases

下载windows版本

双击webrtc-streamer.exe启动服务

将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/stactic目录下,在index.html文件里引入这两个js文件。

写测试代码

<template> <div class="home"> <video id="video" autoplay width="600" height="400"></video> <video id="video1" autoplay width="600" height="400"></video> </div></template>//不放心我又引入了一遍 <script type="text/javascript" src="../../public/stactic/webrtcstreamer.js"></script> <script type="text/javascript" src="../../public/stactic/adapter.min.js"></script><script>export default { name: "HomeView", data() { return { webRtcServer: null, webRtcServer1: null }; }, mounted() { //192.168.1.100是启动webrtc-streamer的服务器IP,8000是webrtc-streamer的默认端口号,可以在服务端启动的时候更改的 this.webRtcServer = new WebRtcStreamer( "video", location.protocol + "//127.0.0.1:8000" ); //需要看的rtsp视频地址,可以在网上找在线的rtsp视频地址来进行demo实验,在vlc中能播放就能用 // this.webRtcServer.connect( // "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" // ); this.webRtcServer.connect( "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" ); //第二个视频 //根据不同的video标签来控制 this.webRtcServer1 = new WebRtcStreamer( "video1", location.protocol + "//127.0.0.1:8000" ); this.webRtcServer1.connect( "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" ); }, methods: {}, beforeDestroy() { this.webRtcServer.disconnect(); this.webRtcServer = null; }};</script>

此时运行网页已经可以看到视频了。

但是有缺点(还未解决):

播放的视频没有声音

控制台报错但不影响正常播放

如果有大佬知道如何解决,欢迎留言! 以上内容参考http://t.csdn.cn/gj93S

本文链接地址:https://www.jiuchutong.com/zhishi/287160.html 转载请保留说明!

上一篇:不列颠哥伦比亚省的一块南瓜田,加拿大 (© James Chen/Shutterstock)(不列颠哥伦比亚大学排名)

下一篇:Vue3 & app.use 与 install 函数的作用

  • 所得税费用调增分录
  • 小汽车属于固定资产的什么设备
  • 企业收到股利分红如何缴税
  • 小规模纳税人免税销售额
  • 小规模纳税人认定标准2023
  • 建筑企业小规模纳税人升为一般纳税人条件
  • 银行日记账必须一年一本吗
  • 库存完工产品属于什么会计科目,什么类别
  • 银行存款收付流程
  • 向境外支付特许权使用费免征增值税
  • 多计提以前年度损益调整账务处理怎么做
  • 主营业务收入借方负数表示
  • 管理费用对所得收入影响
  • 营业利润为负数说明什么
  • 政府补贴项目申报流程
  • 建筑行业跨期收入汇算清缴如何调整?
  • 社保公积金会计分录怎么写
  • 个人所得税怎么查工资明细
  • 医疗器械技术服务合同
  • 税金及附加附加指什么
  • 购买方红字信息表开具流程图
  • 企业重组特殊性处理通俗理解
  • 注册会计师考试成绩查询2023
  • 企业工商年报填错了怎么办
  • 最新的会计规定出台时间
  • php正则表达式实例
  • php魔术方法的讲解与使用
  • win10开机强制进入高级选项怎么退出
  • 共管账户的定义
  • 股权转让要交什么税举例
  • 净资产收益率怎么求
  • php怎么上传图片
  • 土地使用税若干问题的补充规定
  • 融资性租赁会计处理计入固定资产
  • 结转本月完工产品成本120000元
  • 其他收益属于利润表吗
  • 框架导入
  • Cookie 的 SameSite 属性
  • 深入全面剖析自己
  • 小企业原材料
  • 织梦添加文章如何修改高级参数
  • 固定资产报废后累计折旧
  • 融资交易的会计处理
  • 官方的问答
  • 车船使用税的征收标准是多少
  • 汽车租赁属于有形动产融资租赁服务?
  • 金蝶系统结账之后反结账
  • 自查补税怎么做账
  • 仓库出入库账本怎么做
  • 住宿收据怎样写
  • sqlserver2008不存在或拒绝访问怎么办
  • 企业原材料成本占比
  • 企业信息联网核查系统的意义
  • 处理交易性金融资产增值税买价含佣金吗
  • 去年少计提费用
  • 哪些进项发票不能认证
  • 非货币性资产交换换入资产的入账价值
  • 关联方往来款账务处理
  • 企业处置固定资产增值税税率
  • 购入钢材
  • 银行回单超过三个月可以补打吗
  • 银行本票的使用仅限于
  • sql安装不上去
  • hosts文件不起作用
  • win7系统如何一键还原
  • steam怎么sl
  • 如何调整windows桌面图标大小
  • windows无法访问\\192.168.1.104
  • 2015年win10共发布135个安全补丁 创历年之最
  • 安装与配置linux操作系统
  • Unity符国新:3D技术将渗透到生活的各个方面
  • js实现apply函数
  • 需要牢记的号码
  • 无线adb调试开关下载
  • javascript基础笔记
  • 充电显示调整差额是什么意思
  • android 开发 教程
  • javascript学习指南
  • 卷票是什么票
  • 云南港口城市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设