Jessibuca is an open-source, pure HTML5 live stream player. By using Emscripten, it compiles audio and video decoding libraries into WebAssembly (WASM), allowing them to run directly within the browser. It is compatible with almost any modern environment—including desktop browsers, mobile devices, and WeChat—without requiring additional plugins or extensions.
Protocol Handling
HTTP Environment
{
useMSE: true,
autoWasm: true
}
HTTPS Environment
{
useWCS: true,
autoWasm: true
}
Vue
Assign the Jessibuca instance directly to the this context. Avoid placing the instance inside the data object to prevent Vue's reactivity system from tracking the player’s internal state, which can cause performance issues. If you must store it in data, prefix the property name with _ or $. You can then access it via this.$data._property.
Alternative approaches:
Vue.prototype.$player = new Jessibuca({})this.$options.jessibuca = new Jessibuca({})React
Attach the instance directly to the class context (this). Storing the player instance in the component state is not recommended.
Why Standard npm Installation May Fail
Because the project relies on WASM, standard package managers like npm or yarn often struggle to resolve binary dependencies correctly within the node_modules directory. Consequently, a standard installation may not work out of the box.
Workarounds
vue-cli-plugin-jessibuca for easier integration:npm install vue-cli-plugin-jessibuca -Dwindow.Jessibuca. Example: const instance = new window.Jessibuca({}).Hardware Decoding
Both useMSE and useWCS utilize hardware acceleration. Their capabilities differ as follows:
| Method | Codec Support | Protocol Support | Notes |
|---|---|---|---|
| useMSE | H.264 (H.265 supported in Pro version) | HTTP, HTTPS | High compatibility; requires manual activation |
| useWCS | H.264 only (browser H.265 support varies) | HTTPS only | Lower compatibility compared to MSE |
Software Decoding (WASM)
Priority Order
The player follows this hierarchy: useMSE > useWCS > WASM.
Browsers do not natively support rtsp:// or rtmp:// streams. Jessibuca works with http(s)://, ws(s)://, WebRTC, and WebTransport.
Solution
To play unsupported streams, route them through a media server like Monibuca (M7S).
Custom Directory
Place jessibuca.js, decoder.js, and decoder.wasm in a dedicated subfolder (e.g., /jessibuca).
<script src="./jessibuca/jessibuca.js"></script>{
decoder: '/jessibuca/decoder.js'
}
CDN Setup
To use a CDN, edit decoder.js and change wasmBinaryFile to an absolute URL: wasmBinaryFile='https://cdn.com/decoder.wasm'. Afterward, rebuild the project with npm run build. Pro version users can modify the WASM CDN path directly within rollup.config.js.
<canvas> rendering. The Pro version allows the use of the <video> tag.<video> tag. The Pro version supports <canvas>.<canvas>, but also works with the <video> tag. The Pro version supports canvas webgl2.If a page uses heavy WebGL resources (such as 3D backgrounds or interactive maps), the player may crash, often indicated by a "sad face" icon. To fix this:
<video> tag rendering.Software decoding multiple streams simultaneously puts a heavy load on the CPU, which can lead to lag and stuttering. Use hardware decoding whenever possible. If hardware decoding is unavailable, limit the number of simultaneous streams.
Additionally, browsers limit concurrent HTTP/1.x connections to the same origin (Chrome caps this at 6). Workarounds include:
Network issues, such as insufficient server upload bandwidth or excessively high bitrates, can also cause latency buildup. In these cases, optimize the network path or lower the stream bitrate.
WASM 404 (IIS)
If your server is running IIS, you must manually add a MIME type for .wasm files: application/wasm.
Incorrect MIME Type
Ensure the server explicitly sends Content-Type: application/wasm for .wasm files. For Nginx, add the following to your configuration:
types {
application/wasm wasm;
}
CORS Issues
The browser's same-origin policy may block cross-origin requests. Enable CORS on your media server. Example for a Node.js environment:
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
Black Screen with Active Data Flow
If the player shows a black screen despite receiving data, check the stream URL. The player uses the file extension (e.g., .flv) to determine the protocol. If your URL lacks an extension, force FLV parsing by setting isFlv: true in the configuration.
Green Screen or Corrupted Video
This usually occurs if the stream uses a pixel format other than YUV420P or if the video width is not a multiple of 8. In the Pro version, rendering via the <video> tag typically bypasses these hardware alignment issues.
Qwen3-ASR-Toolkit: Transcribe Long Audio Files Beyond the 3-Minute Limit
One API Setup Guide: Manage LLM Keys and Access 100+ AI Models
Lens Desktop Installation Guide: macOS, Windows, Linux
ChatGPT-on-WeChat Setup Guide: Run GPT-4o, Claude & More on WeChat
MonkeyCode: Secure Private AI Coding with Integrated Security Scanning & Admin Controls
SerenityOS Build Guide: A C++ Unix-Like System for x86, Arm, and RISC-V
QSV: Slice, Query, and Clean Massive CSV Files with High Performance
Memvid: Store Millions of Text Chunks in a Single MP4 File
Zotero PDF2zh: Translate Academic PDFs Directly Within Zotero
TypeAgent: Build AI Agents With Structured Memory and Human-in-the-Loop
AutoGenLib: Generate Python Code on the Fly With OpenAI API
Shendeng VPN: Genuine Unlimited Data & High-Speed Gaming Acceleration