首页天道酬勤vue调用摄像头拍照(vue 图片预览插件)

vue调用摄像头拍照(vue 图片预览插件)

admin 12-21 23:36 463次浏览

最近要完成项目,需要将相机设备连接到我们的项目上,在控制设备的同时,在相机中观察设备的状态。 图:

监视器屏幕(1)。

项目概述

需要使用电脑控制闸门的开关,然后用摄像头查看闸门的移动,在这里访问摄像头,进入直播流程,随时查看闸门的移动。 当然,分别控制各个大门、摄像机,都是一对一对应的。

其中我们需要访问后台和摄像头。 其实是网址。 然后在前端实现播放。

今天,我们将介绍如何访问该摄像机,以及如何应用Vue的该播放组件——vue-video-player

完成过程

要完成这个监视器画面,大概需要以下几个步骤。

页面制作装置的联合接口数据访问与测试

监视器屏幕(3) )。

页面的制作

不用说,这是Vue页面。 大致分为三个页面(索引、左、右)。 首页是最底层的地图,上面也是渲染大门的点。 具体地说那个地方设置了闸门。 左侧是这些门的列表和几个门的详细情况。 中间是对应大门的视频,右侧是控制大门的页面。

就是在一个父组件中添加两个子组件实现通信,点击左侧的闸门,然后将参数传递给父组件、子组件,显示不同的信息。

设备的协作

这需要实现将从设备返回的数据访问到后台,然后通过代码控制门。 每个关口返回数据时都有相应的文档,可以按照文档中的说明访问关口返回的数据。 当时和制造商合作很辛苦,但最终实现了。

接口数据访问及测试

这经常是前端渲染的,例如,后端返回门的数据,然后相机播放的URL和门控制接口。 下面详细介绍如何基于URL播放摄像机

摄像头的播放

在这里,我们使用了Vue的播放组件vue-video-player。 详细说明组件的使用和入坑。

1、安装: npminstallvue -视频-播放器- -保存

2、导入到main.js门户文件中

importvideoplayerfrom ' vue -视频-播放器'

请求(视频/光盘/视频-日本频道) )

请求(视频播放器/src /自定义-时间. CSS ) )

vue.use (视频播放器) 3、页面上的引用

视频播放器类='视频播放器自定义皮肤'

射频='视频播放器'

3360 plays在线=' true '

3360选项='播放器选项'

/视频播放器4、配置数据

播放器选项: {

播放速率: [ 1.0,2.0,3.0 ],//播放速度

如果为autoplay: true,true,则在浏览器准备好后开始播放。

muted: false,//缺省情况下将清除所有音频。

loop: false,//视频结束后重新开始。

建议在preload :“自动”、video加载元素后,浏览器是否应该开始下载视频数据。 auto浏览器选择最佳行为,如果浏览器支持,则立即开始加载视频

语言: ' zh-cn ',

aspectRatio: '16:9 ',//使播放器处于平滑模式,在计算播放器的动态大小时使用这个值。 值必须表示一个比例。 用冒号分隔的两个数字。 例如,“16:9”或“4:3”

如果为fluid: true,true,则视频播放器具有流体大小。 也就是说,将根据集装箱进行缩放。

techOrder: ['flash ',' html5'],//兼容顺序

足球甲级联赛

ash: { hls: { withCredentials: false }, swf: 'static/VideoJS.swf' // 引入静态文件swf }, html5: { hls: { withCredentials: false } }, sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换 type: 'rtmp/hls', src: '' }], poster: "", //你的封面地址 width: '', notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } },

这样一来就可以把摄像头接入进来,

//动态设置改变视频地址 this.playerOptions.sources[0].src = url

这里面注意的是如果要支持Google的flash播放插件,需要引入VideoJS.swf,在这就费了很大的劲,查了很多的文档,问题出在如果引入的VideoJS.swf文件不对,就会导致下面的现象。

videojs播放rtmp视频流时,画面很小(非播放器小),当时我引入的是video-js.swf,后来我下载了VideoJS.swf,就好了。(大家可以借鉴,太头疼了!)

videojs播放rtmp视频流

这样一来就可以完成一个完美的vue-video-player视频播放流。如上图一所示。

此外就是闸门的动态效果了,点击开启,关闭,暂停的效果,我是用CSS3写的,可以看一下:

div {animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ }

闸门开关效果

总结

Vue的vue-video-player还是很好用的,就是一些大坑很让人头疼,子父组件之间的通信也很头痛,写的时候一定要仔细,一旦入坑就会耗费很长时间。还有就是一般的视频流播放地址有很多,例如:ezopen、rtmp、http等,我们一般选择rtmp的,配置简单,接入简单,视频流畅。

CP搜索引擎的工作原理是什么边缘计算 容器组 UEC-Containers在C#中怎么使用Span<雷士灯具管理系统
高清舞台背景视频(舞台背景视频怎么弄) vue引入js文件(bootstrap和vue哪个好)
相关内容