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;	查询结果回调函数

版本更新

版本发行