byskplayer.js
不支持IE浏览器,因byskplayer.js
使用了ES6
的特性,推荐使用Chrome浏览器
demo需要部署到web容器中运行, 如: 使用 nginx
部署, 然后使用http(s)在浏览器中访问
在浏览器通过文件协议访问(即直接使用浏览器打开文件)的方式没有经过测试, 可能会有问题
如果 H265
视频使用 webgl
的方式播放:
bsjlib
目录需要部署到网站的根目录下, 因为 bsjlib
目录下的文件是通过绝对路径(如: /bsjlib/Decoder.worker.bee2ba95.js
)访问的
使用 Vue2
/ Vue3
开发需要放到静态资源目录下(如: static
, public
目录 )
vue2
webpack
老项目开发环境需要添加代理 bsjlib
到 static/bsjlib
下
打包需要将 static/bsjlib
拷贝到根目录下
在 network
中, 如果 bsjlib/libbsjdecoder.wasm
文件出现 404
, 请检测 bsjlib
是否放置到项目根目录, 或者检测服务器是否允许访问 wasm
文件, 如: nginx
添加 MIME
类型 application/wasm wasm
byskplayer.js
是已经压缩过的了, 请不要重复打包压缩
需要提前安装 nodejs, 下载地址: https://nodejs.org/en/download/prebuilt-installer
在本地新建目录 player-demo
, 然后下载 demo 到本地, 目录可以任意命名
将下载的 demo 解压到 player-demo
目录
在 player-demo
的位置打开命令行(cmd)
在命令行中执行 npx http-server -p 4409
, 端口可设置
在浏览器中通过 http://localhost:4409/demo.html 快速访问 demo
使用其他
http服务器软件
也可实现上述的效果, 比如:nginx
,iis
等, 请根据需要选择自己熟悉的方式
下载直接引入:
<script src='./byskplayer.js'></script>
import byskplayer from './byskplayer.js'
使用
Vue2
/Vue3
开发需要放到静态资源目录下(如:static
,public
目录 )
vue2
webpack
老项目需要添加代理
xxxxxxxxxx
// 在 `config/index.js` 配置代理
// dev 开发环境通过代理 `/bsjlib` 访问 `static/bsjlib`
proxyTable: {
'/bsjlib': {
target: `http://localhost:${ process.env.PORT || 8080 }`,
pathRewrite: {
'/bsjlib': '/static/bsjlib'
}
}
}
x// 在 `build/webpack.prod.conf.js` 中配置拷贝目录
// 打包 线上生产环境通过将 `static/bsjlib` 目录拷贝到根目录下
// copy bsjlib
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static/bsjlib'),
to: 'bsjlib',
ignore: ['.*']
}])
// 或者收到将 bsjlib 目录拷贝的网站的根目录
通过 import 的方式引入, 需要保证 byskplayer.js 不会被压缩打包
如果遇到相关问题, 可以尝试通过配置 babel-loader 的 exclude 属性, 将 byskplayer.js 排除
byskplayer.js
通过在window
对象上公开byskplayer
类导出所有接口
构造函数:
实例属性:
实例方法:
xxxxxxxxxx
let player = new byskplayer(config): byskplayer;
根据config
创建byskplayer
实例
注意: 请先确认 container 元素已经渲染出来后, 再实例化 player
config
Field | Type | Description |
---|---|---|
id | string | 视频播放器容器元素Id, 先保证已经渲染完成 |
isReal | boolean | 指定是否是实时播放 |
isRecord | boolean | 指定是否是回放视频 |
userId | string | 用户Id |
userkey | string | 应用key(客户代码) |
userLevel | number | 用户级别,默认1,(开放平台无效) |
baseURL | string | 视频服务的WebSocket 地址 |
isSwitchCodetypeOnFullscreen? | boolean | 可选,视频全屏是否高标清切换,默认:false |
click? | function | 可选,视频播放器点击回调,参见 click |
playstart? | function | 可选,视频开始播放回调,参见 playstart |
playend? | function | 可选,视频结束播放回调,参见 playend |
click
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
playstart
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
playend
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
status
状态定义说明
xxxxxxxxxx
* 0: 请求失败;
* 1: 请求成功
* -1: 设备备没有响应,网关返回设备响应超时
* -2: 设备不在线
* -3: 设备录像查询,当前有用户在查
* -4: 设备回放有其他高级级别用户再看
* -6: 设备欠压
* -7: 设备休眠
* -8: 设备唤醒中
* -101: WebSocket未连接
* -102: 请求超时
xxxxxxxxxx
let version = player.version
获取byskplayer.js
版本(只读)
xxxxxxxxxx
player.poster = 'https://www.exmaple.com/static/images/video_poster.png';
设置视频播放器预览图片(只写)
xxxxxxxxxx
player.autoCloseTime = 15;
设置自动关闭视频时间(分钟),从给autoCloseTime
赋值开始计时,为0
则不自动关闭视频(只写)
xxxxxxxxxx
let real = player.real;
通过player.real
控制实时视频播放,参见player.real.open
和player.real.close
方法
xxxxxxxxxx
let record = player.record;
通过player.record
控制回放视频播放,参见player.record.query
,player.record.open
和player.record.close
方法
xxxxxxxxxx
player.destroy();
通过调用该方法销毁播放器,销毁后将不能再使用其它功能
xxxxxxxxxx
player.setPlayerNum(num);
Parameter | Type | Description |
---|---|---|
num | number | 期望显示播放画面数,最小值:1 ,最大值:16 |
切换视频播放器显示的画面数,支持同时显示1
至16
个画面
xxxxxxxxxx
player.allocate(num, start = 0);
Parameter | Type | Description |
---|---|---|
num | number | 期望申请播放视频数量:[1, 2, 4, 6, 8, 9, 12, 13, 16] |
start? | number | 可选,申请播放器开始位置,默认为:0 ,最大位置:15 |
申请需要播放视频的播放器Id,支持同时申请1
至16
个播放器
返回对象:
Field | Type | Description |
---|---|---|
flag | boolean | 申请成功标志,0 :失败,1 :成功 |
msg | string | 提示信息 |
ids? | array | 申请播放器元素Id数组,申请失败则不返回 |
请求播放实时视频
xxxxxxxxxx
player.real.open(tid, params, cb);
Parameter | Type | Description |
---|---|---|
tid | string | 视频播放器Id,通过player.allocate 申请到的 |
params | object | 播放参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,GB-1078;2 :GA系列 |
SpecialSign | number | 特殊协议,0 :不处理;1 :粤标 |
codeTypeCtrlBtnEnabled | boolean | 是否现在高标清切换按钮(GF才能使用) |
playerType | number | 0 : video (默认), 1 : webgl |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
cb
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
status | number | 请求响应状态,0 :失败,1 :成功,-2 :设备不在线 |
info | string | 响应信息 |
停止播放实时视频
xxxxxxxxxx
player.real.close(tid, params, cb);
Parameter | Type | Description |
---|---|---|
tid | string | 视频播放器Id,通过player.allocate 申请到的 |
params | object | 播放参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,GB-1078;2 :GA系列 |
cb
Field | Type | Description |
---|---|---|
status | number | 请求响应状态,0 :失败,1 :成功 |
info | string | 响应信息 |
打开对讲
xxxxxxxxxx
player.real.openSpeak(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
SpecialSign | number | 特殊协议,0 :不处理;1 :粤标 |
cb
Field | Type | Description |
---|---|---|
status | number | 请求响应状态,0 :失败,1 :成功,-2 :设备不在线 |
info | string | 响应信息 |
关闭对讲
xxxxxxxxxx
player.real.closeSpeak(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
cb
Field | Type | Description |
---|---|---|
status | number | 请求响应状态,0 :失败,1 :成功 |
info | string | 响应信息 |
查询回放录像视频记录
xxxxxxxxxx
player.record.query(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 播放参数,参见 params |
cb | function | 请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,GB-1078;2 :GA系列 |
begintime | number | 查询开始时间(时间戳精确至秒) |
endtime | number | 查询结束时间(时间戳精确至秒) |
alarmSign | number | 报警类型,目前指定为0 |
cb
Field | Type | Description |
---|---|---|
channel | number | 通道号 |
status | number | 请求播放状态,0 :失败,1 :成功 |
info | string | 响应信息 |
records | number | 查询到视频记录总数 |
recordfiles | array | 查询到的视频记录, 参见 recordfile |
recordfile
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
begintime | number | 视频录像开始时间(时间戳精确至毫秒) |
endtime | number | 视频录像结束时间(时间戳精确至毫秒) |
filesize | number | 录像大小(字节) |
alarmSign | number | 报警类型,目前指定为0 |
fileName | number | 视频文件名称(GA系列有效 播放视频时需要指定 ) |
请求播放回放视频
xxxxxxxxxx
player.record.open(ret.ids[0], params, cb, mds);
Parameter | Type | Description |
---|---|---|
tid | string | 视频播放器Id,通过player.allocate 申请到的 |
params | object | 播放参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
mds | object | GB-0178 必填,其他可选,参见 mds |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,GB-1078;2 :GA系列 |
SpecialSign | number | 特殊协议,0 :不处理;1 :粤标 |
playerType | number | 0 : video (默认), 1 : webgl |
begintime | number | 视频录像开始时间(时间戳精确至秒) |
endtime | number | 视频录像结束时间(时间戳精确至秒) |
fileName | string | 视频文件名称( GA系列有效 ) |
datatype? | number | GB-1078 必填0 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
cb
Field | Type | Description |
---|---|---|
tid | number | 播放器Id |
device | number | 终端号 |
channel | number | 通道号 |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
status | number | 请求播放状态,0 :失败,1 :成功,-2 :设备不在线 |
info | string | 响应信息 |
mds
Field | Type | Description |
---|---|---|
hasAudio | boolean | GB-1078 需音视频分离必填false ;其他不填 |
停止播放回放视频
xxxxxxxxxx
player.record.close(tid, params, cb);
Parameter | Type | Description |
---|---|---|
tid | string | 视频播放器Id,通过player.allocate 申请到的 |
params | object | 播放参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
cb
Field | Type | Description |
---|---|---|
status | number | 状态,0 :失败,1 :成功 |
info | string | 响应信息 |
暂停播放视频
xxxxxxxxxx
player.record.pause(params);
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
暂停后继续播放视频
xxxxxxxxxx
player.record.play(params);
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
设备通过FTP下载到服务器(GF-1078设备)
xxxxxxxxxx
player.ftp.downloadToServer(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
begintime | number | 开始时间(时间戳精确至秒,>=file.begintime ) |
endtime | number | 结束时间(时间戳精确至秒,<=file.endtime ) |
alarmSign | number | 通过player.record.query 查询得到 |
cb
Field | Type | Description |
---|---|---|
status | number | 状态,0 :失败,1 :成功 |
info | string | 响应信息 |
serial | string | 设备返回流水号,用于ftp上传控制 |
取消设备FTP下载到服务器
xxxxxxxxxx
player.ftp.cancel(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
serial | string | 通过player.ftp.downloadToServer 查询得到 |
cb
Field | Type | Description |
---|---|---|
status | number | 状态,0 :失败,1 :成功 |
info | string | 响应信息 |
gt下载到本体
xxxxxxxxxx
player.ftp.downloadFile(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 播放参数,参见 params |
cb | function | 可选,下载回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078(固定为1) |
SpecialSign | number | 特殊协议,0 :不处理;1 :粤标 |
begintime | number | 视频录像开始时间(时间戳精确至秒) |
endtime | number | 视频录像结束时间(时间戳精确至秒) |
fileName | string | 视频文件名称( GA系列有效 ) |
plate? | string | 可选,车牌号 |
vehicleId? | number | 可选,车辆Id |
groupId? | number | 可选,车辆所属车组Id |
cb
Field | Type | Description |
---|---|---|
tid | number | 播放器Id |
media_address | object | 下载地址 |
status | number | 请求播放状态,0 :失败,1 :成功,-2 :设备不在线 |
info | string | 响应信息 |
通过浏览器设备直接下载到本地(GA设备)
xxxxxxxxxx
player.gaDownload.downloadFile(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
protocolType | number | 协议类型,1 :GF-1078,2 :GA系列 |
begintime | number | 开始时间(时间戳精确至秒,>=file.begintime ) |
endtime | number | 结束时间(时间戳精确至秒,<=file.endtime ) |
fileName | number | 通过player.record.query 查询得到 |
filesize | number | (endtime-begintime)/(file.endtime-file.begintime)*file.filesize |
cb
Field | Type | Description |
---|---|---|
status | number | 状态,0 :失败,1 :成功 |
info | string | 响应信息 |
serial | string | 设备返回流水号,用于ftp上传控制 |
取消下载到本地
xxxxxxxxxx
player.gaDownload.cancel(params, cb);
Parameter | Type | Description |
---|---|---|
params | object | 参数,参见 params |
cb | function | 可选,请求视频播放回调,参见 cb |
params
Field | Type | Description |
---|---|---|
device | number | 终端号 |
channel | number | 通道号 |
cb
Field | Type | Description |
---|---|---|
status | number | 状态,0 :失败,1 :成功 |
info | string | 响应信息 |
media_address | object | 下载地址media_address.video_address |