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

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