1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端接入萤石云

前端接入萤石云

时间:2023-01-25 13:29:46

相关推荐

前端接入萤石云

萤石云有两个方法使用:

npm引入非npm引入

两个方法中的js内容不同,所以容器初始化方法也不同

详情可到github查看:/Hikvision-Ezviz

①npm引入:

步骤一:首先通过npn下载

npm install ezuikit-js

步骤二:项目中引入

import EZUIKit from 'ezuikit-js';// 或者下面原生script引入,二选一即可<script src="./ezuikit.js"></script>

步骤三:初始化容器

//首先创建一个容器DOM<div id="video-container"></div>//然后初始化,在合适的地方调用函数即可init(url,accessToken){player = new EZUIKit.EZUIKitPlayer({autoplay: true,id: "video-container",accessToken:accessToken,url: url,// 这里的url可以是直播地址.live ,也可以是回放地址.rec 或 .cloud.rectemplate: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;// 视频上方头部控件//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖//plugin: ['talk'], // 加载插件,talk-对讲// 视频下方底部控件// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启// openSoundCallBack: data => console.log("开启声音回调", data),// closeSoundCallBack: data => console.log("关闭声音回调", data),// startSaveCallBack: data => console.log("开始录像回调", data),// stopSaveCallBack: data => console.log("录像回调", data),// capturePictureCallBack: data => console.log("截图成功回调", data),// fullScreenCallBack: data => console.log("全屏回调", data),// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),width: 600,//如果指定了width、height则以这里为准height: 400//如果没指定宽高,则以容器video-container为准});}

②非npm引入

步骤一:首先去官网下载整个文件夹(或这里:/Hikvision-Ezviz/EZUIKit-JavaScript)这里称呼文件夹为ezuikit

步骤二:项目中引入

在src\components\monitor\VideoHistoryWatch.vue 中使用ezuikit文件夹在src\statics\ezuikitimport "../../statics/ezuikit/ezuikit.js";// 或者script 引入<script src="../../statics/ezuikit/ezuikit.js"></script>

步骤三:初始化容器

//首先创建一个容器DOM<div id="video-container"></div>//然后初始化,在合适的地方调用函数即可init(url,accessToken){player = new EZUIKit.EZUIPlayer({autoplay: true,id: "video-container",accessToken:accessToken,url: url,// 这里的url可以是直播地址.live ,也可以是回放地址.rec,不能是回放地址 .cloud.recdecoderPath: "../../statics/ezuikit",//官网中说绝对路径,github中说相对路径,反正我这么写可以使用width: 600,height: 400});}

可以看出两个方法的初始化都不一样,一个是new EZUIKit.EZUIKitPlayer,一个是new EZUIKit.EZUIPlayer。所以两个方法中对应api有些也不通用。(小声逼逼:在这里踩一波官方,文档写的十分简陋)

如果需要动态切换播放地址我做的是:(vue写法)

watch:{index(new,old){//首先给视频容器id后缀加上一个idnex,当这个index变化时触发下面代码。if(old !== null) {this.player.stop()//如果要用stop,则stop要写在innerHTML="" 前面document.getElementById(`videoContainer${old}`).innerHTML=""}this.$nextTick(() => {this.init(this.url, this.accessToken, new)//把新index传给初始化函数,})}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。