soc-ivs-sdk

介绍

基于浏览器客户端web播放器，插件安装在客户端pc上，插件直接接入华为IVS视屏云支持ivs3000,ivs3800,ivs1800.最大支持25路辅码流实时画面同时播放。同时支持云台控制、本地抓拍、云台抓拍、本地录像、设备收藏、窗格切换、全屏、录像查询、设备查询、录像回放支持快进、快退、倍速播放、暂停、恢复

软件架构

web js 插件以typescript 编写支持npm安装引入、cdn方式引入，不限于技术栈如vuejs、react、angularjs目前市面上主流MVVM框架结构

基于浏览器的客户端插件，exe形式进行安装。插件需要本地一些操作权限，为了更好使用该插件，安装时请以管理员身份运行安装。

安装

npm命令行，

npm install soc-ivs-sdk --save
or
yarn add soc-ivs-sdk --save

使用说明

入口文件样式引入

import 'soc-ivs-sdk/dist/style/index.css'

vue引入示例

<template>
  <div id="playerBox">
  </div>
</template>
<script>
import SocWebPlayerSDK, {
  SwpEvents,
  SwpImage,
  SwpPlaySteamType,
  SwpWindows
} from 'soc-ivs-sdk';
 export default {
  name: "Home",
  components: {},
  data() {
    return {
      player:null
    };
  },
   init() {
     this.player = new SocWebPlayerSDK({
      ip: '10.xx.xx.xxx',
      userName: 'username',
      password: 'password',
      port: 9900,
      target: document.querySelector('#playerBox') as HTMLElement,
      isIVS: true,
      wndBackgroundColor: '#202945',
      splitBorderColor: '#394567',
      primaryColor: '#407AEE',
      borderColor: '#2A3451',
      fontColor: '#8696b5',
      quality: 90,
      isFooter: true,
      frameRate: 120,
      toolBackColor: '#1A2137',
      backgroundColor: [32, 41, 69, 1],
      windows: SwpWindows.SIX,
      imageStreamFormat: SwpImage.JPEG,
      wndInfo: `<img src='/videologo.png' width="80" />`,
      isGzip: false,
      onEvents: (data: SwpEvents) => {
        console.info(data);
      }
    });
   }
};
</script>

SocWebPlayerSDK实例

| 名称 | 构造参数 | 默认值 | 说明 | | --------------- | ------------ | ---- | ---------- | | SocWebPlayerSDK | SwpConfigure | 无 | 初始化的基础参数信息 |

SwpConfigure 属性

| 名称 | 类型 | 默认值 | 说明 | | ------------------- | --------------------- | --------------------------- | ---------------------------------------- | | ip | string | 无 | 视频云平台ip地址 | | userName | string | 无 | 视频云平台用户名 | | password | string | 无 | 视频云平台密码 | | port | number | 9900 | 视频云平台端口号 | | windows | SwpWindows | 默认9窗格 | 默认窗口数，支持[1,4,6,9,12,16,25] | | target | HTMLElement | 无 | 插件承载的元素容器 | | quality | number | 100 | 画面的质量数值越高质量越好，最大值为100，数值越低性能越好，图片质量较差。 | | isFooter | boolean | true | 是否显示底部控制栏 | | imageStreamFormat | SwpImage | jpeg | 帧画面格式，png和jpeg | | serverUrl | string | 默认无 | 播放器服务端地址，如设置该值，当前播放器为服务端转码播放。默认是客户端转码插件安装转码播放。 | | frameRate | number | 120 | 每秒推送的帧数最大25，数值越大性能要求越高，画面细节更多。 | | splitBorderColor | string | | 窗口分割线颜色 | | backgroundColor | number[] | | 转码客户端背景色，rgba如[0,0,0,1]黑色不透明 | | primaryColor | string | | 播放器主题色 | | fontColor | string | | 播放器字体颜色 | | toolBackColor | string | | 播放器工具栏颜色 | | borderColor | string | | 播放器边框颜色 | | timeOut | number | | 播放器请求超时时间 | | snapshotPath | string | c:\soc\snapshot | 抓拍图片存储路径 | | videoPath | string | c:\soc\video | 本地录像存储路径 | | downloadPath | string | c:\soc\download | 录像下载存储路径 | | isGzip | boolean | false | 是否开启gzip压缩 | | wndInfo | string | HTMLElement | | 空闲窗口显示内容 | | onError | function | (err: ErrorMessage) => void | 异常上报事件回调 | | onEvents | function | (data: SwpEvents) => void; | 播放器事件上报回调函数 | | onWindowActiveEvent | function | (data: any) => void | 窗口激活事件 |

methods

| 名称 | 参数类型 | 默认值 | 返回值 | 说明 | | ----------------- | -------------------------- | ---- | ------- | --------- | | play | SwpPlayOption | 无 | Promise | 实时画面/录像回放 | | batchPlay | (SwpPlayOption[]，callback) | 无 | void | 批量播放实况/录像 | | changeWindow | SwpWindows | 无 | void | 设置窗口数 | | closePlayerWindow | number | 无 | void | 关闭指定窗口 | | clearPlayer | 无 | 无 | void | 清空所有窗口播放 | | queryVideoRecord | SwpQueryDeviceOptions | 无 | void | 录像片段查询 | | destroy | 无 | 无 | void | 播放器销毁 |

SwpWindows 枚举

| 枚举名称 | 类型 | 枚举说明 | | ----------- | ------ | :---- | | ONE | number | 1窗格数 | | FOUR | number | 4窗格数 | | SIX | number | 6窗格数 | | NINE | number | 9窗格数 | | TWELVE | number | 12窗格数 | | SIXTEEN | number | 16窗格数 | | TWENTY_FIVE | number | 25窗格数 |

SwpPlayOption

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ---------------- | --------------------- | :---------------------- | | cameraCode | string | 无 | 摄像机编码 | | cameraName | string | 无 | 摄像机名称 | | streamType | SwpPlaySteamType | 2 | 码流类型 | | startTime | string | 录像回放必传 | 开始时间utc（YYYYMMDDHHmmss） | | endTime | string | 录像回放必传 | 结束时间utc（YYYYMMDDHHmmss） | | wnd | number | 默认不传入，自动获取空闲窗口 | 指定窗口 | | playTime | number | 默认不传入，指定距离开始时间的秒数进行播放 | 播放时间 |

注意：录像存储的时间节点为utc（零时区的时间）与当前用户所在时区有时差，根据当前时区去换算成零时区的时间节点传入。

SwpQueryDeviceOptions

| 名称 | 类型 | 默认值 | 说明 | | ---------- | ------------- | ------------------------------ | ------------------------- | | cameraData | CameraData[]; | | 摄像机信息支持多个 | | startTime | number | | 开始时间 | | endTime | number | | 结束时间 | | recordType | string | 1告警录像 2计划录像 4 手动录像 | 录像类型 如查告警录像和计划录像 1+2 则传入3 | | callBack | function | (e: CameraRecordData) => void; | 查询结果回调函数 |

版本更新

版本发行