基于大华插件：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()