vue3 wspt 插件的使用 wsplayer无插件开发包封装

基于大华插件：H5播放器开发套件（wsplayer无插件开发包） V1.2.9

使用方法

npm i wspt

wspt使用说明

1. 找到node_modules目录中wspt文件夹，将static文件夹、jquery.min.js、palyer.css、PlayerControl.js、WSPlayer.js文件复制到项目public目录下。

public|-- jquery.min.js|-- player.css|-- PlayerControl.js|-- WSPlayer.js|-- static|-- utils.js|-- svg|-- WSPlayer|-- icon|-- multiThread|-- libdhplay.js|-- libdhplay.wasm|-- libdhplay.worker.js|-- singleThread|-- libdhplay.js|-- libdhplay.wasm|-- audioTalkWorker.js|-- PlayerControl.js|-- WSPlayer.js

2. 在index.html中引入js文件

 <link href="/player.css" rel="stylesheet"><script src="/PlayerControl.js"></script><script src="/WSPlayer.js"></script><script src="/jquery.min.js"></script>

3. 如在node_modules中未找到以上文件，请到其他项目中或ICC开放平台-资源下载-开发demo-wsplayer无插件开发包V1.2.9源码中获取

4. 在main.js中引入wspt模块

import wspt from 'wspt/wspt.umd'
app.use(wspt)

公共方法

getWsptVideoStatus 获取设备在线离线状态（会验证登录）：

loginInfo:Object 登录信息 用户名密码等

item:Object 监控信息 必须包含channelId 和 deviceSbbh

return Promise

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
await proxy.$getWsptVideoStatus(loginInfo,item)

getWsptItemStatus 获取设备在线离线状态 （不会验证登录）：

item:Object 监控信息 必须包含channelId 和 deviceSbbh

return Promise

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
await proxy.getWsptItemStatus(item)

wsptLogin 登录

params:Object 登录信息

return Promise

wsptLogin(params).then(res => {});

wsptEncrypt 加密

str:String 需要加密的字符串

return 加密后的字符串

 

属性方法配置项

loginData: 登录参数

loginData:{username:"",//用户名password:"",//密码isEncryption:true,//密码是否已经加密proxyIp:""
}<wspt ref="wsptRef" :loginData="loginData" ></wspt>

loginData 中 如果isEncryption为true，则password为加密后的密码，调用wspt.encryptData方法加密

wsptRef.value.encryptData("xxxxx")

播放视频监控：在登录后调用wsptPlay方法传入监控信息进行播放

const params={"method": "setTreeNodeList",//固定"data": [{"channelCode": "1000155$1$0$0",//监控通道号"id": "1000155$1$0$0",//监控通道号"isOnline": 1,//是否在线"cameraType": "2"//监控类型 1为枪机 2为球机 有云台}
}
wsptRef.value.wsptPlay(params)

hasPan:是否显示云台控制 默认true

<wspt ref="wsptRef" :hasPan="true"></wspt>

如果想更自由调整云台样式，可使hasPan为false，在代码中添加以下代码自定义调整

<div class="right-video-wrapper"><div class="operation-content-left"><div id="ws-pan-tilt"></div></div>
</div>

logins:登录

loginData:{username:"",//用户名password:"",//密码isEncryption:true,//密码是否已经加密proxyIp:""
}wsptRef.value.logins(loginData)

initPlayer:初始化视频播放器

  wsptRef.value.initPlayer()

initPlayer:初始化视频播放器

  wsptRef.value.initPlayer()

setPlayerNum:设置显示的路数

    wsptRef.value.setPlayerNum(number)

close:关闭所有视频

    wsptRef.value.close()