vue2使用LivePlayer摄像头， 但是显示不出画面

最新推荐文章于 2024-04-09 17:01:24 发布
最新推荐文章于 2024-04-09 17:01:24 发布
阅读量745 收藏
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangnx10000/article/details/131556894
版权
文章讲述了在处理.swf文件时遇到的依赖问题，特别是videojs的导入导致的冲突。解决方法是卸载引起冲突的包或重新安装liveplayer。对于局域网中的flv视频流，添加特定后缀&a=1.flv才能正常播放，单纯添加.flv无效。
摘要由CSDN通过智能技术生成

首先它跳了一个关于.swf的问题，是依赖出现了问题，因为一开始它报错找不到videojs，所以我导入了一下，然后冲突了，把这个包卸载就好了，或者把liveplayer的包卸载后重新安装一下。
局域网发给我的格式是一个flv的视频流，所以后面加一个后缀'&a=1.flv'就好了，单纯加一个.flv没有效果

步致道
关注
vue-video-player接入海康摄像头
renkai721的专栏
01-06 1701
vue通过萤石云平台接入海康摄像头
Vue2 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）
最新发布
王佳斌
07-12 6701
vue2，nuxt2，海康威视，海康监控，摄像头监控，vue对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue，海康，vue海康视频监控，海康开放平台，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue2对接海康监控设备，无法连
livePlayer播放直播流
weixin_44445363的博客
04-02 1871
livePlayer播放直播流 官网：https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property 业务场景：用户输入rtmp或者rtsp流地址，调用后端接口将其转换为 .flv结尾的地址，将该地址赋值给liveplayer的videoUrl来进行播放 vue2安装 第一步： npm install @liveqing/liveplayer 第二步： 安装 copy-webpack-plugin 插件,
vue中使用@liveqing/liveplayer报错问题踩坑记录
killerdoubie的博客
10-17 2052
即可完美启动 但是这个插件不可以直接播放rtsp流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇。1.安装插件copy-webpack-plugin 请下载这个版本 最开始直接下的最新版 起不来哈。3.在public/index.html 中引用 liveplayer-lib.min.js。1.安装@liveqing/liveplayer。2.在vue.config.js中如下配置。2.引入插件（这里是封装了视频组件）
vue-video-group-component基于（vue2） element-ui 与 LivePlayer H5 播放器二次封装的视频组组件
weixin_44899321的博客
12-01 651
之前感兴趣好久，一直想封装一个组件发布，空闲下来了试了一下，感觉还是不难的，比较简单，就不贴代码了。
Vue项目集成LivePlayer播放器
weixin_43415075的博客
04-22 4525
前言 视频播放器在视频监控项目中必不可少，虽然H5中提供了video标签，但是它不支持摄像头所提供的视频格式，故无法满足视频监控项目的需求。基于封装一款满足视频监控项目需求的视频播放器技术门槛相对较高，所以选择一款开源视频播放器是一种不错的选择。 ...
VUE中调用PC摄像头时报错问题：getUserMedia is not implemented in this browser解决办法
zzy7075的专栏
03-07 842
VUE中调用PC摄像头时报错问题：getUserMedia is not implemented in this browser解决办法
vue+js+海康web开发包接入海康威视摄像头
03-10
vue+js+海康web开发包接入海康威视摄像头主要接口封装： 1、初始化插件 2、调整大小 3、登录 4、登出 5、获取设备基本信息 6、获取模拟通道 7、解析模拟通道XML内容 8、获取数字通道 9、解析数字通道XML内容 10、...
vue项目使用大华摄像头怎样初始化_Vue接入监控视频技术总结
weixin_39611413的博客
12-19 2468
最近一直在搞监控视频接入方面的事情，积累了不少的经验，这里总结一下。提前说一句，本文提到的视频接入均是以RTSP为基础转码而来的，至于用海康大华等插件播放的咱们就闭口不提了可以看这个文章，在vue中接入ocx控件播放监控视频。现在监控视频在前端的播放主要有如下三种方式：RTSP视频流播放RTMP视频流播放HLS视频流播放RTSP咱们一种一种的说，首先是RTSP这种其实和海康插件是一样的，需要VLC...
LivePlayer播放器的基本用法
weixin_45774558的博客
02-09 5022
​1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置
Vue中调用LiverPlayer H5播放器实现萤石云视频监控
Yi_qian的博客
08-19 3778
首先，要播放实时监控的视频肯定需要获取播放地址官方文档上获取直播地址有两个接口 （新）（旧） 这里采用新接口2，接下来看接口文档上的参数，能看到必传的参数是accessToken 和 deviceSerial，然后获取到这两个参数调用接口能获取到播放的地址，后面的参数是控制视频显示，按需引入（记得检查拿取到的地址是否是rtmp格式）
【视频直播篇二】vue-cli3集成LivePlayer
一只没有脚的鸟
03-08 2245
关于LivePlayer的介绍请参考https://www.liveqing.com/docs/products/LiveQing.html 首先导入插件 npm install @liveqing/liveplayer --save-dev 然后把下面三个文件放入public目录 crossdomain.xml liveplayer.swf liveplayer-lib.min.js 还需要安装copy-webpack-plugin插件 npm install --save-dev copy-web
解决vue-video-player点击暂停/播放时，会触发多次的问题
大唐锦绣的博客
02-20 3083
前言：一般出现这样的问题是与扩展fastclick有关。fastclick主要是用于优化移动端点击延迟300ms的问题。而fastclick会与video.js冲突。vue-video-player是必须引入video.js作为基础条件的。这就导致了一次点击暂停/播放事件，会多次的触发暂停/播放。导致事件覆盖，所以会有点击无效的感觉。 解决方法其实很简单，但是大多数是直接修改node_modules内的fastclick源码，粗暴而且维护困难。 一、方法 fastclick本身需要在main.js.
vue项目中视频实时播放时 播放器遇到的问题和解决过程 flv.js - EasyPlayer - LivePlayer
sandwich_99的博客
01-11 2430
EasyPlayer多屏实时播放 | 时差 | 延迟处理的很完善，EasyPlayer对于fvl.js的延迟问题采用的是追帧和加速播放，随着你暂停时间越久他追帧速度越慢，并且在追到延迟在10s时就停止了，也就是直播画面总是有10s的延迟（直播设备是测试过没问题的，并且在销毁重创画面是实时的）后来又发现了livePlayer，测试使用发现以上问题都不存在了，延迟也最慢控制在3s，也是我们项目中能接受的范围
Live2D应用(vue2)详细教程以及问题解决
wxt987的博客
04-09 1080
live2d 在vue2中的应用,详细教程,npm问题解决
如何在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器
青柿视频流媒体的博客
11-11 4181
在VUE项目中添加使用LivePlayer.js直播点播H5免费播放器1、复制依赖文件1.1 示例 通过 webpack 插件自动复制依赖1.1.1、编辑你的 webpack.config.js1.1.2、若使用 vue-cli, 编辑你的 vue.config.js2、 html模板中引入依赖js3、编辑你的 Vue 组件4、H5直播点播播放器 1、复制依赖文件 1.1 示例 通过 webpack 插件自动复制依赖 copy node_modules/@liveqing/liveplayer/dist/c
vue项目中flv格式的视频流播放
qq_33444716的博客
06-12 993
【代码】vue项目中flv格式的视频流播放。
vue项目中使用EasyPlayer.js播放视频
weixin_56039168的博客
03-15 2530
项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。将这两个文件复制于public根目录下，不然会报错。二、复制文件于public的跟目录下。三、使用（直接上代码）
livePlayer播放视频流
Holly31的博客
02-28 1800
监控视频流播放
使用Vue 2.0和Vue-Video-Player实现HLS播放的全过程
2. Vue-Video-Player 是一个基于 Video.js 的 Vue 组件，支持多种视频协议，包括 HLS。 3. 在实现 HLS 播放全过程中，我们需要选择合适的视频播放器，考虑多种因素，包括兼容性、性能、可扩展性等。 4. 使用 Vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值