IPCPlayer - API 文档 - V3.1

Web Components 组件

Web Components | MDN (mozilla.org)
ipcplayer-v3 使用 Web Components 打包为原生 JS 可跨框架使用

配置

scriptSrc 引入

<script src="https://webapi.onewo.com/JSSDK/IPCPlayer/V3.1"></script>

注意：

在框架内使用如果有以下异常
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
是因为自定义标签和框架内标签冲突框架无法识别需配置插件
以下以 vue 为例

// Vite - vite.config.js
export default defineConfig({
  plugins: [
    vue({
      template: {
        // 添加以下内容
        compilerOptions: {
          //将所有以ipc-开头的标签作为自定义元素处理
          isCustomElement: (tag) => tag.startsWith("ipc-"),
        },
      },
    }),
  ],
});

// Vue CLI - vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options, // 其他配置没有则无需
        // 添加以下内容
        compilerOptions: {
          //将所有以ipc-开头的标签作为自定义元素处理
          isCustomElement: (tag) => tag.startsWith("ipc-"),
        },
      }));
  },
};

使用

dom 使用
直接使用自定义标签

<body>
  <ipc-player id="player1" />
</body>

props 使用
基础类型的属性值 (String，Boolean 或 Number)
- 直接在 标签上 设置
```
<ipc-player id="player1" controlItem="false" buffer="1000" mode="single" />
```
- controlItem 会被转换为 false (boolean 类型值) 而 buffer 会被转换为 1000 (number 类型值)
复杂类型的属性值 (Object)
- 获取标签 DOM 对象并设置
```
const player1 = document.getElementById("player1");
player1.gridItem = {
  allStop: true,
  allCalibration: true,
  layoutChange: true,
  proportionChange: true,
  chosen: true,
  fullScreen: true,
};
```
- 基础类型的属性值 虽然可以但 不建议 通过 DOM 对象设置因为这种方式设置需要在 DOM 渲染完毕之后可能会引起某些偶现的 bug
event 使用
获取标签 DOM 对象并使用addEventListener监听事件
```
// 初始化事件
player1.addEventListener("initializationEvent", (event) => {
  const playerArray = event.detail[0].itemPlayerIns;
});
```
- Web Components 传值
  - addEventListener 的回调函数会返回一个event 对象 其中detail属性为事件的返回值
  - event.detail为多个返回参数组成的数组

⚠️ 重要

在 DOM 上操作的事件如： props设置复杂类型属性值 和 event
需确保 DOM 已经生成 后再进行请在类似 onMounted 之类的生命周期中使用

PROPS

使用方法见 Web Components 组件 - 使用 - props 使用

⚠️ 重要

直接在标签上设置时 请务必将小驼峰拆分为 "-" 号命名如 userId => user-id
在组件对象上设置时 保持小驼峰不变

< mode > - 通用参数

释义：播放器模式目前有五种 👇
参数释义
"single" 单播放器
"single-PTZ" 单播放器+云台
"grid" 宫格
"grid-PTZ" 宫格+云台
"grid-polling" 宫格+轮巡
类型：string
默认值：grid-PTZ
注意：single 与 single-PTZ 模式请手动设置宽高

参数	释义
"single"	单播放器
"single-PTZ"	单播放器+云台
"grid"	宫格
"grid-PTZ"	宫格+云台
"grid-polling"	宫格+轮巡

< controlItem > - 通用参数

释义：控制播放器按钮显隐
类型：Boolean Object

默认值：

{
  fullscreen: true, // 播放器全屏
  screenshot: true, // 截图
  play: true, // 播放
  record: true, // 录制
  stop: true, // 停止
  VDetail: true, // 详情
  reset: true, // 重置
  speed: true, // 网速显示
}

为 false 则全不显示

< loadingMsg > - 通用参数

释义：loading 文字(转圈)
类型：String
默认值：视频加载中

< buffer > - 通用参数

释义：缓冲时长
类型：Number
默认值：500

< gridItem > - 宫格参数

释义：控制宫格按钮显隐
类型：Object

默认值：

{
  allStop: true, // 全部停止
  allCalibration: true, // 全部校准
  layoutChange: true, // 布局变化
  proportionChange: true, // 比例变化
  chosen: true, // 已选窗格信息
  fullScreen: true, // 宫格全屏
};

< pollingNum > - 轮巡参数

释义：需进行轮巡的数组长度
类型：Number
默认值：10
播放器会根据 pollingNum 和 当前宫格数 自动计算并返回每组轮巡对应的 Index 数组 ( 点击查看 )
- e.g.：有 10 个设备需进行轮巡 -> 宫格数：4 pollingNum：10
- 初始化时 pollingEvent - indexChange ( 点击查看 ) 事件会返回 [0, 1, 2, 3]
- 每次 点击下一组按钮 / 计时结束 pollingEvent - indexChange ( 点击查看 ) 事件会依次返回 Index数组 ( 以初始状态为例 )
  - [4, 5, 6, 7]
  - [8, 9, 0, 1]
  - [2, 3, 4, 5]
  - [6, 7, 8, 9]
  - ...... 依此类推
- 每次 点击上一组按钮 pollingEvent - indexChange ( 点击查看 ) 事件会依次返回 Index数组 ( 以初始状态为例 )
  - [6, 7, 8, 9]
  - [2, 3, 4, 5]
  - [8, 9, 0, 1]
  - [4, 5, 6, 7]
  - ...... 依此类推

< pollingInterval > - 轮巡参数

释义：轮巡时间间隔
类型：Number
默认值：60

< pollingListener > - 轮巡参数

释义：根据条件进行轮巡监听
类型：<Number>Array / Boolean
默认值：false
e.g.：
- 类型为 <Number>Array ：当 轮巡计时 与数组中的 number 对应上时会触发 pollingEvent - pollingListener 事件
  - 如 [55, 47, 30, 10] 表示轮巡计时等于 55/47/30/10 的时候会触发相当于一个轮巡触发 4 次
- 类型为 Boolean ：值为false表示不监听而值为true则表示全监听即轮巡计时发生变化时每秒都会触发 pollingEvent - pollingListener 事件

< streamRetryTimes > - 断开重连次数

释义：播放过程中连接断开后重新连接次数
类型：Number
默认值：3
e.g.：
- -1：无限重连
- n：重连 n 次

EVENT

使用方法见 Web Components 组件 - 使用 - event 使用

< initializationEvent > - 通用事件

释义：初始化事件播放器初始化时触发返回对应的双向绑定实例

⚠️ 重要

此事件必须监听
宫格模式时返回 <宫格对象> 与 <播放器对象数组> 组成的对象
单播放器模式时返回 <播放器对象>
返回数据请为响应式对象 请保存

返回参数：

数量： 1
获取方式：event.detail[0]
参数类型： Object
参数详解：
- 宫格模式 ( 四宫格为例 )：
```
{
  "gridIns": Object, // 宫格实例 请保存
  "itemPlayerIns": [ // 窗格数组 请保存
    {
      "playerIns": Object,
      "url": "",
      "streamType": "",
      "fileName": "",
      "msg": "",
      "data": undefined
    },
    {
      "playerIns": Object,
      "url": "",
      "streamType": "",
      "fileName": "",
      "msg": "",
      "data": undefined
    },
    {
      "playerIns": Object,
      "url": "",
      "streamType": "",
      "fileName": "",
      "msg": "",
      "data": undefined
    },
    {
      "playerIns": Object,
      "url": "",
      "streamType": "",
      "fileName": "",
      "msg": "",
      "data": undefined
    }
  ]
}
```
  - gridIns：宫格实例 挂载了宫格对应的方法详见 INSTANCEFUNCTION - gridIns
  - itemPlayerIns：窗格数组
    数组中的窗格对象对应播放器窗格如 0 号索引 对应 第一个窗格 依次类推
    窗格对象详解如下 👇
    - playerIns：播放器实例 挂载了播放器对应的方法详见 INSTANCEFUNCTION - playerIns
    - url：视频播放地址 该窗格播放视频的地址 发生变化会自动更新播放
    - streamType：视频流类型 将在视频详情中展示 空值则不展示 一般为子码流/主码流需后端提供
    - fileName：文件名称 保存文件 ( 截图/录制 ) 时会在此名称后自动拼接当前时间作为文件名 空值则为时间戳
    - msg：展示信息 窗格中部展示的信息可用于状态提示等 空值则不显示
    - data：冗余参数 挂载在窗格对象上的冗余参数按需使用且不会被自动清除
      宫格的全部停止事件与播放器的停止事件会自动清除对应窗格对象的
      url / streamType / fileName / msg
      但不会清除 data
- 单播放器模式：
```
{
    "playerIns": {},
    "url": "",
    "streamType": "",
    "fileName": "",
    "msg": "",
    "data": undefined
},
```
  用法同宫格模式中的窗格对象

< playerEvent > - 通用事件

释义：播放器事件播放器播放/停止/暂停/录制等事件时触发

返回参数：

数量：1~3
获取方式：参数1 - event.detail[0] 参数2? - event.detail[1] 参数3? - event.detail[2]
参数类型： 参数1 - String 参数2? - Number 参数3? - any

参数详解：

参数 1：事件详细类型
参数 2：窗格索引 ( 单播放器模式下无 ) 表示触发此事件的具体窗格
参数 3：其他参数 视参数 1 的类型而定
- 若根据当前事件详细类型存在参数 3 ( 如"error" ) 且不存在参数 2 ( 单播放器模式下 ) 参数 3 在event.detail中索引会自动前移

参数 1	参数 2	参数 3	释义
"recordStart"	Number	/	开始录制时触发
"recordEnd"	Number	/	结束录制时触发
"play"	Number	/	开始播放时触发
"pause"	Number	/	暂停播放时触发
"destroy"	Number	/	停止播放时触发
"loadingEnd"	Number	/	loading 转圈结束时触发
"error"	Number	`error - 错误信息[1]`	播放异常时触发
"timeout"	Number	"request failed" \| "stop playing"	播放超时时触发
"streamEnd"	Number	/	流断开事件

`[1] error - 错误信息`

参数 2	参数 3	释义
Number	websocketError	websocket 链接无响应
Number	fetchError	http 链接无响应
Number	analysisIFrameError	解析关键帧失败
Number	decoderError	解码失败

< gridEvent > - 宫格事件

释义：宫格事件宫格选中窗格/切换布局/批量操作等事件时触发

返回参数：

数量：1~2
获取方式：参数1 - event.detail[0] 参数2? - event.detail[1] `
参数类型： 参数1 - String 参数2? - any

参数详解：

参数 1：事件详细类型
参数 2：其他参数 视参数 1 的类型而定

参数 1	参数 2	释义
"PTZShow"	Boolean - 当前云台操作展开状态	云台操作栏展开/关闭时触发
"ALLStop"	/	全部窗格停止播放时触发
"ALLCalibration"	/	全部窗格重置校准时触发
"gridLayoutChange"	Number - 当前窗格数量	宫格布局变化时触发
"gridProportionChange"	Number - 当前窗格高宽比	宫格比例变化时触发
"gridChoose"	Number - 当前选中窗格的索引	窗格选中时触发

< PTZEvent > - 云台事件

释义：云台事件云台控制按钮被点击时触发

返回参数：

数量：2
获取方式：参数1 - event.detail[0] 参数2 - event.detail[1]
参数类型： 参数1 - String 参数2 - Number

参数详解：

参数 1：事件详细类型
参数 2：云台速度

参数 1	参数 2	释义
"rotateTL"	Number	云台上仰和左转时触发
"rotateT"	Number	云台上仰时触发
"rotateTR"	Number	云台上仰和右转时触发
"rotateL"	Number	云台左转时触发
"rotateR"	Number	云台右转时触发
"rotateDL"	Number	云台下俯和左转时触发
"rotateD"	Number	云台下俯时触发
"rotateDR"	Number	云台下俯和右转时触发
"zoomAdd"	Number	变倍增加时触发
"zoomSubtract"	Number	变倍减少时触发
"apertureAdd"	Number	光圈增加时触发
"apertureSubtract"	Number	光圈减少时触发
"focusAdd"	Number	聚焦增加时触发
"focusSubtract"	Number	聚焦减少时触发
"speedAdd"	Number	速度增加时触发
"speedSubtract"	Number	速度减少时触发

< pollingEvent > - 轮巡事件

释义：轮巡事件轮巡按钮点击/轮巡触发/index 数组变化/轮巡监听等事件时触发

返回参数：

数量：2
获取方式：参数1 - event.detail[0] 参数2 - event.detail[1]
参数类型： 参数1 - String 参数2 - any

参数详解：

参数 1：事件详细类型
参数 2：其他参数 视参数 1 的类型而定

参数 1	参数 2	释义
"indexChange"	<Number>Array - 当前轮巡对应的 Index 数组[2]	index 数组变化时触发
"pollingState"	String - 操作类型：`play` `pause` `stop` `prev` `next`	轮巡事件按钮被点击时触发
"pollingListener"	Number - 当前监听的时间	轮巡监听触发事件

`[2] Index数组`

长度为当前宫格数其中的元素为 需进行轮巡的数组 中元素的索引

INSTANCEFUNCTION

宫格实例/播放器实例对象上挂载的方法
实例获取见 EVENT - event 使用

宫格实例

initializationEvent事件中获取的gridIns

方法名	使用方式	参数	释义
PTZShow	gridIns.PTZShow(Boolean)	是否显示	云台控制面板开启关闭
ALLStop	gridIns.ALLStop()	/	窗格全部停止
ALLCalibration	gridIns.ALLCalibration()	/	窗格全部校准
fullScreen	gridIns.fullScreen()	/	宫格全屏
gridLayoutChange	gridIns.gridLayoutChange(String)	`布局对应字符串[3]`	宫格布局更改
gridProportionChange	gridIns.gridProportionChange(Number)	窗格高宽比	宫格比例更改
	--- 轮巡模式额外方法 👇 ---
pollingStart	gridIns.pollingStart()	/	开始轮巡
pollingPause	gridIns.pollingPause()	/	暂停轮巡
pollingStop	gridIns.pollingStop()	/	停止轮巡
pollingPrev	gridIns.pollingPrev()	/	上一组
pollingNext	gridIns.pollingNext()	/	下一组
pollingNext	gridIns.isPolling()	/	是否在轮巡中 `返回值 Boolean`

`[3] 布局对应字符串`

字符串宫格布局样式宫格数
"1" 1*1 1
"2" 2*2 3
"3" 3*3 9
"4T22" 2+8 10
"3LT2" 1+2+3 6
"4LT3" 1+3+4 8

字符串	宫格布局样式	宫格数
"1"	1*1	1
"2"	2*2	3
"3"	3*3	9
"4T22"	2+8	10
"3LT2"	1+2+3	6
"4LT3"	1+3+4	8

播放器实例

initializationEvent事件中获取的playerIns

方法名	使用方式	参数	释义
restartPlay	playerIns.restartPlay()	/	重置校准
play	playerIns.play()	/	开始播放
pause	playerIns.pause()	/	暂停播放
destroy	playerIns.destroy()	/	停止销毁
isPlaying	playerIns.isPlaying()	/	是否在播放 `返回值 Boolean`
VDdetail	playerIns.VDdetail()	/	打开/关闭详细信息面板
fullscreen	playerIns.fullscreen(Boolean)	是否全屏	全屏控制
screenshot	playerIns.screenshot()	/	截图
record	playerIns.record()	/	录制

IPCPlayer - API 文档 - V3.1 #

Web Components 组件 #

配置 #

使用 #

dom 使用 #

props 使用 #

event 使用 #

PROPS #

< mode > - 通用参数 #

< controlItem > - 通用参数 #

< loadingMsg > - 通用参数 #

< buffer > - 通用参数 #

< gridItem > - 宫格参数 #

< pollingNum > - 轮巡参数 #

< pollingInterval > - 轮巡参数 #

< pollingListener > - 轮巡参数 #

< streamRetryTimes > - 断开重连次数 #

EVENT #

< initializationEvent > - 通用事件 #

< playerEvent > - 通用事件 #

[1] error - 错误信息 #

< gridEvent > - 宫格事件 #

< PTZEvent > - 云台事件 #

< pollingEvent > - 轮巡事件 #

[2] Index数组 #

INSTANCEFUNCTION #

宫格实例 #

[3] 布局对应字符串 #

播放器实例 #

IPCPlayer - API 文档 - V3.1

Web Components 组件

配置

使用

dom 使用

props 使用

event 使用

PROPS

< mode > - 通用参数

< controlItem > - 通用参数

< loadingMsg > - 通用参数

< buffer > - 通用参数

< gridItem > - 宫格参数

< pollingNum > - 轮巡参数

< pollingInterval > - 轮巡参数

< pollingListener > - 轮巡参数

< streamRetryTimes > - 断开重连次数

EVENT

< initializationEvent > - 通用事件

< playerEvent > - 通用事件

`[1] error - 错误信息`

< gridEvent > - 宫格事件

< PTZEvent > - 云台事件

< pollingEvent > - 轮巡事件

`[2] Index数组`

INSTANCEFUNCTION

宫格实例

`[3] 布局对应字符串`

播放器实例