API

开源版 Jessibuca API。写代码请优先看下面的 Agent 编程手册；完整字段说明在手册之后。

Agent 专用 Markdown：/jessibuca-api.md
TypeScript 类型：/jessibuca.d.ts
站点索引：/llms.txt

这是开源版 API。不要在开源集成里使用 JessibucaPro / decoder-pro.js。Pro 文档请联系作者（wx:bosswancheng）。

Agent 编程手册

给 Agent / LLM 生成可运行代码用。按表格和示例写即可；细节展开见后文「Jessibuca(options) / 方法 / 事件」。

这是什么

浏览器端 H5 直播播放器。全局构造函数 window.Jessibuca。开源版协议：ws-raw、ws-flv、http(s)-flv。编码：H.264 / H.265（wasm）；MSE / WebCodecs 硬解仅 H.264。

生成代码时必须遵守

先确认 typeof window.Jessibuca === 'function'，再 new Jessibuca(options)。
container 必填。字符串走 document.querySelector。不要传入 <canvas> / <video>。不要给容器做 CSS transform / 旋转 / 缩放。
decoder.js 与 decoder.wasm 必须同目录。相对路径相对的是当前页面 URL。
play(url) 返回 Promise，必须 .catch()。释放资源用 await player.destroy()，不要用已废弃的 close()。
默认静音。恢复声音只能在用户点击/触摸里调用 cancelMute() 或 audioResume()。
错误、超时用 Jessibuca.ERROR.*、Jessibuca.TIMEOUT.* 比较，不要猜字符串。
不要编造 Pro 能力（WebRTC / HLS / fmp4 / mpeg-ts / 多线程 / AI / 对讲 / VR）。

最小可运行示例

html

<div id="player-wrap">
  <div id="container" style="width:640px;height:360px;background:#000;"></div>
</div>
<button id="btn-play">播放</button>
<button id="btn-stop">销毁</button>
<script src="/jessibuca.js"></script>
<script>
  const player = new Jessibuca({
    container: '#container',
    decoder: '/decoder.js',
    videoBuffer: 0.2,
    isResize: true,
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
      audio: true,
      record: true
    }
  })

  document.getElementById('btn-play').onclick = () => {
    player.play('https://example.com/live/test.flv').catch(console.error)
  }
  document.getElementById('btn-stop').onclick = () => player.destroy()

  player.on('error', (error) => {
    if (error === Jessibuca.ERROR.fetchError) console.error('HTTP 失败')
    if (error === Jessibuca.ERROR.websocketError) console.error('WebSocket 失败')
  })
  player.on('timeout', (type) => console.warn(type))
</script>

构造参数速查

参数	类型	默认	说明
`container`	`HTMLElement \| string`	必填	挂载节点或选择器
`decoder`	`string`	`'decoder.js'`	worker 地址，wasm 需同目录
`videoBuffer`	`number`	`1`	缓冲秒数
`videoBufferDelay`	`number`	`1`	超缓冲后丢帧的额外秒数
`hiddenAutoPause`	`boolean`	`false`	页面 hidden 时暂停
`hasAudio`	`boolean`	`true`	`false` 则不解音频
`rotate`	`number`	`0`	仅 `0` / `180` / `270`
`isResize`	`boolean`	`true`	等比留黑边，等同 `setScaleMode(1)`
`isFullResize`	`boolean`	`false`	等比裁切填满，等同 `setScaleMode(2)`
`isFlv`	`boolean`	`false`	ws 地址无 `.flv` 时仍按 FLV 解析
`debug`	`boolean`	`false`	控制台日志
`timeout`	`number`	`10`	loading + 心跳超时（秒）
`heartTimeout`	`number`	`10`	播放中无帧超时（秒）
`heartTimeoutReplay`	`boolean`	`true`	心跳超时自动重播（URL 可达时）
`heartTimeoutReplayTimes`	`number`	`3`	重试次数，`-1` 无限
`loadingTimeout`	`number`	`10`	`play()` 后无数据超时
`loadingTimeoutReplay`	`boolean`	`true`	loading 超时自动重播
`loadingTimeoutReplayTimes`	`number`	`3`	重试次数，`-1` 无限
`loadingDecoderWorkerTimeout`	`number`	`10`	加载 decoder worker 超时
`supportDblclickFullscreen`	`boolean`	`false`	双击画面全屏（不含控制条）
`showBandwidth`	`boolean`	`false`	显示码率
`operateBtns`	`object`	全 `false`	`{ fullscreen, screenshot, play, audio, record }`
`keepScreenOn`	`boolean`	`false`	移动端亮屏
`isNotMute`	`boolean`	`false`	默认出声，仍需用户手势
`loadingText`	`string`	`''`	loading 文案
`background`	`string`	`''`	背景图
`useMSE`	`boolean`	`false`	MSE 硬解 H.264，优先于 WCS
`useWCS`	`boolean`	`false`	WebCodecs 硬解 H.264（Chrome 94+ / https 或 localhost）
`wcsUseVideoRender`	`boolean`	`true`	WCS 用 `<video>` 渲染
`autoWasm`	`boolean`	`true`	硬解不支持 H.265 时降级 wasm
`hotKey`	`boolean`	`false`	Esc 退出全屏，方向键音量
`wasmDecodeErrorReplay`	`boolean`	—	wasm 解码失败后重播
`controlAutoHide`	`boolean`	`false`	控制条自动隐藏
`recordType`	`'webm' \| 'mp4'`	`'webm'`	录制封装
`useWebFullScreen`	`boolean`	`false`	移动端/iOS 旋转 90° 网页全屏
`autoUseSystemFullScreen`	`boolean`	—	优先系统全屏
`forceNoOffscreen`	`boolean`	`true`	已废弃，内部已禁用离屏
`openWebglAlignment`	`boolean`	—	UV 宽度不能被 4 整除时的绿屏修复

<video> 渲染（MSE / WCS+video）不支持 isResize / isFullResize / setScaleMode / clearView。HTTP 4xx/5xx、ws 连不上不会走 Replay，会走 error。

方法速查

签名	返回	说明
`play(url?, options?: { headers? })`	`Promise<void>`	`headers` 仅 HTTP 有效
`pause()`	`Promise<void>`	之后 `play()` 可续播同一路
`destroy()`	`Promise<void>`	释放资源
`close()`	`Promise<void>`	废弃，等同 `destroy()`
`mute()` / `cancelMute()` / `audioResume()`	`void`	静音 / 取消 / 手势恢复音频
`setVolume(n)`	`void`	`0..1`，仍会解码音频
`setDebug(bool)`	`void`
`setTimeout(sec)`	`void`
`setBufferTime(sec)`	`void`	同 `videoBuffer`
`setScaleMode(0\|1\|2)`	`void`	拉伸 / 留边 / 裁切
`setRotate(0\|90\|180\|270)`	`void`
`setFullscreen(bool)`	`void`	iOS 建议 `useWebFullScreen`
`resize()`	`void`	容器尺寸变化后调用
`clearView()`	`void`	canvas 涂黑
`screenshot(name?, format?, quality?, type?)`	`void\|string\|Blob`	`type`: `download` / `base64` / `blob`。`start` 后请延迟约 1s 再截图
`startRecord(name?, 'webm'\|'mp4')`	`void`
`stopRecordAndSave()`	`void`
`isPlaying()` / `isMute()` / `isRecording()`	`boolean`
`toggleControlBar(bool?)`	`void`	省略参数则切换
`getControlBarShow()`	`boolean`
`kbps2Speed(kbps)`	`number`	kbps → KB/s
`on(event, cb)`	`void`	见事件速查

事件速查

player.on(name, cb)

事件	回调参数	时机
`load`	`()`	初始化完成。3.x 可直接 `play()`
`play` / `pause` / `start`	`()`	播放 / 暂停 / 首帧渲染
`mute`	`(boolean)`	是否静音
`volume`	`(number)`	`0..1`
`fullscreen` / `webFullscreen`	`(boolean)`	系统全屏 / 网页全屏
`timeUpdate`	`(ts: number)`	帧 PTS，毫秒
`videoInfo`	`{ width, height, encTypeCode, encType }`	`10` H.264，`12` H.265
`audioInfo`	`{ numOfChannels, sampleRate, encTypeCode, encType }`	`10` AAC，`7` G711A，`8` G711U
`kBps`	`(number)`	码率，每秒 1 次
`stats`	`{ buf, fps, abps, vbps, ts }`	每秒 1 次
`performance`	`0\|1\|2`	卡顿 / 流畅 / 很流畅
`log`	`(any)`	日志
`error`	`(string)`	与 `Jessibuca.ERROR.*` 比较
`timeout`	`(string)`	与 `Jessibuca.TIMEOUT.*` 比较
`loadingTimeout` / `delayTimeout`	`()`	起播无数据 / 播放卡顿
`recordStart` / `recordEnd`	`()`
`recordingTimestamp`	`(number)`	录制时长，每秒 1 次
`playToRenderTimes`	`(times)`	play → 渲染各阶段耗时

错误码与超时

Jessibuca.ERROR.playError              // play() 空 URL / 状态不对，值为 playIsNotPauseOrUrlIsNull
Jessibuca.ERROR.fetchError             // HTTP 失败
Jessibuca.ERROR.websocketError         // WebSocket 失败
Jessibuca.ERROR.webcodecsH265NotSupport
Jessibuca.ERROR.mediaSourceH265NotSupport
Jessibuca.ERROR.wasmDecodeError
Jessibuca.TIMEOUT.loadingTimeout
Jessibuca.TIMEOUT.delayTimeout

常见任务

组件挂载创建、卸载销毁

let player
onMounted(() => {
  player = new window.Jessibuca({ container: el, decoder: '/decoder.js' })
})
onBeforeUnmount(async () => {
  if (player) {
    await player.destroy()
    player = null
  }
})

HTTP-FLV 带鉴权头

await player.play(url, { headers: { Authorization: 'Bearer xxx' } })

优先硬解，失败降 wasm

new Jessibuca({
  container: '#container',
  decoder: '/decoder.js',
  useMSE: true,
  useWCS: true,
  autoWasm: true
})

截图 / 录制

player.on('start', () => {
  setTimeout(() => player.screenshot('shot', 'png', 0.92, 'base64'), 1000)
})
player.startRecord('clip', 'mp4')
player.stopRecordAndSave()

Jessibuca(options)

签名：new Jessibuca(options: Config): Jessibuca
必填：options.container

options 支持的参数有：

container

类型：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;
}

不建议业务层在container参数上面有额外的css属性样式，尤其是缩放，旋转之类的，这样会导致播放器内部的画面不正常。

可以通过在业务层的div 下面再放一个div作为播放器容器,这样可以规避掉一些问题。

html

<div id="your-container">
    <div id="player-container"></div>
</div>

new Jessibuca({
    container: '#player-container'
})

videoBuffer

类型：number
默认值：1
用法：设置缓冲时长，单位秒。

videoBufferDelay

类型：number
默认值：1
用法：设置最大缓冲延迟时长，单位秒，如果延迟超过该值，就会进行丢帧处理。

播放器会在缓冲数据大于videoBuffer + videoBufferDelay的时候，进行丢帧处理。

decoder

类型：string
默认值：decoder.js
用法：

worker地址

默认引用的是根目录下面的decoder.js文件，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。

例如vue项目中，jessibuca.js 文件在public/jessibuca/jessibuca.js （decoder.js也在同级目录下）。

需要配置的 decoder 参数是： decoder: '/jessibuca/decoder.js'

如果配置的参数是相对地址，是针对于http地址上面的相对地址。

例如当前页面的是 http://test.com/a/b/c.html

如果new 播放器的时候配置的 decoder的参数是相对地址'./decoder.js'，则会去请求 http://test.com/a/b/decoder.js

forceNoOffscreen（废弃）

类型：boolean
默认值：true
用法：

是否不使用离屏模式（提升渲染能力）

该特性是实验性特性，某些版本的浏览器会出现内存无缘无故变大的情况。谨慎使用。

由于目前浏览器兼容性太差，会出现慕名奇妙的错误问题，目前播放器内部禁用离屏渲染。

hiddenAutoPause

类型：boolean
默认值：false
用法：

见

是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。

hasAudio

类型：boolean
默认值：true
用法：

是否有音频，如果设置false，则不对音频数据解码，提升性能。

rotate

类型：number
默认值：0
用法：

设置旋转角度，只支持，0(默认) ，180，270 三个值。

isResize

类型：boolean
默认值：true
用法：

当为true的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。等同于 setScaleMode(1)
当为false的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 setScaleMode(0)

video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个属性。

isFullResize

类型：boolean
默认值：false
用法：

当为true的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 setScaleMode(2)

video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个属性。

isFlv

类型：boolean
默认值：false
用法：

当为true的时候：ws协议不检验是否以.flv为依据，进行协议解析。

debug

类型：boolean
默认值：false
用法：是否开启控制台调试打印

timeout

类型：number
默认值：10
用法：

设置超时时长, 单位秒
在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件

heartTimeout

类型：number
默认值：10
用法：

设置超时时长, 单位秒
播放中途,如果超过设定时长无数据返回,则回调timeout事件

heartTimeoutReplay

类型：boolean
默认值：true
用法：是否开启心跳超时之后自动再播放

heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。

只会在播放地址是正常能够访问通的情况下，才会重新播放。像http 404，500等错误，不会重新播放。ws连接失败也不会重新播放。这种会走到异常事件。

heartTimeoutReplayTimes

类型：number
默认值：3
用法： heartTimeoutReplay 重试次数

heartTimeoutReplay 重试失败之后，不再重新播放视频地址。

是整个生命周期中重试的次数。

如果想无限次重试，可以设置为-1

loadingTimeout

类型：number
默认值：10
用法：

设置超时时长, 单位秒
在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件

loadingTimeoutReplay

类型：boolean
默认值：true
用法：是否开启loading超时之后自动再播放

loadingTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。

只会在播放地址是正常能够访问通的情况下，才会重新播放。像http 404，500等错误，不会重新播放。ws连接失败也不会重新播放。这种会走到异常事件,。

loadingTimeoutReplayTimes

类型：number
默认值：3
用法： loadingTimeoutReplay 重试次数

loadingTimeoutReplay 重试失败之后，不再重新播放视频地址。

如果想无限次重试，可以设置为-1

loadingDecoderWorkerTimeout

类型：number
默认值：10
用法：加载worker文件超时时间，单位秒

加载worker文件超时之后，会抛出异常，不再播放视频。

supportDblclickFullscreen

类型：boolean
默认值：false
用法：是否支持屏幕的双击事件，触发全屏，取消全屏事件。

点击底部的 controls UI条(里面元素)不会触发全屏事件。

showBandwidth

类型：boolean
默认值：false
用法：是否显示网速

operateBtns

类型：object
默认值：{ fullscreen:false, screenshot: false, play: false, audio: false, record:false }
用法：配置操作按钮其中

fullscreen 是否显示全屏按钮
screenshot 是否显示截图按钮
play 是否显示播放暂停按钮
audio 是否显示声音按钮
record 是否显示录制按钮

keepScreenOn

类型：boolean
默认值：false
用法：开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。

PC端不会生效，仅手机端生效

isNotMute

类型：boolean
默认值：false
用法：是否开启声音，默认是关闭声音播放的。

必须通过按钮或者点击事件触发play() 方法，才会播放出声音来，不然还是静音的。浏览器不允许自动播放的视频自动播放声音。

loadingText

类型：string
默认值：``
用法：加载过程中文案。

background

类型：string
默认值：``
用法：背景图片。

useMSE

类型：boolean
默认值：false
用法：是否开启MediaSource硬解码

视频编码只支持H.264视频（Safari on iOS不支持）

~~> 不支持 forceNoOffscreen 为 false (开启离屏渲染)~~

优先级高于useWCS:true

useWCS

类型：boolean
默认值：false
用法：是否开启Webcodecs硬解码

视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)

~~> 支持 forceNoOffscreen 为 false （开启离屏渲染）~~

如果同时设置了useMSE:true, 则优先使用useMSE

wcsUseVideoRender

类型：boolean
默认值：true
用法： webcodecs硬解码是否通过video标签渲染

~~> forceNoOffscreen 设置为false之后（通过OffscreenCanvas渲染之），wcsUseVideoRender不会生效。~~

~~webcodecs硬解码之后，默认是通过canvas 渲染出来的，可以通过配置通过video标签渲染，提升渲染性能。~~

现在默认 video标签渲染，提升渲染性能。

autoWasm

类型：boolean
默认值：true
用法：在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。

设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。

hotKey

类型：boolean
默认值：false
用法：是否开启键盘快捷键

目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；

wasmDecodeErrorReplay

类型：boolean
默认值：true
用法：是否开启解码失败重新播放

wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。

controlAutoHide

类型：boolean
默认值：false
用法：底部控制台是否自动隐藏

只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。

recordType

类型：string
默认值：webm
用法：默认录制的视频格式

支持 webm,mp4 参数

useWebFullScreen

类型：boolean
默认值：false
用法：是否使用web全屏(旋转90度)（只会在移动端生效）。

如果手机设置了自动选择，建议不要开启。

web全屏使用的是css方式实现的伪全屏，实现的是横屏播放的。如果手机设置了自动旋转，建议不要使用这个功能。

ios上面不支持系统级别的全屏方法，推荐使用这个参数。

autoUseSystemFullScreen

类型：boolean
默认值：true
用法：是否自动使用系统全屏

如果设置了true，播放器会检查是否支持系统提供的全屏API，如果支持，就会优先使用系统全屏API，否则使用web全屏API（useWebFullScreen）。

方法

setDebug(flag)

签名：setDebug(flag: boolean): void
参数：
- {boolean} flag
用法：是否开启控制台调试打印

// 开启
jessibuca.setDebug(true)
// 关闭
jessibuca.setDebug(false)

mute()

签名：mute(): void
用法：静音

jessibuca.mute()

cancelMute()

签名：cancelMute(): void
用法：取消静音

jessibuca.cancelMute()

iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。

audioResume()

签名：audioResume(): void
用法：留给上层用户操作来触发音频恢复的方法。

iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

setTimeout(time)

签名：setTimeout(time: number): void
参数：
- {number} time
用法：

设置超时时长, 单位秒在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件

jessibuca.setTimeout(10)

jessibuca.on('timeout', function () {
    //
});

setScaleMode(mode)

签名：setScaleMode(mode: 0 | 1 | 2): void
参数：
- {number} mode
用法：

0 视频画面完全填充canvas区域,画面会被拉伸等同于参数 isResize 为false
1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边等同于参数 isResize 为true
2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全等同于参数 isFullResize 为true

video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个方法。

jessibuca.setScaleMode(0)

jessibuca.setScaleMode(1)

jessibuca.setScaleMode(2)

pause()

签名：pause(): Promise<void>
返回：
- {Promise}
用法：暂停播放

jessibuca.pause().then(() => {
    console.log('pause success')

    jessibuca.play().then(() => {

    }).catch((e) => {

    })

}).catch((e) => {
    console.log('pause error', e);
})

可以在pause 之后，再调用 play()方法就继续播放之前的流。

close()（废弃）

签名：close(): Promise<void>
用法：关闭视频,不释放底层资源
返回：
- {Promise}

废弃，推荐使用destroy()方法

内部就是调用的destroy()方法

jessibuca.close().then(() => {
    console.log('close success')
}).catch((e) => {
    console.log('close error', e);
});

destroy()

签名：destroy(): Promise<void>
用法：关闭视频，释放底层资源
返回：
- {Promise}

jessibuca.destroy().then(()=>{
    // todo: next
})

// 或者
await jessibuca.destroy();

clearView()

签名：clearView(): void
用法：清理画布为黑色背景

jessibuca.clearView()

video标签(useMSE,useWCS+wcsUseVideoRender)渲染的页面暂不支持这个方法。

play([url],[options])

签名：play(url?: string, options?: { headers?: Record<string, string> }): Promise<void>
参数：
- {string} url url 地址
- {object} options 额外参数
  - {object} headers http 请求头
返回：
- {Promise}
用法：播放视频


jessibuca.play('url').then(() => {
    console.log('play success')
}).catch((e) => {
    console.log('play error', e)
})

//  http 授权认证。
jessibuca.play('url',{headers:{'Authorization':'test111'}}).then(() => {
    console.log('play success')
}).catch((e) => {
    console.log('play error', e)
})


//
jessibuca.play()

resize()

签名：resize(): void
用法：重新调整视图大小

setBufferTime(time)

签名：setBufferTime(time: number): void
参数：
- {number} time
用法：设置最大缓冲时长，单位秒，播放器会自动消除延迟。

等同于 videoBuffer 参数。

// 设置 200ms 缓冲
jessibuca.setBufferTime(0.2)

setRotate(deg)

签名：setRotate(deg: 0 | 90 | 180 | 270): void
参数：
- {number} deg
用法：设置旋转角度，支持，0(默认), 90, 180, 270 四个值。

可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。

注意，当旋转90度后，用户也会旋转手机，这时如果手机未锁定方向，画面又可能因为浏览器旋转导致画面又旋转了。可以监听页面旋转事件，将角度又旋转回0

jessibuca.setRotate(0)

jessibuca.setRotate(90)

jessibuca.setRotate(180)

jessibuca.setRotate(270)

setVolume(volume)

签名：setVolume(volume: number): void
参数：
- {number} volume
用法：

设置音量大小，取值0 — 1
当为0时，完全无声
当为1时，最大音量，默认值

区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。

jessibuca.setVolume(0.2)

jessibuca.setVolume(0)

jessibuca.setVolume(1)

hasLoaded()

签名：hasLoaded(): boolean
返回值：boolean
用法：返回是否加载完毕

仅为兼容老的2.x语法，3.x版本不需要这个事件。

var result = jessibuca.hasLoaded()
console.log(result) // true

setKeepScreenOn()

签名：setKeepScreenOn(): boolean
用法：开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。 H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持

jessibuca.setKeepScreenOn()

setFullscreen(flag)

签名：setFullscreen(flag: boolean): void
参数：
- {boolean} flag
用法：全屏(取消全屏)播放视频

iOS不支持，iPadOS13后支持

推荐iOS端配置上 useWebFullScreen 这个参数。


jessibuca.setFullscreen(true)
//
jessibuca.setFullscreen(false)

screenshot(filename, format, quality,type)

签名：screenshot(filename?: string, format?: 'png' | 'jpeg' | 'webp', quality?: number, type?: 'download' | 'base64' | 'blob'): void | string | Blob
参数：
- {string} filename
- {string} format
- {number} quality
- {string} type
用法：

截图，调用后弹出下载框保存截图

filename: 可选参数, 保存的文件名, 默认 时间戳
format : 可选参数, 截图的格式，可选png或jpeg或者webp ,默认 png
quality: 可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 0.92
type: 可选参数, 可选download或者base64或者blob，默认download


jessibuca.screenshot("test", "png", 0.5)


const base64 = jessibuca.screenshot("test", "png", 0.5, 'base64')


const fileBlob = jessibuca.screenshot("test", 'blob')

startRecord(fileName,fileType)

签名：startRecord(fileName?: string, fileType?: 'webm' | 'mp4'): void
参数：
- {string} filename
- {string} fileType
用法：开始录制。

fileName: 可选，默认时间戳
fileType: 可选，默认webm，支持webm 和mp4 格式

jessibuca.startRecord('xxx', 'webm')

stopRecordAndSave()

签名：stopRecordAndSave(): void
用法：暂停录制并下载。

jessibuca.stopRecordAndSave()

isPlaying()

签名：isPlaying(): boolean
返回值：boolean
用法：返回是否正在播放中状态。

var result = jessibuca.isPlaying()
console.log(result) // true

isMute()

签名：isMute(): boolean
返回值：boolean
用法：返回是否静音。

var result = jessibuca.isMute()
console.log(result) // true

isRecording()

签名：isRecording(): boolean
返回值：boolean
用法：返回是否正在录制。

var result = jessibuca.isRecording()
console.log(result) // true

toggleControlBar(isShow)

签名：toggleControlBar(isShow?: boolean): void
用法：切换底部控制条隐藏/显示
参数：
- {boolean} isShow 是否显示


// 显示
jessibuca.toggleControlBar(true)
// 隐藏
jessibuca.toggleControlBar(false)

// 切换 隐藏/显示
jessibuca.toggleControlBar()

getControlBarShow()

签名：getControlBarShow(): boolean
用法：获取底部控制条是否显示
返回：{boolean}

const isShow = jessibuca.getControlBarShow()

kbps2Speed(kbps)

签名：kbps2Speed(kbps: number): number
用法：码率转换成网速 kbps -> KB/s
返回：{number}

jessibuca.on("kBps", function (data) {
    console.log('kBps:', data)
    // 如果想要转换成网速
    const speed = jessibuca.kbps2Speed(data);
})

on(event, callback)

签名：on(event: string, callback: (...args: any[]) => void): void
参数：
- {string} event
- {function} callback
用法：监听方法


jessibuca.on("load", function () {
    console.log('load')
})

事件

load

签名：on('load', callback: () => void): void

监听 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')
    })
}

timeUpdate

签名：on('timeUpdate', callback: (ts: number) => void): void

当前视频帧pts，单位毫秒ms

jessibuca.on('timeUpdate', function (ts) {
    console.log('timeUpdate', ts);
})

videoInfo

签名：on('videoInfo', callback: (data: { width: number, height: number, encTypeCode: number, encType: string }) => void): void

当解析出视频信息时回调，2个回调参数

width：视频宽
height：视频高
encTypeCode 视频编码类型(10:h264,12:h265)
encType 视频编码类型(字符串)


jessibuca.on("videoInfo", function (data) {
    console.log('width:', data.width, 'height:', data.width)
})

audioInfo

签名：on('audioInfo', callback: (data: { numOfChannels: number, sampleRate: number, encTypeCode: number, encType: string }) => void): void

当解析出音频信息时回调，2个回调参数

numOfChannels：声频通道
sampleRate 采样率
encTypeCode 音频编码类型(10:aac,7:ALAW(g711a),8:MULAW(g711u))
encType 音频编码类型(字符串)


jessibuca.on("audioInfo", function (data) {
    console.log('numOfChannels:', data.numOfChannels, 'sampleRate', data.sampleRate)
})

log

签名：on('log', callback: (data: any) => void): void

信息，包含错误信息


jessibuca.on("log", function (data) {
    console.log('data:', data)
})

error

签名：on('error', callback: (error: string) => void): void

错误信息

目前已有的错误信息：

jessibuca.ERROR.playError ;播放错误，url 为空的时候，调用play方法
jessibuca.ERROR.fetchError ;http 请求失败
jessibuca.ERROR.websocketError; websocket 请求失败
jessibuca.ERROR.webcodecsH265NotSupport; webcodecs 解码 h265 失败
jessibuca.ERROR.mediaSourceH265NotSupport; mediaSource 解码 h265 失败
jessibuca.ERROR.wasmDecodeError ; wasm 解码失败


jessibuca.on("error", function (error) {
    if (error === jessibuca.ERROR.fetchError) {
        //
    } else if (error === jessibuca.ERROR.webcodecsH265NotSupport) {
        //
    }
    console.log('error:', error)
})

kBps

签名：on('kBps', callback: (kbps: number) => void): void

当前码率，每秒1次,

码率是和网速是区分的，网速是指当前网络的下载速度，码率是指当前视频的码率。

1 Bps = 8 bps


jessibuca.on("kBps", function (data) {
    console.log('kBps:', data)
    // 如果想要转换成网速
    const speed = jessibuca.kbps2Speed(data);
})

start

签名：on('start', callback: () => void): void

渲染开始

如果需要在start 之后调用截图方法，需要写一个延迟方法去执行。因为代码中无法感应到画面被渲染出来了。


jessibuca.on("start", function () {
    console.log('start render')

    // 如果有截图需求。需要延迟一下，因为代码中无法感应到画面被渲染出来了。
    // 1s 之后截图
    setTimeout(function () {
        jessibuca.screenshot('xxx')
    }, 1 * 1000)
})

timeout

签名：on('timeout', callback: (type: string) => void): void

当设定的超时时间内无数据返回,则回调

jessibuca.TIMEOUT.loadingTimeout ; 同loadingTimeout
jessibuca.TIMEOUT.delayTimeout ; 同delayTimeout


jessibuca.on("timeout", function (error) {
    console.log('timeout:', error)
})

loadingTimeout

签名：on('loadingTimeout', callback: () => void): void

当play()的时候，如果没有数据返回，则回调


jessibuca.on("loadingTimeout", function () {
    console.log('timeout')
})

delayTimeout

签名：on('delayTimeout', callback: () => void): void

当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。


jessibuca.on("delayTimeout", function () {
    console.log('timeout')
})

fullscreen

签名：on('fullscreen', callback: (flag: boolean) => void): void

当前是否全屏

jessibuca.on("fullscreen", function (flag) {
    console.log('is fullscreen', flag)
})

webFullscreen

签名：on('webFullscreen', callback: (flag: boolean) => void): void

当前是否web全屏

jessibuca.on("webFullscreen", function (flag) {
    console.log('is webFullscreen', flag)
})

play

签名：on('play', callback: () => void): void

触发播放事件

jessibuca.on("play", function (flag) {
    console.log('play')
})

pause

签名：on('pause', callback: () => void): void

触发暂停事件

jessibuca.on("pause", function (flag) {
    console.log('pause')
})

mute

签名：on('mute', callback: (flag: boolean) => void): void

触发声音事件，返回boolean值

jessibuca.on("mute", function (flag) {
    console.log('is mute', flag)
})

volume

签名：on('volume', callback: (volume: number) => void): void

触发音量事件，返回音量值

jessibuca.on("volume", function (volume) {
    console.log('volume', volume)
})

stats

签名：on('stats', callback: (s: { buf: number, fps: number, abps: number, vbps: number, ts: number }) => void): void

流状态统计，流开始播放后回调，每秒1次。

buf: 当前缓冲区时长，单位毫秒,
fps: 当前视频帧率,
abps: 当前音频码率，单位byte,
vbps: 当前视频码率，单位byte，
ts:当前视频帧pts，单位毫秒

jessibuca.on("stats", function (s) {
    console.log("stats is", s)
})

performance

签名：on('performance', callback: (level: 0 | 1 | 2) => void): void

渲染性能统计，流开始播放后回调，每秒1次。

0: 表示卡顿
1: 表示流畅
2: 表示非常流程

jessibuca.on("performance", function (performance) {
    console.log("performance is", performance)
})

recordStart

签名：on('recordStart', callback: () => void): void

录制开始的事件

jessibuca.on("recordStart", function () {
    console.log("record start")
})

recordEnd

签名：on('recordEnd', callback: () => void): void

录制结束的事件

jessibuca.on("recordEnd", function () {
    console.log("record end")
})

recordingTimestamp

签名：on('recordingTimestamp', callback: (timestamp: number) => void): void

录制的时候，返回的录制时长，1s一次

jessibuca.on("recordingTimestamp", function (timestamp) {
    console.log("recordingTimestamp is", timestamp)
})

playToRenderTimes

签名：on('playToRenderTimes', callback: (times: object) => void): void

监听调用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
}

API ​

Agent 编程手册 ​

这是什么 ​

生成代码时必须遵守 ​

最小可运行示例 ​

构造参数速查 ​

方法速查 ​

事件速查 ​

错误码与超时 ​

常见任务 ​

Jessibuca(options) ​

container ​

videoBuffer ​

videoBufferDelay ​

decoder ​

forceNoOffscreen（废弃） ​

hiddenAutoPause ​

hasAudio ​

rotate ​

isResize ​

isFullResize ​

isFlv ​

debug ​

timeout ​

heartTimeout ​

heartTimeoutReplay ​

heartTimeoutReplayTimes ​

loadingTimeout ​

loadingTimeoutReplay ​

loadingTimeoutReplayTimes ​

loadingDecoderWorkerTimeout ​

supportDblclickFullscreen ​

showBandwidth ​

operateBtns ​

keepScreenOn ​

isNotMute ​

loadingText ​

background ​

useMSE ​

useWCS ​

wcsUseVideoRender ​

autoWasm ​

hotKey ​

wasmDecodeErrorReplay ​

controlAutoHide ​

recordType ​

useWebFullScreen ​

autoUseSystemFullScreen ​

方法 ​

setDebug(flag) ​

mute() ​

cancelMute() ​

audioResume() ​

setTimeout(time) ​

setScaleMode(mode) ​

pause() ​

close()（废弃） ​

destroy() ​

clearView() ​

play([url],[options]) ​

resize() ​

setBufferTime(time) ​

setRotate(deg) ​

setVolume(volume) ​

hasLoaded() ​

setKeepScreenOn() ​

setFullscreen(flag) ​

screenshot(filename, format, quality,type) ​

startRecord(fileName,fileType) ​

stopRecordAndSave() ​

isPlaying() ​

isMute() ​

isRecording() ​

toggleControlBar(isShow) ​

getControlBarShow() ​

kbps2Speed(kbps) ​

on(event, callback) ​

事件 ​

load ​

timeUpdate ​

API

Agent 编程手册

这是什么

生成代码时必须遵守

最小可运行示例

构造参数速查

方法速查

事件速查

错误码与超时

常见任务

Jessibuca(options)

container

videoBuffer

videoBufferDelay

decoder

forceNoOffscreen（废弃）

hiddenAutoPause

hasAudio

rotate

isResize

isFullResize

isFlv

debug

timeout

heartTimeout

heartTimeoutReplay

heartTimeoutReplayTimes

loadingTimeout

loadingTimeoutReplay

loadingTimeoutReplayTimes

loadingDecoderWorkerTimeout

supportDblclickFullscreen

showBandwidth

operateBtns

keepScreenOn

isNotMute

loadingText

background

useMSE

useWCS

wcsUseVideoRender

autoWasm

hotKey

wasmDecodeErrorReplay

controlAutoHide

recordType

useWebFullScreen

autoUseSystemFullScreen

方法

setDebug(flag)

mute()

cancelMute()

audioResume()

setTimeout(time)

setScaleMode(mode)

pause()

close()（废弃）

destroy()

clearView()

play([url],[options])

resize()

setBufferTime(time)

setRotate(deg)

setVolume(volume)

hasLoaded()

setKeepScreenOn()

setFullscreen(flag)

screenshot(filename, format, quality,type)

startRecord(fileName,fileType)

stopRecordAndSave()

isPlaying()

isMute()

isRecording()

toggleControlBar(isShow)

getControlBarShow()

kbps2Speed(kbps)

on(event, callback)

事件

load

timeUpdate