0.4.4 • Published 1 year ago
@vanwei-wcs/base-video v0.4.4
wcs-base-video
🚀 wcs 视频基础组件 🌈. (含有自动重连功能)
安装
npm i @vanwei-wcs/base-video
使用
import wcsBaseVideo from ' @vanwei-wcs/base-video'
this.$refs.video.openVideo({path:'/adasd/adad/ada/0'})
// template里面代码
<wcsBaseVideo
ref="video"
></wcsBaseVideo>
组件api
属性 Attributes
组件的props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
show-loading | 是否显示loading动画和文字 | boolean | - | true |
show-error-message | 是否显示错误信息 | boolean | - | true |
enable-auto-change-stream | 开启自动修改流格式,仅限于H264和H265之间转换 | boolean | - | true |
enable-ai | 开启智能识别(人脸检测和人体骨骼,需要设备支持) | boolean | - | false |
websocket-url | websocket连接地址,必传 | string | - | - |
get-login-params | 获取websocket登录鉴权的参数,方法需返回一个对象,内容是{token:'aaaaaasdasd'}或者{name:'username',key:'3k4h5k2j3h52j34'},对象里面字段的含义请参照wcs api文档,必传 | Function | - | - |
ws-options | websocket的参数,具体请参照npm库@vanwei-wcs/websocket | object | - | {maxReconnectionDelay: 5000,minReconnectionDelay: 2000,maxRetries: Infinity,enableHeartbeat: true,debug: false} |
options | 播放参数,详细参见下方 options解释 | object | - | - |
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} |
方法 Methods
方法 | 说明 | 参数 |
---|---|---|
openVideo | 打开直播视频,play-type 需要设置为preview, path必传,例如 openVideo({path:'/aada/wew'}) | data:{path:string} |
openRecord | 打开录像视频,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 |
isWCSWorking | websocket是否是打开状态,返回布尔值 | - |
capture | 对视频流进行截取,参数中download为true会下载图片,为false或不设置返回图片base64,默认false,此方法返回Promise,失败返回失败信息 | {download} |
recordMessage解释
- params
参数 | 说明 | 类型 | 可选值 | 默认值 | |
---|---|---|---|---|---|
start_time | 开始时间戳,必传 | number | - | - | |
end_time | 结束时间戳,必传 | number | - | - | |
speed | 播放速度,0.0625和16可能有些设备不支持 | number | 具体值参见字典定义里面的VideoSpeed | 1 | |
record_id | 录像片段id,(当streamNamespace为WCS/MMS 必传,其他情况未知) | number | string | - | - |
- ext_info
不必传,根据api接口自定义
sendMessage参数解释
- message
api接口,msg_id可以设置为0,组件内部有自增数字去设置
- ctx
执行上下文,具体值有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]