前端接入萤石云

最新推荐文章于 2026-04-01 13:57:02 发布

原创最新推荐文章于 2026-04-01 13:57:02 发布 · 4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在前端项目中接入萤石云服务，包括通过npm和非npm两种方式。npm引入需通过npm下载并引入相关js，初始化容器使用EZUIKit.EZUIKitPlayer。非npm则需从官网下载文件夹，引入后初始化容器使用EZUIKit.EZUIPlayer。注意两者API不完全通用，且官方文档简洁导致易产生困惑。对于动态切换播放地址，作者提供了vue实现方案。

萤石云有两个方法使用：

npm引入
非npm引入
两个方法中的js内容不同，所以容器初始化方法也不同
详情可到github查看：https://github.com/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.rec
      template: "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引入
步骤一：首先去官网下载整个文件夹（或这里：https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript）这里称呼文件夹为ezuikit
步骤二：项目中引入

在src\components\monitor\VideoHistoryWatch.vue 中使用
ezuikit文件夹在src\statics\ezuikit
import "../../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.rec
      decoderPath: "../../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传给初始化函数，
        })
      }
    },