vue2中项目中如何使用莹石云做视频监控的功能

1.使用npm install  ezuikit-js  
       
      cnpm install  ezuikit-js  不要安装过高的版本 
      安装版本为0.7.2

       特别注意:有些项目在打包的时候 部署发布到线上的时候,
                项目里面引入import EZUIKitJs from 'ezuikit-js'
                会导致项目在上线变成空白网页,可能这个插件的问题,
                也有可能是项目打包路径的问题

       解决方案:这个时候你要去官网里面下载一个ezuitkit.js的文件
                然后把文件放到项目public/static目录下
                再次然后去public中的index.html中去引入
                <script src="/static/ezuikit.js"></script>
                这样就可以解决上线部署空白的问题了


2.莹石云开发平台官网 https://open.ys7.com/cn/s/index

3.创建组件使用  
      import EZUIKit from "ezuikit-js";在创建的组件中导入插件

4.在template 结构中创建 如下代码
      <div class="hello-ezuikit-js">
            <div id="video-container" style="width: 920px; height: 400px"></div>
      </div>

5.在组件data中定义   player: null, 变量

6.在生命周期mounted写代码逻辑
     
    this.player = new EZUIKit.EZUIKitPlayer({
        id:'video-container', // 视频容器ID 
        accessToken:'at.20iubmdv48vl82imc94bptksdzgazoz2-7hzqejddoj-0glkhq8-cnsyxbtcz',
        //accessToken 的值为你在莹石云平台监控地址的token
        url:'ezopen://open.ys7.com/K98465602/1.hd.live',
        //url 为你莹石云监控的url地址信息  
        template:'6ab9d0384ff5459cbe86adff53eac251',
        //template为模板  模板可以自定义 也用用官方的 
          模块路径: https://open.ys7.com/console/ezuikit/template.html
        plugin: ['talk'], // 加载插件,talk-对讲    
        width:920,
        height:400
    })

这个时候就能在项目vue2项目中去使用莹石云开发平台的监控了

猜你喜欢

转载自blog.csdn.net/qq_25972233/article/details/129388285