同步操作将从 Gitee 极速下载/jessibuca 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
options 支持的参数有:
DOM
or string
播放器容器。
若为 string ,则底层调用的是 document.querySelector(container)
源码
let $container = options.container;
if (typeof options.container === 'string') {
$container = document.querySelector(options.container);
}
if (!$container) {
throw new Error('Jessibuca need container option');
return;
}
number
1
string
decoder.js
worker地址
默认引用的是根目录下面的decoder.js文件 ,decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。
boolean
是否不使用离屏模式(提升渲染能力)
该特性是实验性特性,某些版本的浏览器会出现内存无缘无故变大的情况。谨慎使用。
boolean
见
是否开启当页面的'visibilityState'变为'hidden'的时候,自动暂停播放。
boolean
是否有音频,如果设置false
,则不对音频数据解码,提升性能。
number
设置旋转角度,只支持,0(默认) ,180,270 三个值。
boolean
true
true
的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 setScaleMode(1)
false
的时候:视频画面完全填充canvas区域,画面会被拉伸。等同于 setScaleMode(0)
video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个属性。
boolean
false
true
的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 setScaleMode(2)
video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个属性。
boolean
false
true
的时候:ws协议不检验是否以.flv为依据,进行协议解析。boolean
false
number
10
number
5
boolean
false
heartTimeout 心跳超时之后自动再播放,不再抛出异常,而直接重新播放视频地址。
number
3
heartTimeoutReplay 重试失败之后,不再重新播放视频地址。
如果想无限次重试,可以设置为-1
number
10
boolean
true
loadingTimeout 心跳超时之后自动再播放,不再抛出异常,而直接重新播放视频地址。
number
3
loadingTimeoutReplay 重试失败之后,不再重新播放视频地址。
如果想无限次重试,可以设置为-1
boolean
false
点击底部的 controls UI条(里面元素)不会触发全屏事件。
boolean
false
object
{ fullscreen:false, screenshot: false, play: false, audio: false, record:false }
boolean
false
PC端不会生效,仅手机端生效
boolean
false
必须通过按钮或者点击事件触发play() 方法,才会播放出声音来,不然还是静音的。 浏览器不允许自动播放的视频自动播放声音。
string
string
boolean
false
视频编码只支持H.264视频(Safari on iOS不支持)
不支持 forceNoOffscreen 为 false (开启离屏渲染)
优先级高于useWCS:true
boolean
false
视频编码只支持H.264视频 (需在chrome 94版本以上,需要https或者localhost环境)
支持 forceNoOffscreen 为 false (开启离屏渲染)
如果同时设置了useMSE:true, 则优先使用useMSE
boolean
false
forceNoOffscreen 设置为false之后(通过OffscreenCanvas渲染之),wcsUseVideoRender不会生效。
webcodecs硬解码之后,默认是通过canvas 渲染出来的,可以通过配置通过video标签渲染,提升渲染性能。
boolean
true
设置为false 则直接关闭播放,抛出Error 异常,设置为true 则会自动切换成wasm模式播放。
boolean
false
目前支持的键盘快捷键有:esc -> 退出全屏;arrowUp -> 声音增加;arrowDown -> 声音减少;
boolean
true
wasm解码报错之后,不再抛出异常,而是直接重新播放视频地址。
boolean
false
只有鼠标聚焦到播放器内部才会显示,移除之后,会消失。
string
webm
支持
webm
,mp4
参数
{boolean} flag
// 开启
jessibuca.setDebug(true)
// 关闭
jessibuca.setDebug(false)
jessibuca.mute()
jessibuca.cancelMute()
iPhone,chrome等要求自动播放时,音频必须静音,需要由一个真实的用户交互操作来恢复,不能使用代码。
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
{number} time
设置超时时长, 单位秒 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
jessibuca.setTimeout(10)
jessibuca.on('timeout', function () {
//
});
参数:
{number} mode
用法:
0
视频画面完全填充canvas区域,画面会被拉伸 等同于参数 isResize
为false1
视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 isResize
为true2
视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 isFullResize
为truevideo标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个方法。
jessibuca.setScaleMode(0)
jessibuca.setScaleMode(1)
jessibuca.setScaleMode(2)
{Promise}
jessibuca.pause().then(() => {
console.log('pause success')
jessibuca.play().then(() => {
}).catch((e) => {
})
}).catch((e) => {
console.log('pause error', e);
})
可以在pause 之后,再调用 play()
方法就继续播放之前的流。
jessibuca.close();
jessibuca.destroy()
jessibuca.clearView()
video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个方法。
参数:
{string} url
返回:
{Promise}
用法: 播放视频
jessibuca.play('url').then(() => {
console.log('play success')
}).catch((e) => {
console.log('play error', e)
})
//
jessibuca.play()
参数:
{number} time
用法: 设置最大缓冲时长,单位秒,播放器会自动消除延迟。
等同于 videoBuffer
参数。
// 设置 200ms 缓冲
jessibuca.setBufferTime(0.2)
{number} deg
可用于实现监控画面小窗和全屏效果,由于iOS没有全屏API,此方法可以模拟页面内全屏效果而且多端效果一致。
注意,当旋转90度后,用户也会旋转手机,这时如果手机未锁定方向,画面又可能因为浏览器旋转导致画面又旋转了。可以监听页面旋转事件,将角度又旋转回0
jessibuca.setRotate(0)
jessibuca.setRotate(90)
jessibuca.setRotate(180)
jessibuca.setRotate(270)
参数:
{number} volume
用法:
区别于 mute 和 cancelMute 方法,虽然设置setVolume(0) 也能达到 mute方法,但是mute 方法是不调用底层播放音频的,能提高性能。而setVolume(0)只是把声音设置为0 ,以达到效果。
jessibuca.setVolume(0.2)
jessibuca.setVolume(0)
jessibuca.setVolume(1)
boolean
仅为兼容老的2.x语法,3.x版本不需要这个事件。
var result = jessibuca.hasLoaded()
console.log(result) // true
jessibuca.setKeepScreenOn()
参数:
{boolean} flag
用法: 全屏(取消全屏)播放视频
jessibuca.setFullscreen(true)
//
jessibuca.setFullscreen(false)
{string} filename
{string} format
{number} quality
{string} type
截图,调用后弹出下载框保存截图
时间戳
png
0.92
download
jessibuca.screenshot("test", "png", 0.5)
const base64 = jessibuca.screenshot("test", "png", 0.5, 'base64')
const fileBlob = jessibuca.screenshot("test", 'blob')
参数:
{string} filename
{string} fileType
用法: 开始录制。
jessibuca.startRecord('xxx', 'webm')
jessibuca.stopRecordAndSave()
boolean
var result = jessibuca.isPlaying()
console.log(result) // true
boolean
var result = jessibuca.isMute()
console.log(result) // true
boolean
var result = jessibuca.isRecording()
console.log(result) // true
{string} event
{function} callback
jessibuca.on("load", function () {
console.log('load')
})
监听 jessibuca 初始化事件。
仅为兼容老的2.x语法,3.x版本不需要这个事件。
这个事件需要结合loaded属性一起使用。
3.x版本不需要这个事件。可以直接写play()方法。
jessibuca.on("load", function () {
console.log('load')
})
推荐写法
if(jessibuca.loaded){
console.log('load')
}
else {
jessibuca.on("load", function () {
console.log('load')
})
}
当前视频帧pts,单位毫秒ms
jessibuca.on('timeUpdate', function (ts) {
console.log('timeUpdate', ts);
})
当解析出视频信息时回调,2个回调参数
jessibuca.on("videoInfo", function (data) {
console.log('width:', data.width, 'height:', data.width)
})
当解析出音频信息时回调,2个回调参数
jessibuca.on("audioInfo", function (data) {
console.log('numOfChannels:', data.numOfChannels, 'sampleRate', data.sampleRate)
})
信息,包含错误信息
jessibuca.on("log", function (data) {
console.log('data:', data)
})
错误信息
目前已有的错误信息:
jessibuca.on("error", function (error) {
if (error === jessibuca.ERROR.fetchError) {
//
} else if (error === jessibuca.ERROR.webcodecsH265NotSupport) {
//
}
console.log('error:', error)
})
当前网速, 单位KB 每秒1次,
jessibuca.on("kBps", function (data) {
console.log('kBps:', data)
})
渲染开始
如果需要在start 之后调用截图方法,需要写一个延迟方法去执行。因为代码中无法感应到画面被渲染出来了。
jessibuca.on("start", function () {
console.log('start render')
// 如果有截图需求。需要延迟一下,因为代码中无法感应到画面被渲染出来了。
// 1s 之后截图
setTimeout(function () {
jessibuca.screenshot('xxx')
}, 1 * 1000)
})
当设定的超时时间内无数据返回,则回调
jessibuca.on("timeout", function (error) {
console.log('timeout:', error)
})
当play()的时候,如果没有数据返回,则回调
jessibuca.on("loadingTimeout", function () {
console.log('timeout')
})
当播放过程中,如果超过timeout之后没有数据渲染,则抛出异常。
jessibuca.on("delayTimeout", function () {
console.log('timeout')
})
当前是否全屏
jessibuca.on("fullscreen", function (flag) {
console.log('is fullscreen', flag)
})
触发播放事件
jessibuca.on("play", function (flag) {
console.log('play')
})
触发暂停事件
jessibuca.on("pause", function (flag) {
console.log('pause')
})
触发声音事件,返回boolean值
jessibuca.on("mute", function (flag) {
console.log('is mute', flag)
})
流状态统计,流开始播放后回调,每秒1次。
jessibuca.on("stats", function (s) {
console.log("stats is", s)
})
渲染性能统计,流开始播放后回调,每秒1次。
jessibuca.on("performance", function (performance) {
console.log("performance is", performance)
})
录制开始的事件
jessibuca.on("recordStart", function () {
console.log("record start")
})
录制结束的事件
jessibuca.on("recordEnd", function () {
console.log("record end")
})
录制的时候,返回的录制时长,1s一次
jessibuca.on("recordingTimestamp", function (timestamp) {
console.log("recordingTimestamp is", timestamp)
})
监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
jessibuca.on("playToRenderTimes", function (times) {
console.log("playToRenderTimes is", times)
})
数据结构如下。
{
playInitStart: '', //1
playStart: '', // 2
streamStart: '', //3
streamResponse: '', // 4
demuxStart: '', // 5
decodeStart: '', // 6
videoStart: '', // 7
playTimestamp: '',// playStart- playInitStart
streamTimestamp: '',// streamStart - playStart
streamResponseTimestamp: '',// streamResponse - streamStart
demuxTimestamp: '', // demuxStart - streamResponse
decodeTimestamp: '', // decodeStart - demuxStart
videoTimestamp: '',// videoStart - decodeStart
allTimestamp: '' // videoStart - playInitStart
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。