wcs-video-player
🚀 wcs 视频播放器组件 🌈. 快速方便的播放WCS平台设备视频.
安装
npm i @vanwei-wcs/video-player
使用
import wcsVideoPlayer from ' @vanwei-wcs/video-player'
import ' @vanwei-wcs/video-player/themes/base.css'
// vue template里面代码
<wcsVideoPlayer
ref="player"
></wcsVideoPlayer>
组件api
属性 Attributes
组件的props
参数 |
说明 |
类型 |
可选值 |
默认值 |
websocket-url |
websocket连接地址,必传 |
string |
- |
- |
get-login-params |
获取websocket登录鉴权的参数,方法需返回一个对象,内容是{token:'aaaaaasdasd'}或者{name:'username',key:'3k4h5k2j3h52j34'},对象里面字段的含义请参照wcs api文档,必传 |
Function |
- |
- |
play-type |
播放视频方式. preview(直播预览);record(录像) |
string |
preview / record |
preview |
init-stream-type |
初始化播放视频的格式,如果设置enable-auto-change-stream 为true,组件会根据流类型自动修改播放格式(仅限于H264和H265之间转换) |
string |
H264 / H265 / HTTP_FLV / WEBSOCKET_FLV |
H264 |
default-video-quality |
默认视频清晰度. 0(高清);1(标清);2(流畅) |
number |
0 / 1 / 2 |
1 |
default-enable-a-i |
开启智能识别开关 |
boolean |
- |
false |
default-enable-p-t-z |
播放器内云台控制开关 |
boolean |
- |
false |
show-loading |
是否显示loading动画和文字 |
boolean |
- |
true |
show-error-message |
是否显示错误信息 |
boolean |
- |
true |
enable-auto-change-stream |
开启自动修改流格式,仅限于H264和H265之间转换 |
boolean |
- |
true |
ws-options |
websocket的参数,具体请参照npm库@vanwei-wcs/websocket
|
object |
- |
{maxReconnectionDelay: 5000,minReconnectionDelay: 2000,maxRetries: Infinity,enableHeartbeat: true,debug: false} |
options |
播放参数,详细参见下方 options解释 |
object |
- |
- |
showHeader |
是否显示播放器上方名称栏 |
boolean |
- |
true |
showFooter |
是否显示播放器下方控制栏 |
boolean |
- |
true |
debug |
播放器debug |
boolean |
- |
false |
options解释
参数 |
说明 |
类型 |
可选值 |
默认值 |
namespace |
操作类请求namespace |
string |
- |
'WCS/main' |
streamNamespace |
流操作namespace |
string |
- |
'WCS/MMS' |
openAudio |
是否开启音频,只对播放方式为H264和flv有效,实验性功能 |
boolean |
- |
false |
objectFit |
视频在video dom的填充方式 对应css的 "object-fit" |
string |
fill / contain |
fill |
flvBaseUrl |
flv播放方式的 根url,只是兼容老的wcs未返回完整flv url的情况,一般不用设置 |
string |
- |
- |
h265DecoderPath |
H265播放方式必传,H265解码器远程文件路径,用于下载服务器上面存放的js文件,例如文件存放在 http://www.example.com/static/javascript/h265/H265Decoder.js,则传入文本为 '/static/javascript/h265/H265Decoder.js' |
string |
- |
- |
playerDebug |
打印播放器日志 |
boolean |
- |
false |
事件 Events
事件名 |
说明 |
参数 |
video-status-change |
视频播放状态改变,具体值参见字典定义里面的VideoStatus
|
status |
video-quality-change |
视频清晰度改变 |
quality |
video-speed-change |
视频播放速度改变 |
speed |
video-error-change |
视频播放错误的回调 |
message |
video-stream-change |
视频播放格式改变 |
streamType |
stream-type-error |
接收到的流格式不符合初始化格式的回调 |
{received,expect} |
video-size-change |
视频宽高大小改变 |
{videoWidth,videoHeight} |
statics-info-change |
视频统计信息改变. speed流量速度(单位Kb/s);fps每秒多少帧 |
{speed,fps} |
stop-video |
调用了closeVideo()后的回调 |
|
方法 Methods
方法 |
说明 |
参数 |
openVideo |
打开直播视频,play-type 需要设置为preview, path必传,例如 openVideo({path:'/aada/wew'}) |
data:{path:string} |
openRecordVideo |
打开录像视频,play-type 需要设置为record,path和recordMessage必传,recordMessage详细解析见下方recordMessage解释 |
data:{path:string},recordMessage:{params:{},ext_info:{}} |
changeQuality |
切换清晰度,具体值参见属性default-video-quality
|
videoQuality |
changePlayStatus |
录像模式下,改变视频的暂停与播放,只能传入播放(2)与暂停(3)状态值 |
status |
changePlaySpeed |
录像模式下,改变视频播放速度,具体值参见字典定义里面的VideoSpeed
|
speed |
cleanVideo |
清空视频,关闭视频流,销毁播放器,重置一些属性,不销毁websocket连接 |
- |
closeVideo |
关闭视频,除了cleanVideo外,还会关闭websocket连接,重置video dom元素 |
|
sendMessage |
发送api请求,参数有message和ctx,详细解释参见下方sendMessage参数解释 |
message,ctx |
capture |
对视频流进行截取,参数中download为true会下载图片,为false或不设置返回图片base64,默认false,此方法返回Promise,失败返回失败信息 |
{download} |
fullscreen |
视频全屏 |
|
setScreenMessage |
设置视频的错误信息,message为string类型 |
message |
recordMessage解释
参数 |
说明 |
类型 |
可选值 |
默认值 |
start_time |
开始时间戳,必传 |
number |
- |
- |
end_time |
结束时间戳,必传 |
number |
- |
- |
speed |
播放速度,0.0625和16可能有些设备不支持 |
number |
具体值参见字典定义里面的VideoSpeed
|
1 |
record_id |
录像片段id,(当streamNamespace为WCS/MMS 必传,其他情况未知) |
number |
string |
- |
不必传,根据api接口自定义
sendMessage参数解释
api接口,msg_id可以设置为0,组件内部有自增数字去设置
执行上下文,具体值有params和cb, params是一个对象,可以放入任何值;cb是一个回调函数,当发送消息时,会添加一个message中msg_id对应ctx的map,当组件内部获取到服务端发来的消息时,如果msg_id的map存在,会执行cb方法(params作为参数),具体使用方法参照下方示例
const message = {namespace:"wcs/main",request:"xxxx"}
const ctx = { params:{ a:'aaa' }, cb:sendMessageCallback }
// const ctx = { params:{ a:'aaa' }, cb:sendMessageCallback.bind(this) } // 有this指向问题使用这种方式
sendMessage(message,ctx)
function sendMessageCallback(res,params){
console.log(res) // api接口返回数据
console.log(params) // { a:'aaa' }
}
字典定义
const VideoStatus = {
vConnect: 0, // 开始连接
vStart: 1, // 开始播放
vPlay: 2, // 正在播放
vPause: 3, // 暂停
vStop: 4 // 停止
}
const VideoSpeed = [0.0625, 0.125, 0.25, 0.5, 1, 2, 4, 8, 16]
<style>
table th:first-of-type {
width: 4cm;
}
table th:nth-of-type(3) {
width: 2cm;
}
table th:nth-of-type(4) {
width: 3cm;
}
table th:nth-of-type(5) {
width: 2cm;
}
</style>