Runtime & API

Runtime Contract

  • Execution environment: modern browsers on desktop and mobile (Chrome, Firefox, Safari, Edge).
  • Required runtime capabilities vary by decode strategy: WASM (broadest support), MSE, WebCodecs (requires HTTPS/localhost), WASM SIMD, and multi-threaded.
  • Autoplay requires muted state — call cancelMute() after a user interaction to enable audio.
  • Fullscreen behavior depends on browser policies; use web fullscreen mode as fallback on mobile.
  • WebCodecs H.265 decoding requires HTTPS or localhost context.
  • Microphone access (for voice communication) requires HTTPS or localhost.

Quick Start

<script src="jessibuca-pro.js"></script>
<div id="container" style="width:640px;height:360px;"></div>

<script>
  var player = new JessibucaPro({
    container: document.getElementById('container'),
    videoBuffer: 0.2,
    decoder: 'decoder-pro.js',
    useMSE: true,
    loadingText: 'Loading',
    showBandwidth: true,
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
      audio: true,
    },
  });

  player.play('your-stream-url');

  player.on('play', () => console.log('Playing'));
  player.on('error', (type, msg) => console.error(type, msg));
</script>

Core Constructor Options

Option Type Description
containerHTMLElement | stringPlayer mount container element or element ID.
videoBuffernumberMax buffer duration (seconds). Player auto-eliminates latency.
videoBufferDelaynumberMax delay before frame dropping (seconds).
decoderstringDecoder worker path. .js and .wasm must be co-located.
useMSEbooleanEnable MediaSource Extensions decoding.
useWCSbooleanEnable WebCodecs decoding.
useSIMDbooleanEnable WASM SIMD decoding.
useMThreadingbooleanEnable multi-threaded decoding.
isResizebooleanScale proportionally with black bars (mode 1).
isFullResizebooleanScale proportionally, fill container, crop overflow (mode 2).
isFlv / isNakedFlow / isFmp4 / isMpeg4booleanForce specific stream format parsing.
hasAudio / hasVideobooleanToggle audio/video decoding. Disable audio for performance.
debug / debugLevelboolean / stringConsole logging: 'warn' or 'debug'.
timeoutnumberTimeout for loading and heartbeat (seconds).
rotatenumberRotation: 0, 90, 180, or 270 degrees.
mirrorRotatestringMirror: 'none', 'level', 'vertical'.
operateBtnsobjectControl button visibility (fullscreen, screenshot, play, audio, ptz, quality, performance).
useCanvasRenderbooleanUse canvas element instead of video element.
useWebGPUbooleanUse WebGPU for canvas rendering.
demuxUseWorkerbooleanUse worker for hardware decoding demuxing.

Core Methods

Method Description
play(url)Start playback for a stream URL.
pause()Pause current playback.
close()Close the connection.
destroy()Release all resources and detach the player. Returns a Promise.
screenshot(filename, format, quality)Capture a screenshot of the current frame.
setVolume(volume)Set audio volume (0–1).
setFullscreen(flag)Toggle fullscreen mode.
setScaleMode(mode)Scale mode: 0=stretch, 1=fit, 2=fill.
setRotate(deg)Set rotation angle.
setMirrorRotate(type)Set mirror flip direction.
setZoomRect(rect)Set electronic zoom area.
clearZoomRect()Clear electronic zoom.
showErrorMessageTips(msg)Display an error message overlay on the player.

Events

Event Description
loadPlayer loaded.
play / pausePlayback started / paused.
timeUpdateTime update during playback.
videoInfo / audioInfoMedia information available.
errorError occurred (params: errorType, message).
timeout / loadingTimeout / delayTimeoutTimeout events (heartbeat, loading, delay).
statsStatistics update (fps, dfps, etc.).
performancePerformance metrics update.
kBpsBandwidth update.
ptzPTZ direction event.
streamQualityChangeStream quality level changed.
zoomingZoom level changed.
recordStart / recordEnd / recordBlobRecording lifecycle events.
videoSEISEI metadata received.
crashLogCrash/exception telemetry.
playFailedAndPausedPlayback failed and auto-paused.
streamEndStream ended.
fullscreen / webFullscreenFullscreen state changed.
visibilityChange / focus / blurPage visibility and focus events.

Listen to events via: player.on(JessibucaPro.EVENTS.error, (type, msg) => { ... })

Error Types

The error event provides an error type constant from JessibucaPro.ERROR:

  • playError — play called with empty URL
  • fetchError — HTTP request failed
  • websocketError — WebSocket failed
  • webcodecsH265NotSupport — WebCodecs H.265 not supported
  • webcodecsDecodeError — WebCodecs decode failure
  • mediaSourceH265NotSupport — MSE H.265 not supported
  • mediaSourceFull — MSE buffer full
  • wasmDecodeError — WASM decode failure
  • hlsError — HLS error
  • webrtcError — WebRTC error
  • webglAlignmentError — WebGL alignment error
  • videoElementPlayingFailed — Video element play failed