@vanwei-wcs/base-video

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]

<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>