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

  • 销项税额和进项税额发票怎么区别
  • 所得税五个年度怎么算
  • 小规模纳税人税费会计分录
  • 增值税普通发票和电子普通发票的区别
  • 公司注册后一直没有营业怎么办
  • 售后维修收入怎么入账
  • 残疾人就业保障金申报时间
  • 信息技术服务费计入什么会计科目
  • 发票没作废写上作废了怎么办
  • 借款应付利息计算
  • 预售款计入收入吗
  • 欠缴税款会给纳税证明吗
  • 成本还原有什么作用
  • 事业单位破产清算程序规定
  • 借款转资本公积怎么算税
  • 营改增之前材料含税吗
  • 公司聚餐费用标准
  • 土地前期开发费用计征契税
  • 年金终值的公式
  • 员工出差车费如何报销
  • 已认证的发票作废进项税转出账务处理
  • 投资收益所得税表怎么填
  • 非营利组织取得稳岗补贴收入要交税吗
  • 其他应收款要做账吗
  • 电子税务局社保申报截止日期每月
  • 银行支票怎么用
  • 人力资源服务差额
  • 1697510728
  • win10怎么更换版本
  • 金税盘服务费怎么申报抵扣
  • 只有收据没有发票可以保修吗
  • 递延所得税资产是什么意思
  • 巴黎拉丁区有个著名的人文景点叫做先贤祠
  • php unicode
  • 兰萨罗特岛的地理位置
  • 深度强化学习-DQN算法原理与代码
  • 差旅费的进项税额需要转出吗
  • 个人所得税既有工资薪金又有劳务报酬房屋租金
  • 代扣代缴个人社保账务处理
  • mongodb 教程
  • 紫白择日法实例详解
  • 小微企业认定办法
  • 保理属于什么行业分类
  • 个体户逾期未报年报后补报了怎么办
  • 获取gridview某行某列的值
  • 收到银行承兑汇票的账务处理
  • 计提折旧会计分录怎么做
  • 小微企业金融免税政策
  • 未开票的收入如何申报增值税
  • 单位外币卡账户的资金应从其单位的外汇账户转账存入
  • 餐饮店赠品
  • 餐饮业可以开具免税发票吗
  • 应交土地增值税的三种情况
  • 注册资本实缴制改为认缴制
  • 在mysql中,创建数据库的基本语法格式是
  • window10注册表
  • 控制windows外观和工作方式
  • mac系统操作的小技巧
  • win7系统怎样设置
  • MAC修改Dock烟雾效果及设置抓屏快捷键的方法
  • linux和windows交互
  • win10系统的设备管理器在哪里
  • 如何优化winxp
  • windows10预览版怎么样
  • win7升级win10系统版本软件还有吗
  • linux与windows
  • 相同目录
  • nodejs实战
  • 在页面中输出当前字符串的长度
  • js原生dialog
  • unity 3d游戏开发
  • jquery图片放大效果
  • python 连接pg
  • jquery点击事件有什么方法显示
  • 对计划单列市税务局不服向谁复议
  • 固定资产转让要交企业所得税吗
  • 深圳龙华区税务局大浪税务所电话
  • 国税手撕发票图片
  • 佛山顺德人才房申请条件
  • 国税总局王军简历
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设