使用莹石云开放平台在vue项目中接入视频实时监控功能

happytang • 2023年3月15日下午5:20 • 技术博文 • 阅读 3423

想必各位作为开发者的程序员，有时候公司会给你安排在项目中实现视频实时监控。

视频实时监控功能在很多领域都广泛应用，能帮我们在各行各业都解决很多事情。像智慧工地中AI识别（安全帽、在离岗等）、国标级联（平台对接政府平台监管中心）、音视频通话（工地巡检）等便于施工过程监管、施工进度把控、远程协同作业等各环节的平台能力，等等一系列的应用领域。

本文我们来介绍一下用莹石云开放平台的第三方插件怎么快速、方便、高效的在vue中接入视频实时监控功能。

文章目录

一、莹石云开放平台是什么？
- 1、萤石云开发平台介绍
- 2、如何在vue项目中安装
  - 2.1 创建组件
二、如何注册莹石云开放平台
- 1、网站注册流程
三、注意事项
- 1、摄像头视频被加密的问题
- 2、打包部署线上网页白屏问题
四、总结

一、莹石云开放平台是什么？

1、萤石云开发平台介绍

莹石云开放平台简单来说就是把摄像头硬件接入到软件中的第三方平台，官网为：open.ys7.com 。莹石云依赖的第三方插件为：

ezuikit-js //建议使用版本为0.7.2

2、如何在vue项目中安装

    npm install ezuikit-js@0.7.2
    cnpm install ezuikit-js@0.7.2

2.1 创建组件

安装完成以后，单独在vue项目中创建一个名为EZUIKitJs.vue的组件：

//EZUIKitJs.vue的组件,

//结构部分
<template>
  <div class="hello-ezuikit-js">
    <div id="video-container" 
         style="width: 920px; height: 400px"></div>
  </div>
</template>

//功能代码
<script>
import EZUIKit from 'ezuikit-js'  //引入第三方插件
export default {
  name: 'EZUIKitJs',
  data() {
    return {
      player: null,
    }
  },

  mounted() {
    console.log('mounted 组件挂载完毕状态=======》.')
    let accessToken = 'ezopen://open.ys7.com/K98465602/1.hd.live'
    let accessUrl = 'at.divbz5775o6e5hvi6pu7ca2k8zwhqp7y-9693moz9ua-1rus2dr-gik15mzz8'
    this.player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: accessToken,
      url: accessUrl,
      // simple - 极简版; pcLive-pc直播；pcRec-pc回放；  mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
      template: '6ab9d0384ff5459cbe86adff53eac251', //模板
      plugin: ['talk'], // 加载插件，talk-对讲
      width: 920,
      height: 400,
    })   
  },
  },
}
</script>