萤石云视频 Web 对接教程：从零实现直播播放与本地录像回放前言一个项目中的紧急需求，需要显示实时视频和视频历史，然后

前言

一个项目中的紧急需求，需要显示实时视频和视频历史，然后进行一些基本操作，比如暂停、播放、全屏，拖动进度条，等等，视频流显示对接使用萤石云的设备和服务

项目场景需求

根据设备的运行轨迹，在地图上显示设备的运行轨迹(已经有这个功能了)
然后点击对应的设备轨迹中的时间点，显示对应的数据和相关视频
视频根据选中的时间点播放，播放后自动持续播放，可以暂停和继续播放，拖动时间线等
视频播放支持全屏播放

这是销售部根据客户需求，提供的一个的初版需求列表

发到群里后，强调这些内容要越快越好，尽快上线，客户领导比较关注这功能

典型的销售在客户那吹，研发在后面使劲追，回公司后就是这个要尽快......

技术选型

先看看官方文档，了解一下情况

萤石云官方文档地址：open.ys7.com/help/4274

我们的项目是Web端网页项目，萤石云视频流对接官方提供提供了两种方式，下面是官方的介绍

EZUIKit Web SDK

EZUIKit SDK用于WEB端、H5端浏览器无插件实现多媒体视频流解码播放

当前萤石无插件播放器SDK仅支持ezopen私有协议（ezuikit-js）、HLS协议（ezuikit-hls）、FLV协议（ezuikit-flv）

标准流 Web SDK

Ezuikit-标准流 js SDK

ezuikit-flv 是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成js（wasm) 运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件

综合对比

这俩种方式文档都大概翻了一下后，根据需求点，直接选择EZUIKit Web SDK方式就行，主要就是播放视频功能，不用纠结，下面是具体对比

选型维度	EZUIKit Web SDK	标准流 Web SDK
开发效率	⭐⭐⭐⭐⭐	⭐⭐
灵活性	⭐⭐	⭐⭐⭐⭐⭐
功能丰富度	⭐⭐⭐⭐⭐	⭐⭐⭐
学习成本	低	高
维护成本	低（萤石维护迭代）	高（需自己处理兼容/异常）

对于新手进行技术选型，也可以参考上面的方式，把不同维度列出来，基本就知道哪种适合了，切勿拍脑袋选，后面万一遇到坑了，不仅爬坑累，还容易背锅

开发这个岗位本质属于实际交付层，干的好是领导指挥有方，干的不行就是开发不行，技术选型时候，一定要和领导一起讨论确认

准备设备

这是给我提供的测试摄像头设备，流量版，里面有流量卡，插上电自动就运行了

设备联通后，移动端扫码下APP，登录账号扫码绑定设备，设备正常运行，能在移动端上看到视频就可以了

设备运行正常后，就可以开始代码对接了

代码对接

注册账号，登录后创建应用，然后获取开发使用的 AccessToken，这个Token可以直接复制后使用，这一点还是很方便的

安装依赖包

使用npm引入

npm install ezuikit-js -D

或者使用yarn

yarn add ezuikit-js -D

安装好以后，package.json 中检查版本，版本是8.2.4，最新的

"ezuikit-js": "^8.2.4",

代码接入

接下来在业务代码 .vue 文件中添加代码进行操作

视频播放器初始化

在template中添加视频div播放器

<div id="ezuiPlayer" class="ezui-player"></div>

引入EZUIKit

import EZUIKit from "ezuikit-js";

添加播放器

添加视频播放器初始化函数，并在对应的调用函数中调用下面这个函数，直接通过Apifox先把对应的参数获取到，然后复制出来，先测能不能播放视频

...
// 初始化视频播放器
initVideoPlayer() {
    // 销毁已存在的播放器实例
    this.destroyVideoPlayer();
    
    // 萤石云AccessToken
    const accessToken = "根据接口获取的AccessToken";
    
    // 初始化播放器
    this.videoPlayer = new EZUIKit.EZUIKitPlayer({
        id: "ezuiPlayer",
        accessToken: accessToken,
        url: "ezopen://open.ys7.com/xxxx/1.hd.live", // 视频播放地址
        
        width: "100%",
        height: "100%",
        autoplay: true,
        audio: 0,
        openSoundCallBack: function () {},
        closeSoundCallBack: function () {},
      });
    
    console.log('视频播放器初始化完成');
},

获取accessToken

可以根据后台直接复制token，也能通过调接口获取，根据 open.ys7.com/api/lapp/to… 接口，传 appKey 和 appSecret 参数，获取 AccessToken

注意，post请求，参数是 urlencoded 格式

获取设备信息

获取播放视频需要 deviceSerial 设备参数，根据 open.ys7.com/api/lapp/de… post 接口，传 accessToken 参数，获取设备列表

获取视频播放地址

根据accessToken，上面接口中获取到的 deviceSerial 参数，open.ys7.com/api/lapp/v2… post 接口获取视频播放地址

默认会提示视频加密，需要关闭加密，调用关闭设备视频加密接口

open.ys7.com/api/lapp/de… post，参数accessToken和deviceSerial，这个接口调用成功后，重新获取视频播放地址

关闭加密后，获取视频播放地址成功

注意，上面的 url 视频播放地址是根据设备列表的设备获取的播放地址，实际业务中这一部分都是动态获取的

如果地址获取成功，在页面上就能看到实时视频了

视频区域默认双击可以全屏播放，再次双击后退出全屏

本地视频回放

上面的步骤，是实时视频播放，下面将记录回放功能的相关操作和代码实现

回放功能需要设备要支持回放功能，并且有插了存储卡

回放文档

open.ys7.com/help/4280

回放播放器初始化

代码使用下面这个模板

<div id="ezuikit-player"></div>

// 初始化播放器
const player = new EZUIKit.EZUIKitPlayer({
  id:"ezuikit-player",
  url: "ezopen://open.ys7.com/${设备序列号}/1.rec",
  accessToken:"",
  template:"pcRec",
  width: 600,
  height: 400,
  accessToken:"",
  autoPlay: true,
  audio: true,
  download: true,
  downloadRecord: true
});

注意里面的模板是 template:"pcRec" ，这个是回放模板，剩下的参数和直播播放器一样

回放模板功能中集成了时间轴，可以拖动时间轴查看录像，日期切换，全屏切换等功能

在页面上初始化成功后，默认查询显示的当天的本地视频，这里可以切换日期

指定时间查询录像

执行下面的代码，本质上就是加了时间参数 begin 和 end，重新播放

注意！ 指定开始结束时间的格式为：YYYYMMDDhhmmss，如20250414000000表示2025年4月14日0点0分0秒

const playbackUrl = `ezopen://open.ys7.com/${this.deviceInfo.deviceSerial}/1.rec?begin=${this.playbackStartTime}&end=${this.playbackEndTime}`;
this.playbackPlayer.changePlayUrl({url: playbackUrl});