使用文档
Web Player SDK 使用说明
1. 功能特性说明
1.1 简述
本文档主要对Web Player SDK 使用说明，具体的使用可以参照demo
1.1.1 环境配置
下载SDK并解压缩
cloudsee_js_demo Demo应用
cloudsee_js_sdk SDK
1.2 支持的格式
1.2.1 音频编码格式
支持G711音频解码
1.2.2 视频编码格式
支持H.264（AVC）
支持H.265（HEVC）
1.3 浏览器兼容性
支持Chrome（85及以上）
支持火狐浏览器（82.0.3及以上）
1.4 支持的设备
中维协议3.0（原公有云协议）设备（中维世纪私协设备）
国标28181协议设备
1.5 音频控制
音频控制：支持
1.6 视频下载
支持
2 api接口及参数说明
2.1 直播
2.1.1 引入sdk
// 将cloudsee_js_sdk文件夹下的文件全部引入到项目中，在个人页面中引入如下js文件
<script src="player.js"></script>
注意：SDK文件必须放到WEB服务器的root根目录下，即与index.html放在同级目录，或者在调用play方法时传入路径prefixPath参数
2.1.2 初始化
let Player = jPlayer.default; //获取
this.player = new Player(el,option); //实例化
// el 为视频容器dom元素 必填
// option 配置项可以配置自定义的loading状态以及断开的状态提示 非必填 请参照demo使用
// 由此衍生的一个提示方法 this.player.showMsg（type, msg） 其中type是一个枚举值，会自带一个“linkfail”;msg：为提示字符串；
// 其他的定义可以根据loading组件的配置而来 请参照demo
2.1.3 播放
this.player.play(
{
url:"ws://*******************", //播放地址
endtime: null, //回放结束时间，直播为null
isStream: true， // true：直播 false:回放
deviceName: '设备名称', // 非必填 用在错误提示显示上
prefixPath：'/', //非必填 sdk等文件相对根目录的位置 默认"/"
}
)
2.1.4 停止
this.player.stop() // 直播的暂停即停止，停止播放和推流
2.1.5 全屏
this.player.fullscreen(); // 视频画面的全屏
2.1.6 截图
this.player.snapshot();
// 内部有默认实现的snapshot方法 返回的结果是以图片的下载方式保存
// 针对想要获取快照的数据流的 需要自定义重写该方法 方法会暴露一个blob参数
this.player.onSnapshot = onSnapshot (blob) {
let imgFormat = {
bmp: 'image/bmp',
jpeg: 'image/jpeg',
png: 'image/png'
}
const blob2 = new Blob([blob], { type: imgFormat['png'] });
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(blob2);
a.href = url;
a.download = `${this.channelName} ${dayjs(new Date()).format('YYYY年MM月DD日HH时mm分ss秒')}.png`;
a.click();
window.URL.revokeObjectURL(url)
a.remove();
},
2.1.7 获取播放器当前状态
this.player.getState() // 0:空闲 1：播放 2：暂停
2.1.8 开始对讲
this.player.talk(对讲的url) //开始对讲
2.1.9 停止对讲
this.player.talkDestroy() //停止对讲
2.1.10 设置音量
this.player.volume(vol);// vol number 0 ~ 1数字
2.2 回放
2.2.1 引入sdk
<script src="player.js"></script>
// 在js文件中引入录播进度条 JtimeLine
// 提示 JtimeLine.js 不是websdk内部文件，可在demo/src/js文件夹下找到；
// 时间进度条可自己实现，无需引入JtimeLine.js
import JTimeLine from "./js/JtimeLine";
2.2.2 初始化
2.2.2.1 播放器初始化
let Player = jPlayer.default; //获取
this.player = new Player(); //实例化 参照直播
2.2.2.2 回放进度条初始化
//提示 JtimeLine.js 不是websdk内部文件，可在demo/src/js文件夹下找到；
// 时间进度条可自己实现，无需引入JtimeLine.js
this.jTimeLine = new JTimeLine();
this.jTimeLine.init({
id: "canvas",
onChange: this.handleTimeChange //滑动播放进度条时触发并返回滑动当前位置的时间戳
});
2.2.3 播放
录播的视频播放需要播放URL
this.player.play(
{
url:"ws://*******************", //播放地址
endtime: new Date('2020-11-30 12:00:00'), //回放结束时间，回放到该时间时会有事件触发，直播为null
isStream: false， // true：直播 false:回放
deviceName: '设备名称'， // 非必填 用在错误提示显示上
prefixPath：'/', //非必填 sdk等文件相对根目录的位置 默认"/"
}
);
//录播时间进度条处理
//录播时间进度条处理需要播放列表（lsit）
this.jTimeLine.getRecord(lsit); // 回放返回的播放list
this.jTimeLine.run({ time: parseInt(this.player.getCurTimestamp())}); //进度条滚动 this.player.getCurTimestamp() 获取播放当前帧的时间戳
2.2.4 暂停
this.player.pause() // 回放暂停
2.2.5 恢复
this.player.resume() //回放恢复
2.2.6 seek播放
this.player.seekTo(Time) // Time 时间戳
2.2.7 全屏
this.player.fullscreen();
2.2.8 停止
this.player.stop()
2.2.9 倍速
this.player.setSpeed(string); //支持 字符串：‘1’ ‘2’ ‘4’ ‘8’
2.2.10 截图
this.player.snapshot();
2.2.11 获取播放器当前状态
this.player.getState() // 0:空闲 1：播放 2：暂停
2.2.12 获取播放器播放当前帧的时间戳
this.player.getCurTimestamp() //获取播放当前帧的时间戳
2.2.13 停止录像
this.player.recoderPause() //停止录像 停止录像时，会将录像自动下载下来
2.2.14 开始录像
this.player.recoderStart() //开始录像
3 事件
3.1 获取设备回放列表
/**
* 事件名 ：GET_DEVICE_RECORD_LIST
* 描述：仅当播放设备为中维协议3.0（原公有云协议）设备 录像为设备录像时 录像ws://** 长链接返回视频列表
* 例：
* */
this.player.event.on('DEVICE_RECORD_LIST',list)=>{
//todo...
})
3.2 媒体进度信息
/**
* 事件名 ：GET_MEDIA_PROGRESS_INFO
* 描述 ： 媒体进度信息 可用来做播放时间进度的事件
* 例：
* */
this.player.event.on('GET_MEDIA_PROGRESS_INFO',msg)=>{
//todo...
})
3.3 媒体信息
/**
* 事件名 GET_MEDIA_INFO
* 描述：媒体信息 包含视频帧信息和音频帧信息
* 例：
* */
this.player.event.on('GET_MEDIA_INFO',msg)=>{
//todo...
})
3.4 视频播放
/**
* 事件名 GET_MEDIA_PLAY
* 描述 ： 视频播放
* 例：
* */
this.player.event.on('GET_MEDIA_PLAY',（)=>{
//todo...
})
3.5 视频暂停
/**
* 事件名 GET_MEDIA_PAUSE
* 描述：视频暂停
* 例：
* */
this.player.event.on('GET_MEDIA_PAUSE',（)=>{
//todo...
})
3.6 视频停止
/**
* 事件名 GET_MEDIA_STOP
* 描述：视频停止
* 例：
* */
this.player.event.on('GET_MEDIA_STOP',（）=>{
//todo...
})
3.7 当前倍速
/**
* 事件名 speedNum
* 描述：倍速设置触发
* 例：
* */
this.player.event.on('speedNum',msg=>{
//todo...
})
3.8 直播和回放设备链接异常监听
/**
* 事件名 decoderError
* 描述 ： 链接异常 包括解码器解码异常和websocket链接异常断开
* 解码器异常显示 链接异常（code16） code16:
*
* { code16:0x04, msg:"服务器未知错误"},
{ code16:0x05, msg:"服务器未准备好"},
{code16:0x06, msg:"服务器端用户主动断开"},
{ code16:0x07, msg:"服务器服务已停止"},
{ code16:0x08, msg:"服务器服务已中断"},
{ code16:0x09, msg:"服务器流停止"},
{ code16:0x0A, msg:"连接设备失败"},
{ code16:0x0B, msg:"订阅设备流失败"},
{ code16:0x0C, msg:"不合法的上下文"},
{ code16:0x0D, msg:"设备超时"},
{ code16:0x0E, msg:"客户端超时"},
{ code16:0x0F, msg:"超过设备最大连接数"},
{ code16:0x10, msg:"无权限"},
{ code16:0x11, msg:"数据超时"},
{ code16:0x12, msg:"服务器端设备主动断开"},
websocket链接异常断开 链接异常（code） code:
参照MDN https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent
* 例：
* */
this.player.event.on('decoderError',d)=>{
//todo...
// 取d.s的值和上面的code16的值做判断 code16为16进制请换算为10进制比较
})
3.9 对讲的连接异常监听
/**
* 事件名 CLIENT_TALK_ERROR_ONE
* 描述：链接异常 包括解码器解码异常和websocket链接异常断开
* 解码器异常显示 链接异常（code16） code16:
*
* { code16:0x04, msg:"服务器未知错误"},
{ code16:0x05, msg:"服务器未准备好"},
{code16:0x06, msg:"服务器端用户主动断开"},
{ code16:0x07, msg:"服务器服务已停止"},
{ code16:0x08, msg:"服务器服务已中断"},
{ code16:0x09, msg:"服务器流停止"},
{ code16:0x0A, msg:"连接设备失败"},
{ code16:0x0B, msg:"订阅设备流失败"},
{ code16:0x0C, msg:"不合法的上下文"},
{ code16:0x0D, msg:"设备超时"},
{ code16:0x0E, msg:"客户端超时"},
{ code16:0x0F, msg:"超过设备最大连接数"},
{ code16:0x10, msg:"无权限"},
{ code16:0x11, msg:"数据超时"},
{ code16:0x12, msg:"服务器端设备主动断开"},
websocket链接异常断开 链接异常（code） code:
参照MDN https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent
* 例：
* */
this.player.event.on('CLIENT_TALK_ERROR_ONE',(d) => {
//todo...
// 取d.s的值和上面的code16的值做判断 code16为16进制请换算为10进制比较
})
3.10 网络连接异常监听
/**
* 事件名 CLIENT_LINK_ERROR_ONE
* 描述：和服务的ws/wss连接失败
* 例：
* */
this.player.event.on('CLIENT_LINK_ERROR_ONE',（)=>{
//todo...
})
3.11 连接成功但心跳没有响应监听
/**
* 事件名 CLIENT_LINK_ERROR_THREE
* 描述：视频加载失败，请检查设备或网络配置 为websocket发送3次心跳 无响应
* 例：
* */
this.player.event.on('CLIENT_LINK_ERROR_THREE',（）=>{
//todo...
})
3.12 视频下载超过100M自动保存文件事件
/**
* 事件名 GET_VIDEO_MAX_END
* 描述：视频下载超过100M自动保存文件事件
* 例：
* */
this.player.event.on('GET_VIDEO_MAX_END')=>{
//todo...
})
3.13 回放时播放结束的事件
// 注意：此事件在回放时传入了endtime才生效
this.player.event.on('MEDIA_PROGRESS_INFO_STOP', (s) => {
// 回放播放结束 s
})
3.14 开启对讲时获取麦克风权限失败的事件监听
this.player.event.on('getUserMediaError', () => {
// todo...
})
4 录像回放下载
4.1初始化
// 基于上面sdk的引入 获取下载的实例对象
let DownloadHandle = jPlayer.DownloadHandle;//获取
let downloadhandle = new DownloadHandle();
4.2开始下载
//url 必填 下载的url
//endTime 必填 要下载的录像结束时间 时间格式为new Date(endTime)对象可接受的格式
//recordType 必填 下载录像的类型 可选值：'device'表示设备端录像，'cloud'表示云端录像
//prefixPath 非必填 sdk等文件相对根目录的位置 默认"/"
await downloadhandle.startDownload({
url:'下载的url', endTime:"2023-05-13 00:00:00",recordType:'device', i:'', k:'', t:'', prefixPath:'/websdk/'
})
4.3停止下载
// 触发停止下载会结束此次下载
// isForceDiscard 可选值：0 表示停止下载，保存已下载的视频、1 表示停止下载，丢弃已下载的视频 默认值0
downloadhandle.stopDownload(isForceDiscard).then(()=>{
console.log("停止下载成功");
});
4.4监听下载的数据
// 每次下载都会返回所下载的数据 data.d就是下载下来的arraybuffer的数组
// 说明：下载的单个数据有大小限制，正常大概100M左右就会保存一下文件 然后继续下载直到下载结束
downloadhandle.on('downloadData',(data)=>{
console.log('下载的数据',data.d)
if( Array.isArray(data.d)&data.d.length>0){
let buffers = data.d.map((item) => item.buffer);
const fullBlob = new Blob(buffers, { type: "video/mp4" });
const link = document.createElement("a");
const downloadUrl = window.URL.createObjectURL(fullBlob);
link.href = downloadUrl;
link.download = "录像" + new Date().getTime() + ".mp4";
link.click();
window.URL.revokeObjectURL(downloadUrl);
}
})
4.5监听下载回放视频时间进度
对recordType为device 设备端录像时有效
downloadhandle.on('DOWNLOAD_PROGRESS_INFO',(data)=>{
console.log('时间',data)
})
4.6监听下载结束
// 本次下载结束
downloadhandle.on('stopDownload',()=>{
console.log("下载结束")
})
4.7监听下载异常
downloadhandle.on('serverDecoderError',()=>{
this.$message.error("下载异常")
})
4.8监听ws服务异常
downloadhandle.on('socketNoActive',()=>{
this.$message.error("socket长时间没有响应")
})