萤石设备在项目中使用（保姆及教程）

前提条件：不管时摄像头还是NVR都要支持萤石云才可以！！！

1.注册账号

萤石开放平台网址：萤石开放平台

注册完成并完善个人相关信息

2.如何添加设备

点击右上角的控制台进入控制台之后选择设备管理，在此页面添加所需要的设备

萤石支持两种协议，国际协议和萤石协议，根据设备的协议进行添加

 以下只演示萤石协议

输入设备的序列号和验证码，序列号和验证码在设备身上的标签上可以查看，如果没有验证码可以咨询客服。

添加成功之后就可以在设备管理看到设备了。

3.如何获取直播地址

在视频设备详情表里面可以看到播放地址，点击直播地址，选择使用接口获取直播地址，

点击链接查看如何获取直播地址

获取直播地址

根据文档请求接口所需要的参数有accessToken和deviceSerial两个是必传的

accessToken需要请求接口获取查看链接：

获取Access Token

deviceSerial就是设备的序列号

当然如果你是NVR下面有多个设备就需要传入channelNo通道号，具体设备的通道号可以在控制台的视频设备详情表，deviceSerial就是NVR设备序列号，

不是NVR，就可以直接传入deviceSerial就是设备的序列号

4.如何在浏览器播放

先下载SDK，开放平台首页，选择文档中心，点击试用与调试，选择SDK，

选择所需要的SDK进行下载

此处只讲解js，下载完成解压之后得到

 

可以点击接入指南查看具体使用方式

如果你是试用原生去做的可以将ezuikit.js引入你的页面代码如下

// 首先引入js
    <script src="../ezuikit.js"></script>
    <script src="../js/jquery.min.js"></script>
// 页面创建video标签
  <video
    id="myplayer"
    src="直播地址"
    width="400"
    height="300"
    poster="[这里可以填入封面图片URL]"
    [autoplay]
    controls
    playsInline
    webkit-playsinline
  >
  </video>
// 开始初始化直播源地址
var player = new EZUIKit.EZUIPlayer('myPlayer');
// 播放
player.play();
// 结束
player.stop();

具体逻辑根据需求自己编辑,然后就可以在浏览器播放了.

在vue项目中如何播放

首先下载ezuikit依赖

npm install ezuikit-js

然后在页面引入,实现代码如下

<template>
  <div>
    <div id="playWind"></div>
  </div>
</template>
<script setup lang="ts">
import  EZUIKit from 'ezuikit-js';
const ezopenInit = () => {
  const width = 850//播放窗口的宽高
  const height = 550
  const EZOPENDemo = new EZUIKit.EZUIKitPlayer({
    id: 'playWind',
    width: width,
    height: height,
    template: 'pcLive', //有云台控制
    // template: 'simple', //简约模式,只展示视频
    url: '你的直播地址',
    accessToken: '你的token',
    sound: false,
  })
}
ezopenInit()
</script>

然后就可以在页面播放了;