@syhr/qt-player NPM

QtPlay 的使用

一、安装

npm i @syhr/qt-player

如果安装报错则有可能 node 版本冲突添加--force 尝试一下

下载完毕后源码目录结构如图所示 qtplayer

二、使用

import QtPlayer from '@syhr/qt-player';

直接当组件使用即可（若需求有加弹窗等业务，比如红外测温弹窗，录像下载弹窗等，建议二次封装）

三、参数

属性名	说明	类型	默认值
url	插件 WS 地址	string	ws://localhost:12001
ip	流媒体服务 ip	string	127.0.0.1
port	流媒体服务端口	string	15600
list	视频播放列表	array
mode	播放模式(0:预览，1:回放)	number	0
count	视频分屏数量	number	4
fixtop	是否置顶（多插件情况）	boolean	false
control	可控状态	boolean	false
visible	播放器显示	boolean	true
fullscreen	播放器全屏	boolean	false
imagePath	图片储存路径	string	‘’
videoPath	视频储存路径	string	‘’
videoFile	视频下载文件	string	‘’
videoIcon	视频占位图标	string	‘’
videoText	视频占位文字	string	暂无视频接入
clipElements	播放器需裁剪元素	array
mutationNode	定位关联节点	string	null
switchStream	视频自动切换码流	boolean	true
switchCount	视频切换码流分屏数	number	4

四、事件

事件名	说明	备注
close（主动）	点击插件关闭回调	-
active（主动）	点击视频宫格回调	第几宫格
ptz-control（主动）	可控状态下视频控制回调	点击云台控制按钮后，窗口进入可控状态
area-control（主动）	可控状态下右键框选回调（可见光）	可用于区域放大
firtemp（主动）	可控状态下右键框选回调（红外）	可用于弹窗测温
download（被动）	下载中的视频录像	-
downloaded（被动）	返回已下载视频录像文件	-
screenshot（主动）	点击截图按钮回调	-
record（主动）	点击录像按钮回调	-
dblclick（主动）	双击视频回调	-
return-path（被动）	返回储存路径	-
esc(被动)	按 Esc 回调	可用于退出全屏

五、方法

方法名	说明	参数
playVideo	播放视频	index, nvrId, cameraId, streamId=0
closeVideo	关闭视频	index
replayVideo	播放回放视频	type=0, index, nvrId, cameraId, startTime, endTime
downloadedVideo	查询已下载的录像	-
dowloadVideo	下载某一个录像	type=0, nvrId, cameraId, recordId, startTime, endTime
openVoice	开启语音对讲	index, nvrId, cameraId
closeVoice	关闭语音对讲	index
getPlayerPath	获取文件保存路径	-
setPlayerPath	设置文件保存路径	path

::: danger 未给默认值的必传 :::

六、常见问题

控件出不来

安装插件后打开 videoForWeb 文件夹，打开 WakeUp.exe 重试。:sweat_smile:
后续如果前端调页面有插件遮挡情况可以打开任务管理器中将 WakeUp.exe 和 VideoForWeb.exe 进程关掉即可。:sweat_smile:

视频播放不了

确定流媒体服务是否正常连接，如果连接失败控制台会报错。:sweat_smile:
确定 list 里面 key & value 是否正常。:sweat_smile:

其他问题参考七

七、前端调试及视频端枚举表

前端调试：打开浏览器控制台 => Network => WS，WS 下有 localhost 且为 12001 端口的即是流媒体 WS 连接，你发的任何指令以及接收的任何指令都在此处。

枚举表： | 值 | 说明 | | --- | ---------------------- | | 0 | 建立连接 | | 1 | 播放视频 | | 2 | 显示视频 | | 3 | 视频分屏 | | 4 | 关闭视频 | | 6 | 下载视频 | | 7 | 回放视频 | | 8 | 保存视频 | | 9 | 选中视频 | | 10 | 视频录像下载 | | 12 | 裁剪视频 | | 13 | 云台控制 | | 16 | 视频关闭回调 | | 17 | 框选区域控制（可见光） | | 18 | 进入全屏 | | 19 | 取消下载 | | 20 | 下载进度 | | 21 | 窗口置顶 | | 23 | 退出全屏 | | 24 | 关闭单个视频 | | 25 | 已下载录像 | | 26 | 框选区域控制（红外） | | 27 | 实时抓图 | | 28 | 视频录像 | | 29 | 设置路径 | | 30 | 获取路径 | | 31 | 返回路径 | | 32 | 开启语音 | | 33 | 关闭语音 | | 34 | 双击事件 |

@infinitebrahmanuniverse/nolb-_syh @everything-registry/sub-chunk-888 @zalastax/nolb-_syh

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago