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

  • 怎么进行增值税纳税申报
  • 一般纳税企业所得税税率是多少2019
  • 会计核算程序的含义
  • 一般纳税人销售旧货
  • 审计调整分录做在哪一年
  • 中外合资经营企业的经营期限
  • 金融企业计提的坏账准备金
  • 二手房差额税需要多少钱怎么计算的
  • 个人钱转入对公账户账务处理
  • 自用房产税如何计算
  • 我的初级备考经历怎么写
  • 小规模纳税人网上申报税务操作流程
  • 新办公司注册资金直接支付开办费吗
  • 去国税申请开票需要法人和财务去吗?
  • 绿化工程企业所得税减免吗
  • 医疗器械销售税负率是多少
  • 美国税改“梦想”很丰满,显示很骨感
  • 定金转为货款如何表述
  • 非营利组织免税条件发生变化
  • 捐赠所得税视同销售怎么处理
  • 单位卖报纸的钱算什么
  • 未办土地有偿使用手续多少钱
  • 高新加计扣除怎么做账
  • 负债转为投资 资本增加吗
  • 收到进项税额发票怎么处理
  • 停薪留职单位欠缴社保怎么处理
  • 华为授权查询系统
  • 电脑隐藏软件图标快捷键
  • 房租发票需要缴房产税吗
  • 增值税要不要计入固定资产的成本中?
  • php获取长度
  • php 7z
  • 喀拉拉邦地理位置
  • PHP:imagecolorclosest()的用法_GD库图像处理函数
  • 科研项目财政拨款多少
  • php实现文件上传下载
  • 收入支出如何算利润
  • ElementUI中<el-form>标签中 ref、:model、:rules 的作用
  • WGAN(Wasserstein GAN)看这一篇就够啦,WGAN论文解读
  • 基于卷积神经网络的网络入侵检测算法设计与实现
  • ssh远程登录执行命令
  • 面试我应该问些什么问题
  • 公司发给员工的股票
  • 残疾人个税减免标准
  • 二氧化剂的使用方法
  • 四舍五入 vb
  • 自建厂房转固定资产如何办理手续
  • python 多线程处理
  • phpcms默认密码
  • SQL Server 2000向SQL Server 2008 R2推送数据图文教程
  • sql server2012使用方法
  • 员工工资可以当月计提当月发放吗
  • 未达起征点怎么填
  • 调研费属于什么会计科目
  • 银行承兑汇票到期日后多久可以承兑
  • 没有收到房租发票
  • 增值税留抵税额借贷方向
  • 建筑工程承包合同保证保险中,承保工程所有人
  • 固定资产折旧的会计科目
  • 购入原材料结转成本怎么算
  • 销售费用明细科目有哪些内容
  • aow进程
  • win8.1 build9600
  • 如何把鼠标指针换成笔的形状
  • xp局域网文件共享设置
  • 天气应用程序(weather)app免费下载
  • win10 自带
  • raid磁盘阵列教程
  • node.js gui
  • 人应该掌握的基本知识
  • cocos2dx schedule
  • Python+Wordpress制作小说站
  • activity生命周期的方法
  • JavaScript中关于模板字符串
  • 国际货运怎么代理
  • 纳税人不如实申报税收怎么办
  • 国家税务总局四川省电子税务局界面
  • 百旺金赋天津客服
  • 关于车辆购置税的规定,下列说法正确的是
  • 广州市地方税务局 社保费申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设