Jessibuca：3 步在浏览器跑通 H5 直播流播放器

Jessibuca：3 步在浏览器跑通 H5 直播流播放器

【免费下载链接】jessibucaJessibuca是一款开源的纯H5直播流播放器项目地址: https://gitcode.com/GitHub_Trending/je/jessibuca

Jessibuca H5 直播流播放器把 FFmpeg 的解码库用 Emscripten 编译成 WASM，跑在浏览器的 WebWorker 线程里，不需要装任何插件。开源版（v3.3.28）支持 ws-raw、ws-flv、http(s)-flv 三种协议，H.264 和 H.265 都能播。下面按"能不能用、怎么跑起来、为什么能跑、遇到坑怎么办"的顺序讲清楚。

项目定位与核心能力

• 纯 H5 直播流播放器：解码不依赖浏览器原生能力，PC 浏览器、手机浏览器、微信内嵌 WebView 都直接打开就能播。
• 编码覆盖面：H.264 全 Profile（含 B 帧），H.265 走 WASM 软解码；音频支持 AAC、G.711。
• 延迟与体积：videoBuffer设为 0.2 时实测延迟 300~400ms；三个文件 GZIP 后约 500KB。
• 同类方案里的差异点：FLV.js 这类方案只走 MSE/WebCodecs，H.265 在很多浏览器无硬解能力就没法播；Jessibuca 的 wasm 软解码路径不挑浏览器，代价是 CPU 占用更高。解码顺序固定为 useMSE 硬解 > useWCS 硬解 > wasm 软解，前两级失败会自动降级。

从零跑通的最小路径

拉仓库并启动本地 Demo

git clone https://gitcode.com/GitHub_Trending/je/jessibuca cd jessibuca && npm i npm run dev

预期浏览器自动打开 VitePress 站点，首页有"打开播放器"入口。打不开的话检查 Node 版本，以及 5173 端口有没有被占用。

用 3 个文件做最小接入

把仓库里的jessibuca.js、decoder.js、decoder.wasm拷到你网站的静态目录。注意decoder.js和decoder.wasm必须同目录，且相对路径是相对当前页面 URL算的。

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

const player = new Jessibuca({ container: '#container', videoBuffer: 0.2 }) player.play('http://your-server/hdl/live/test.flv').catch(console.error) player.on('error', e => console.error(e)) player.destroy() // 页面卸载前释放

预期看到第一帧画面出现，控制台无报错。没出画面的话，先看控制台，再看 Network 面板里decoder.js和decoder.wasm这两个请求的返回状态。页面必须通过 http(s) 访问，直接双击用 file:// 打开必挂。

流地址怎么填

开源版只认http(s)://host/hdl/live/test.flv和ws(s)://host/live/test.flv这类地址。rtmp://、rtsp://浏览器里播不了，需要 M7S 之类的服务器先把流转成 FLV。播放器默认静音，要出声得在用户点击后调cancelMute()。

它是怎么工作的

wasm 软解码：把 FFmpeg 搬进浏览器线程

浏览器原生只认识 MP4 容器里的 H.264，FLV 和 H.265 它不认。Jessibuca 把 FFmpeg 的解码器编译成 wasm 字节码，丢到 WebWorker 里跑。FLV 流进来先拆封装，视频交给解码器出 YUV 帧，音频出 PCM，再通过postMessage送回主线程，主线程用 WebGL 把 YUV 画到 canvas，用 AudioContext 播声音。好处是解码不占主线程，UI 不卡，代价是吃 CPU。

wasm 软解码能快，很大程度靠 SIMD 指令集，Safari 目前不支持，会退回普通 wasm 路径，速度打折扣。硬解那边，开源版只有 MSE 支持 H.264 硬解，H.265 没有硬解路径，只能软解。开源版协议只有 ws-raw、ws-flv、http(s)-flv 三种，HLS、WebRTC、fmp4 都属于 Pro 版能力。

真实场景里怎么用

家用摄像头单路监控回看

家用摄像头走 M7S 转 FLV 后推 ws-flv，H.264 编码，手机和电脑浏览器打开同一个 H5 页面。videoBuffer配 0.2，延迟稳定在 300~400ms，肉眼感觉跟直接看摄像头差不多。移动端长时间盯着画面，把keepScreenOn打开，不然屏幕会自动熄。单路 720P 以内，开源版 wasm 软解完全够用。

企业内网 16 路画面并发

16 路 1080P 全走 wasm 软解，按仓库官方配置表，普通 CPU 上每核能扛的路数会明显不够，画面先卡后花。正确做法是让 H.264 流走useMSE: true硬解，CPU 压力降一大截。Chrome 对同源 http-flv 有 6 个并发连接的限制，超过 6 路就改用 ws-flv，或者上 HTTP/2。创建多个实例时按顺序错峰loadingTimeout，避免某一路地址失效把后面全部堵死。

踩坑与排错

file:// 打不开，报 Failed to constructor Worker

现象：双击本地 HTML，控制台报Failed to constructor 'Worker': Script at 'file://...'。根因：file:// 协议下 WebWorker 起不来，decoder.js就是靠 worker 跑的。解法：把页面放进 http(s) 环境，nginx 或npx serve都行，别用 file:// 调试播放器页面。

wasm 报 Incorrect response MIME type

现象：控制台刷Incorrect response MIME type. Expected 'application/wasm'。根因：服务器没给.wasm声明正确的 MIME，wasm 流式编译失败。解法：nginx 的 mime.types 里加一行application/wasm wasm;，IIS 里把.wasm的 MIME 类型设成application/wasm，Tomcat 同样加一条映射。

顺带说 H.265：Windows 上要走硬解，得先在微软商店装 HEVC 扩展，开源版 MSE 也不支持 H.265 硬解，只能走 wasm 软解，分辨率高时帧率会掉。

多路 ws-flv 里一路挂掉，其他路跟着卡

现象：多路同时播，某一路地址失效后，其他路的画面也卡住不动。根因：ws 请求被堵塞，后续请求拿不到资源。解法：按顺序错峰配超时，让失效的那一路先触发重播，把堵塞的请求释放出来。

function create(index) { return new Jessibuca({ loadingTimeout: 5 + index * 0.5 }) }

Jessibuca 开源版适合"浏览器里播 FLV、不装插件、H.265 也要能软解"的场景；HLS、WebRTC、多屏 UI 这些需求得看 Pro 版。它也不提供 npm 包，靠 script 标签引，构建工具里得自己处理静态文件。深入配置前，先读 常见问题 FAQ 和 API 说明，字段细节直接翻 类型定义文件。

【免费下载链接】jessibucaJessibuca是一款开源的纯H5直播流播放器项目地址: https://gitcode.com/GitHub_Trending/je/jessibuca