使用说明

KPlayer，是对 “翼智家行业版” Hybrid（混合）客户端所提供的原生功能的封装。

Hybrid客户端使用QT框架开发，使用QtWebkit/QtWebEngine提供嵌入的浏览器环境。同时，使用QtWebChannel与浏览器环境内的网页进行通讯。

Hybrid客户端提供的功能文档见《WEB客户端接口》，KPlayer中的方法都源自于该文档，并进行了简单的封装。

安装 KPlayer

npm i @npv3/kplayer -S

创建 KPlayer

import KPlayer from '@npv3/kplayer'

// 判断网页环境是否支持 KPlayer
if（KPlayer.inQt()） {
  console.log('当前环境支持 KPlayer')
} else {
  console.log('您当前的环境不支持 KPlayer, 请使用正确的客户端打开页面，或使用浏览器支持的播放方案')
}

const player = new KPlayer({
  // 播放器依附的DOM元素
  playerEl: document.querySelect('#player'),
  // 播放器类型，live 或者 playback
  type: 'live',
  // 接收客户端消息的回调方法
  onWebChannelRecvMessage: (func, param, webChannel) => {}
})
// 等待player webChannel初始化完成
await player.webChannelInitialize()
// 播放直播地址
// player.webChannel.playPlayer(...)
// 发送消息（通用方式）
player.webChannel.sendMessage(func, param)

使用示例

// 通过QTWebChannel发送消息（通用方试）
// 如果KPlayer所封装的方法不全，可以直接使用该方法与客户端通讯，参考《WEB客户端接口》文档。
player.webChannel.sendMessage(func, param)

// 2.1, 2.8 更新播放器窗口的位置
const posRect = {
  x1: left,      // 可视区域左上角x坐标
  y1: top,       // 可视区域左上角y坐标
  x2: width,     // 可视区域宽度
  y2: height,    // 可视区域高度
  x3: realLeft,  // 真实区域左上角x坐标
  y3: realTop,   // 真实区域左上角y坐标
  x4: realWidth, // 真实区域宽度
  y4: realHeight // 真实区域高度
}
player.webChannel.setPlayerPos(posRect)

// 2.2, 2.9 直播窗口显示（或隐藏）
const show = 1 // 0
player.webChannel.setPlayerShowStatus(show)

// 2.3 直播窗口多画面分屏
const screenNum = 1
player.webChannel.setPlayerScreenNum(screenNum)

// 2.4 直播窗口全屏（或退出全屏）
const isFullScreen = 1 // 0
player.webChannel.setPlayerFullScreen(isFullScreen)

// 2.5, 2.10 播放视频直播（或回看）
// 视频直播
const params = {
  deviceId: '33010600001327270679',
  deviceName: 'test',
  control: 1, // 是否支持云台控制
  playUri: 'rtsp://183.131.55.25:30010/pssWork_2/l_194116'
}

// 视频回看
const params = {
  deviceId: '33010600001327270679',
  deviceName: 'test',
  playStartTime: '2020-10-28 16:01:49',
  playEndTime: '2020-10-28 16:11:59',
  playUri: 'rtsp://183.131.0.1/pssWork_2/l_194116'
}
player.webChannel.playPlayer(params)

// 2.6, 2.11 关闭播放器
player.webChannel.stopPlayer()

// 2.7 直播轮巡视频播放
const params = {
  "deviceInfo": [{
    "deviceId": "61fd72b02f9311eb314f25d6ae6bbe8d",
    "deviceName": "临安指南山",
    "control": 1，//是否支持云台控制
    "playUri": "rtsp://183.131.55.25:30010/pssWork_2/l_194116",
    "orgName": "杭州市西湖区", //组织架构关系
    "collect": 1 //1 收藏, 0未收藏
  }]
}
player.webChannel.playCycle(params)

// 2.12 弹出电子地图
const params = {
  emapUrl: 'http://kvideo.51iwifi.com/map/#/home'
}
player.webChannel.showEmapPage(params)