wsplayer-lz
v1.0.0
Published
props: selectedList 列表 selectedWindow setPtzChannel ws-pan-tilt-t 云台容器id # WSPlayer - 大华播放器
Downloads
3
Readme
props: selectedList 列表 selectedWindow setPtzChannel ws-pan-tilt-t 云台容器id
WSPlayer - 大华播放器
WSPlayer是在web端播放的一种方案，通过websocket建立连接进行拉流，然后通过加载的加码库进行加载，最后通过video/canvas进行渲染播放。
此demo使用vue3构建，演示了各种api的使用，WSPlayer核心源码使用原生js和jquery构建，可适用于各种框架。
WSPlayer使用了jquery的部分API，因此在使用WSPlayer时，请提前引入jquery。
相关对接文档，详见doc文件夹。
主要功能介绍
通用功能
实时预览
录像回放
核心目录文件介绍
doc 存放对接的相关文档
public
|- static
|- svg 静态图片
|- WSPlayer 播放器静态文件（项目中需要全部引入）
|- icon 播放器所需的一些图标
|- multiThread 多线程解码库
|- singleThread 单线程解码库
audioTalkWorker.js 对讲worker
player.css 播放器样式
PlayerControl.js 解码库入口
WSPlayer.js 播放器入口
|- jquery-3.6.0.min.js jquery源码
server 服务
src
|- components demo中的vue组件
deviceTree.vue
leftOperate.vue
speedSelect.vue
WSPlayerComponent.vue 演示了如何创建并使用播放器
|- icc
icc.js 集成所有接口
PlayManager.js 播放器入口文件
|- WSPlayer 播放器组件源码
|- config
config.js 播放器配置文件
CONSTANT.js 主要定义一些错误码
PlayItem.js
Procedure.js 集成所有的播放流程
RealPlayer.js 实时预览播放器
RecordPlayer.js 录像回放播放器
spin.js
util.js
WSPlayer.js 无插件播放组件入口，其中创建多个播放器
WSPlayerManager.js调试
此demo使用vue3 + vite构建，运行时本地node版本不得低于 16.0.0。
1、启动wsplayer demo
更改服务ip：
/config/config.js文件中，更改ip为icc服务ip。（若ICC平台的地址有端口号，还需要带上端口号）
export default {
ip: "10.56.24.100",
// ip: "10.56.24.131:8444"
}启动项目
# 下载依赖
npm install
# 启动
npm run dev2、页面调试
首先打开icc平台的地址进入到首页，在https环境下保证通过https证书。
然后打开 http://localhost:xxxx 地址，xxxx为实际启动时使用的端口。
点击右上角登录按钮进行icc平台登录。
登录之后便可以操作组织树，实时预览单击在线的通道可播放视频，单击在线的设备可批量播放在线的通道视频。
功能详解
a、通用功能
音频
目前音频只支持G711、G726、AAC、MP3等四种格式。
播放视频后，鼠标放在视频上，上方bar条会显示音频开关图标。此图标可配置是否显示。
每时刻只能有一路视频播放音频。开启音频会自动关闭掉其他视频的音频。
视频
视频支持H264、H265等编码格式，MJPEG格式不支持播放。
播放视频后，鼠标放在视频上，上方bar条会显示编码格式以及视频的分辨率。
本地录像
本地录像指边播放边录制，当录制码流达到指定大小(默认100M)后会以MP4格式下载下来(也可以通过改配置以dav格式下载本地录像)。视频没有播放不可录制本地录像。
播放视频后，鼠标放在视频上，上方bar条会显示本地录像图标。此图标可配置是否显示。
实时预览、录像回放均可进行本地录像。
点击本地录像后，就会开始录制，直到录制达到设置的文件大小时，就会下载下来，或者停止本地录像也会下载下来。 如果没有停止本地录像，一段录像下载之后，就会接连录制下一段录像。
抓图
播放视频后，鼠标放在视频上，上方bar条会显示抓图按钮图标。点击图标即可抓图到本地。视频没有播放不可抓图。
多路播放
wsplayer最大支持25路播放。默认最大4路播放，创建wsplayer时可通过配置进行更改最大播放路数。
支持1、4、9、16、25等五种多路播放分割模式。
项目中可根据用户的电脑性能配置最大的路数。
规则线
wsplayer支持显示规则线。默认显示规则线，创建wsplayer时可通过配置进行更改是否显示规则线。
b、实时预览
IPC对讲
只支持G711a音频格式的IPC对讲。
播放视频后，鼠标放在视频上，上方bar条会显示对讲的图标。此图标可配置是否显示。
视频子系统V1.1.4才开始支持ipc对讲功能，老版本视频子系统需要定制。
http协议不支持对讲。（浏览器处于安全考虑，禁用http协议下调用媒体api，无法收集音频）
目前IPC对讲只支持8系，9系不支持。
云台
wsplayer集成的云台功能有八方向操作、变倍、变焦、光圈、三维定位操作等。
可根据选中播放的通道的类型以及能力，开放不同的功能。
在创建实时预览播放器的时候，可同时创建云台。
球机能够使用云台所有功能。 枪机则需要通过能力集去判断能够使用云台哪些功能。枪机通道能力集有电动聚焦或者云台控制时，可以使用变倍、变焦。枪机通道能力集有云台控制时，可以使用方向控制。
码流切换
可通过码流切换按钮，切换码流至主码流、辅码流1、辅码流2。
默认以辅码流1播放，若辅码流1不存在，或者辅码流1三秒内拉不到流，则自动切换成主码流。
播放视频后，鼠标放在视频上，上方bar条会显示切换码流的选项。切换码流可配置是否显示。
c、录像回放
录像回放只支持查询某一天内的录像，不支持跨天查询。
录像回放倍速功能
倍速范围：1/8 1/4 1/2 1 2 4 8等7种倍速。
其中只有1/2 1 2等三种倍速支持播放音频，其他倍速不支持播放音频。
不支持退放（快退慢退等）。
跳转播放
提供两种跳转播放方式，一种是根据时间轴跳转，时间轴上显示有录像的区域，点击即可跳转，第二种是通过接口传入时间（HH:mm:ss格式）进行跳转。
时间轴可配置是否显示。
连续播放
对于中心录像来说，可能是一段一段的文件存储在中心服务器上，一段录像播放完就需要请求下一段录像进行连续播放，直到最后一段录像播放完成。