记录一下使用萤石UIKit组件调用监控视频遇到的问题

410 阅读3分钟

首先,萤石文档地址,下载安装使用这里就不记录了,文档里有,主要记录一下遇到的问题。

一、使用npm install ezuikit-js安装依赖的方式运行不了

error in ./node_modules/ezuikit-js/ezuikit.js  
Module parse failed: Unexpected token (987:1759)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

就是说无法解析文件中的某些语法或模块,需要使用相应的loader处理才能加载解析,然后就尝试更新babel-loader 和 @babel/core,没用;然后搜资料说要配置webpack.config文件,vue1.x的项目在vue.config里面配置,(生平第一次接手vue1的老项目,以前从未见识过,谁懂啊家人们),不过没成,果断放弃然后用JS引入的方式,没想到写完项目又尝试了一遍安装依赖,竟然跑成了,好无厘头~

006oOWahgy1fgl2m7ezfaj306y06yt8x.jpg

二、报错TypeError: Cannot read properties of null (reading 'parentNode')

image.png 直接说解决办法: 在重新渲染实例的时候,让元素加载完毕在进行实例渲染,使用this.$nextTick函数或者加个延时器100都可

简单的很~~ ,但是卡了我好几个小时,哭死

报错的场景:

这里项目是一个监控视频的需求,可以在九宫格、四宫格和单宫格之间切换视图,不同数量不同大小不同视频地址,用elementUi的栅格布局后发现视频实例的宽和高没办法动态修改,于是就在切换宫格的时候将视频销毁掉再重新创建,在四宫格上渲染的视频实例数量超过单宫格的时候,切换到单宫格没问题,但是切回来的时候就会报错,意思是找不到父节点,在九宫格上渲染的视频实例数量超过四宫格的时候亦是如此,当时只知道ezuikit找不到节点,不明白为什么找不到节点,明明看控制台元素上都有。

ezuikit是通过元素的id来当作视频容器的,一个id充当一个视频容器,在切换九宫格后仅有切换之前的视图容器,切换后的还没有渲染上去,可以在切换九宫格视图的时候直接输出DOM元素来证明,所以说报了找不到节点的错误

三、ezuikit是直接通过id将DOM容器元素给替换掉的

就是说自己在这个id元素上添加的东西会被顶掉,所以如果有选中的边框线啥的最好单独在外盒子写,包括v-for渲染或者动态绑定class啥的,最后只有一个id,省的后面麻烦

四、切换视频后销毁实例视频声音仍存在

ezuikit没有提供销毁的API,只有暂停的stop()方法,如果只是点击暂停视频,那没啥问题,但这里需要切换九宫格,然后手动使用遍历给所有实例调用stop()的时候无效,解决办法看这位大哥嘞, 有用,在ezuikit.js文件的this.reSetTheme()用try{}catch(){}包起来就ok了这位大哥的办法没用,我直接把整个父元素给置空了声音还是在,应该是具体情况不同,stop后再调用destroy()销毁一下就ok了。

#### 有疑问欢迎一起交流发量的病情~