How to access video monitoring in vue2 project

foreword

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

The real-time video monitoring function is widely used in many fields and can help us solve many things in all walks of life, such as AI identification in smart construction sites (hard hats, leaving work, etc.), national standard cascading (platform docking with government platform supervision center ), audio and video calls (site inspection), and other platform capabilities that are convenient for construction process supervision, construction progress control, remote collaborative operations, etc., and a series of application fields

---

这里我们来讲一下用莹石云开方平台的第三方插件怎么快速,方便,高效的在vue中接入视频实时监控功能

1. What is Yingshi Cloud Open Platform?

The Yingshi Cloud open platform is simply a third-party platform that connects the camera hardware to the software. The official website is: The open.ys7.comthird-party plug-in that Yingshi Cloud relies on is

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

How to install it in the vue project

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

After the installation is complete, create a separate project named Preface in the vue project.
Presumably, programmers who are developers, sometimes the company will arrange for you to implement real-time video monitoring in the project.

The real-time video monitoring function is widely used in many fields and can help us solve many things in all walks of life, such as AI identification in smart construction sites (hard hats, leaving work, etc.), national standard cascading (platform docking with government platform supervision center ), audio and video calls (site inspection), and other platform capabilities that are convenient for construction process supervision, construction progress control, remote collaborative operations, etc., and a series of application fields

Here we will talk about how to use the third-party plug-in of Yingshi Cloud Kaifang platform to quickly, conveniently and efficiently access the video real-time monitoring function in Vue

1. What is Yingshi Cloud Open Platform?
The Yingshi Cloud open platform is simply a third-party platform that connects the camera hardware to the software. The official website is: open.ys7.com The third-party plug-in that Yingshi Cloud relies on is

ezuikit-js //The recommended version is 0.7.2,
how to install it in the vue project

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

After the installation is complete, create a component named EZUIKitJs.vue in the vue project alone,

//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>

So here comes the question, how do we developers get
accessToken,accessUrlthe parameters in the code?
Next, let’s register as a developer of the Yingshi Cloud Open Platform.
Come with me.

2. How to register Yingshi Cloud Open Platform

The code is as follows (example): https://open.ys7.com/

1 After opening the website, we click to register

2. The registration is completed according to the registration process

3. After the registration is completed, we log in successfully, click on the console

4. Find the device management menu in the left navigation bar of the console and click

5. Access the Yingshi protocol and enter the serial number of the camera device

6. After the addition is successful, click the monitoring address and get the token and url of the device

7. Take the url and token and go to the project 8.

How to select the template of the module function of the api9

.The use of the module, just use the module in the project

1. List item

3. Some pits encountered

3.1 The problem of camera video being encrypted

1. Open First open the official website of Yingshi Cloud Open Platform,

2. Click the console,

	在控制台点击左侧菜单云接入,然后点击视频监控平台

3. On the video surveillance platform page

 点击左侧导航栏的设备管理,我这里步骤是解密完成的,
 没有解决的视频这里会有一个解密按钮点击就完成了,

3.2 Package deployment online, web page white screen problem

这个是坑是我在做这个项目遇到最大的一个坑
不知道是不是框架打包路径的问题,	

Solution:

	1.在EZUIKitJs.vue组件中删除
	import EZUIK from ’ezuikit-js‘ 引入

	2. 在官网上插件js文件下载到本地
	3. 放到public/static目录下

	4.然后在public/index.html
	5.引入这个/ezuikit.js文件

Summarize

The above is what I want to talk about today. This article only briefly introduces how to access video surveillance in the Vue project, how to use the Yingshi Cloud open platform, and some pitfalls encountered when accessing surveillance video. I will share it with you. If you don’t understand, you can leave a message at the bottom of the article and discuss together