位置: 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 函数的作用

  • 增值税怎么做账务处理
  • 耕地占用税的税目
  • 如何计算土地增值税的增值额
  • 销售农产品是否可以抵税
  • 滴滴出行怎么弄电子发票
  • 累计折旧计入
  • 政府扶持企业资金要交税吗
  • 商业企业销售的产品
  • 拆迁补偿费会计分录怎么写
  • 包装设置图片
  • 分销佣金分配
  • 航天金穗服务费抵扣
  • 不动产增值税怎么算
  • 房屋租赁发票在哪开
  • 建筑行业预算
  • 金税三期啥意思
  • 物流辅助服务需要办许可证吗
  • 建筑企业甲供材税收筹划
  • 财务费用应计入什么账户
  • 出租房产业务企业所得税如何处理?
  • 收到质量索赔款怎么入账
  • 公司注销清算债权委托另一股东处理
  • 稽查补缴增值税怎样做账
  • 核定征收个体户怎么报税
  • 公允价值变动损益在利润表哪里
  • 商标公司转让给个人提供什么?
  • system idle process是什么进程(CPU的空闲率)
  • 各种主板bios中文设置图解
  • windows 10无法开机
  • 收到商品的会计分录怎么写
  • 融资租入固定资产是什么意思
  • 环绕着山的是什么歌
  • vue项目启动过程
  • Vue3通透教程【十三】TS简单类型详解
  • 公章盖的字不完整有效吗
  • 专利权研发成功的会计分录
  • 公司分红给个人
  • 招待客户住宿费进项税可以抵扣吗
  • wordpress图片大小设置
  • mysql临时表什么时候销毁
  • 刻章费用如何做账务处理
  • 车补贴是要缴纳增值税吗
  • 劳务报酬所得与个人经营所得的区别
  • 差旅费可以抵扣嘛
  • sql server 2008使用教程
  • 免征增值税的会计处理 小企业会计准则
  • 分公司员工在总公司缴纳社保
  • 股权收购协议书实际案例
  • 承兑到期没兑现怎么办
  • 在建工程进项税额抵扣最新通知
  • 小规模纳税人减按1%账务处理
  • 固定资产多少钱算固定资产
  • 住房基金可以取出来用吗
  • 增值税专用发票电子版
  • 预付账款为什么属于资产类
  • 同城票据交换差额户的帐号怎么查对方的帐号
  • 工程施工人工费如何结转
  • 哪些商业保险可以抵扣个税
  • 固定资产如何分类?
  • 小企业应收账款减值
  • mysql中排序规则是什么意思
  • Windows10下mysql 5.7.17 安装配置方法图文教程
  • 电脑winxp系统
  • rtm平台全称
  • easybcd修复ubuntu
  • windows10x预览版
  • win7系统更新补丁会解决游戏卡顿的问题吗
  • windows7如何取消锁屏密码
  • win7切换输入法不见了怎么弄出来
  • Facebook Open Platform编译FAQ
  • linux 数据恢复
  • linux的启动顺序
  • 手把手教你使用opc
  • linux中scp命令和scp命令用法大全
  • python写汉字代码
  • javascript用的多吗
  • jquery实现ajax提交表单信息的简单方法(推荐)
  • 《javascript高级程序设计》
  • android studio 运行配置
  • 长沙买房后多久可以提取公积金
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设