视频监控 ezuikit.js

视频监控

1、官网下载js包

https://open.ys7.com/mobile/download.html

2、（把下载好的ezuikit.js、 js包）放进vue 的 static 下

3、在index.html引入

<script src="static/ezuikit.js"></script>

4、关闭eslint

config/index.js

useEslint: false, // (设置为false）

5、组件中使用

<video

id='myPlayer'

src='你的视频播放地址'

controls // 是否使用控制器

autoplay //是否自动播放

</video>

  <script>     let palyer     setTimeout(function(){      player=new EZUIKit.EZUIPlayer('myPlayer')<     },2) //注意：因为vue项目是一次性读取数据，初始化的时候要设延迟，不然会报找不到dom     palyer.stop() // 页面跳转时注意关闭视频流，vue跳转原有任务不会停止   </script>

<el-dialog

append-to-body

destroy-on-close

:title="videoname"

:visible="show"

top="10vh"

width="40%"

:before-close="handleClose"

<div

class="videoPlayerOnline"

v-loading.fullscreen="loading"

element-loading-text="加载中,请稍后......"

element-loading-background="rgba(0, 0, 0, 0.8)"

</div>

</el-dialog>

</template>

export default {

props: {

addOrUpdateVisible: {

type: Boolean,

default: false

videoname:{

type:String,

default:"",

videourl:{

type:String,

default:"",

videotoken:{

type:String,

default:"",

}

data() {

return {

projId: 56800,

loading: false,

player: null,

show: false

};

watch: {

// 监听 addOrUpdateVisible 改变

addOrUpdateVisible(oldVal, newVal) {

this.show = this.addOrUpdateVisible;

if (this.show == true) {

this.$nextTick(() => {

this.initVideoPlayer(this.videoname,this.videourl,this.videotoken);

});

}

mounted() {},

methods: {

handleClose(done) {

if (this.player.stop) {

this.player.stop();

this.player = null;

}

this.$emit("changeShow", "false");

done();

//初始化视频

initVideoPlayer(name,url,token) {

this.loading = true;

this.videoname = name;

if (this.player) {

this.player.stop();

this.player = null;

}

// console.log(this.$refs.myPlayer);zz

this.player = new EZUIPlayer({

id: "myPlayer",

url: url,

accessToken: token,

// url: "ezopen://open.ys7.com/D76895974/7.live", //监控地址

// accessToken: "at.8lz1o5grbxjtbc118f5awz4n8edfqpnm-2a3a3xrudd-08r5q74-gxlc6toxn", //通过官网或接口获取的accesstoken

width: this.$refs.myPlayer.offsetWidth - 2,

height: this.$refs.myPlayer.offsetHeight - 2,

autoplay: true,

decoderPath: "/static", //*必填，请填写ezuikit绝对路径

handleError: error => {

this.loading = false;

// console.log("播放错误回调函数，此处可执行播放成功后续动作");

handleSuccess: () => {

this.loading = false;

// console.log("播放成功回调函数，此处可执行播放成功后续动作");

}

});

// 这里是打印日志，本例抛出到播放页面

// this.player.on('log', str => {

// console.log((new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str))

// });

}

};

</script>

.videoPlayerOnline {

height: 48vh;

display: flex;

font-size: 1rem;

padding-bottom: 20px;

.myplayer {

flex: 1;

}

</style>

视频监控 ezuikit.js相关推荐

uniapp结合萤石视频ezuikit.js的爬坑记录
1.前言由于开发需要,项目需要接入萤石的视频监控.萤石官方提供了三种协议的的视频方式,hls,rtmp,ezopen.三种协议是视频直播有一定差别,由于hls有十多秒的延迟,不符合项目的要求,并且因 ...
html实现ezuikit.js萤石云直播监控，ezuikit.js实时监控实现，萤石云实时监控简单实现
效果图实现下面方式一的播放url获取:登录萤石云->控制台->我的资源->设备列表->列表中:查看通道->监控地址下面方式二的播放url获取:登录萤石云->控 ...
Thingjs嵌入萤石视频ezuikit.js+ezopen协议
thingjs在使用外部资源时,需要复制第三方资源代码到该平台,在嵌入视频之前需要引入萤石官方文档中提供的ezuikit.js官方文档,下载ezuikit.js. 正题来了,直接贴代码 THING.U ...
vue+flv.js+SpringBoot+websocket实现视频监控与回放
vue+flv.js+SpringBoot+websocket实现视频监控与回放需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之 ...
dplayer js控制自动全屏_Qt编写安防视频监控系统18-云台控制
一.前言云台控制是视频监控系统中必备的一个功能,对球机进行上下左右的移动,还有焦距的控制,其实核心就是控制XYZ三个坐标轴,为了开发这个模块,特意研究了各种云台控制的方法和开源库比如soap,有些厂 ...
萤石视频监控模式的参数decoderPath配置问题
这是萤石视频监控模式的api文档这里写了decoderPath参数为必填,是ezuikit的绝对地址这个地址就是你引入ezuikit.js的绝对路径如果你路径没填或是写错了,会报这样的错比如, ...
vue2项目中如何接入视频监控
前言想必各位作为开发者的程序员,有时候公司会给你安排在项目中实现视频实时监控视频实时监控功能,在很多领域都广泛应用,能帮我们在各行各业都解决很多事情,像智慧工地中AI识别(安全帽.在离岗等).国标 ...
C#基于RealPlayX.ocx视频监控整合程序
软件是基于C#语言进行开发的,运行在.net framework4.0以上的环境中.在每台查看视频监控的机器中借助于"RealPlayX.ocx"技术在网页中运行视频画面. 系统使 ...
uni-app 和H5页面视频播放flv格式视频监控
本文章向大家介绍uniApp 实现微信小程序和app视频播放flv格式视频监控,主要包括uniApp 实现微信小程序和app视频播放flv格式视频监控使用实例.应用技巧.基本知识点总结和需要注意事项, ...
使用H5Streamer轻松搭建视频监控项目
轻松搭建远程视频监控项目- H5Streamer 流媒体服务器使用一. 前言二. 概述三. 正文 1. 环境部署 2. 参数配置 3. 运行程序 4. 播放视频四. 总结五. 额外问题FAQ ...

视频监控 ezuikit.js

视频监控 ezuikit.js相关推荐

最新文章

热门文章