IPC-JSSDK

Appearance

On this page

IPCPlayer - DEMO

1. 引入 js 

<script src="https://webapi.onewo.com/JSSDK/IPCPlayer/V3.2"></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-"),
        },
      }));
  },
};

2.使用标签并配置 props 

<body>
  <ipc-player id="player1" mode="grid-PTZ" />
</body>

3.获取组件对象 

const player1 = document.getElementById("player1");

4.监听初始化事件 

let playerArray; // 由 PANE<窗格> 组成的窗格数组
let gridIns; // 宫格实例 该对象上挂载了 窗格控制 相关方法
player1.addEventListener("initEvent", (emit) => {
  // 监听初始化事件 获取窗格数组以及宫格实例
  playerArray = emit.detail[0].panes;
  gridIns = emit.detail[0].gridIns;
});

5.播放视频 

playerArray[0].url = "wss://视频地址"; // 索引为0 表示在1号窗格播放视频

6.宫格实例操作 

gridIns.PTZShow(true) // 展开云台控制面板
gridIns.ALLStop() // 所有窗格全部停止播放
......

7.播放器实例操作

  • 先获取指定窗格的播放器实例 ( 每个PANE<窗格>对象 都包含一个播放器实例)

    • // 假定需要对3号窗格播放器实例进行操作
const pane3PlayerIns = playerArray[2].playerIns; // 索引为2 表示获取3号窗格对象上的playerIns

  • 再对 3 号窗格的播放器实例进行操作

    • pane3PlayerIns.pause(); // 暂停3号窗格的视频播放
pane3PlayerIns.screenshot(); // 对3号窗格视频进行截图
pane3PlayerIns.fullscreen(); // 3号窗格全屏
......

  • 更多详见 API - 播放器实例