Jessibuca

English | 简体中文

Jessibuca 是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。

功能

• 支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)
• 支持解码H.265视频（flv id == 12）
• 支持enhanced-rtmpH265格式。
• 支持解码AAC音频(LC,HE,HEv2 Profile全支持)
• 支持解码PCMA音频以及PCMU音频格式
• 可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）
• 支持WASM智能不花屏丢帧，前台长时间播放绝不累积延迟。
• 可创建多个播放实例
• 程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快
• 同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器） 注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题
• 支持HTTPS/WSS加密视频传输，保证视频内容传输安全
• 手机浏览器内打开视频不会变成全屏播放
• 手机浏览器内打开长时间不会息屏
• 支持解码8kHz PCM_ALAW, PCM_MULAW的G.711音频
• 支持填充，等比，等比缩放 3中视频缩放模式
• 支持0，90，180，270度画面旋转
• 自带底部UI,支持原子化配置是否显示(播放/暂停、音量调节、截屏、录制/暂停录制、全屏/取消全屏、流量显示)
• 自带底部UI适配H5移动端，并支持web端全屏(操作栏适配横屏)
• 自带底部UI支持设置成自动隐藏，只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。
• 支持键盘快捷键
• 支持OffscreenCanvas，提升Webgl渲染性能
• 支持WebWorker多核解码，提升多画面播放性能
• 支持WebCodecs硬件解码API
• 支持WebCodecs硬件解码配置通过video标签渲染或者canvas标签渲染画面
• 支持MediaSourceExtensions 硬件解码
• 支持WebCodecs和MediaSourceExtensions硬解码失败的情况下自动切换到wasm软解码
• 支持同一个播放地址视频分辨率发生变化的时候视频不花屏(仅软解码)
• 支持同一个播放地址音频采样和编码发生改变的时候音频自动切换
• 支持视频录制(WebM、MP4格式[video/webm;codecs=h264])，(MP4格式支持在IOS VLC播放器显示时长播放，Android VLC播放器无法显示时长播放,PC VLC播放器可以播放)

PRO版本

PRO 特性

• 支持开源版几乎所有的方法和事件，支持无缝升级到PRO版本。
• 支持多种视频封装格式
• H.264 WASM多线程软解码视频(1080P及以上)
• H.265 WASM多线程软解码视频(1080P及以上)
• H.264 WASM SIMD软解码视频(1080P及以上)
• H.265 WASM SIMD软解码视频(1080P及以上)
• H.264 WASM SIMD多线程软解码视频(1080P及以上)
• H.265 WASM SIMD多线程软解码视频(1080P及以上)
• Mpeg4 视频格式软解码
• WASM/WASM(SIMD)支持 webgpu canvas渲染
• WASM/WASM(SIMD)支持 canvas渲染
• WASM/WASM(SIMD)支持 video 渲染
• WASM切换到后台播放，长时间播放绝不累积延迟
• WASM 支持离屏渲染
• H.265 支持MSE硬解码视频
• MSE支持Worker线程硬解码H.264/H.265音视频
• MSE智能不花屏丢帧，前台播放长时间播放绝不累积延迟
• MSE切换到后台播放，长时间播放绝不累积延迟
• H.265 支持WCS硬解码视频
• WCS支持canvas webgl2渲染
• WCS支持video渲染
• WCS智能不花屏丢帧，前台长时间播放绝不累积延迟
• WCS切换到后台播放，长时间播放绝不累积延迟
• WebRTC支持canvas渲染
• 支持MP3音频
• 支持移动端浏览器最小化后台播放音频
• 支持移动端设备息屏播放音频
• 设置播放最大延迟时长
• 支持画面镜像（水平，垂直）
• 底部UI按钮支持自定义方法
• 底部UI按钮支持添加自定义按钮
• 底部UI自定义HTML内容
• 支持隐藏默认loading效果
• 支持配置loading的icon
• 配置右键菜单以及事件
• 支持查看性能面板，可以查看实时数据（延迟，时间戳，基本信息，解码器信息等）
• 视频录制（MPEG-4格式的mp4文件，（视频））
• 视频录制（Flv格式的flv文件（音频+视频））
• 支持网络延迟检测，设置超过延迟重新拉流播放
• 支持work线程中发起Http-Flv、WS等请求
• work线程中解封装数据，解码数据
• UI控件PTZ（云台）操作盘(支持配置点击事件和鼠标按下和松开事件两种交互)
• UI控件PTZ（云台）操作盘支持两种布局（横向，纵向）
• UI控件PTZ（云台）操作盘支持拖拽
• UI控件PTZ（云台 镜头(+/-)，聚焦(+/-)，光圈(+/-) ，巡航(开/关)，透雾(开/关)，雨刷(开/关)按钮
• UI控件PTZ（云台）支持生成国标编码
• UI控件流分辨率配置(自定义)和展示
• 电子放大
• 播放器自定义水印（局部水印）
• 截图加自定义水印（局部水印）
• 全屏水印（平铺）
• 动态水印
• 幽灵水印
• 截图暗水印（数字水印），文字水印，图片水印
• 支持通过ws接口获取服务器端画面坐标系（文字、线条、矩形框子、文字+矩形框子、不规则多边形） 实时渲染在播放器上。
• 播放异常(崩溃)日志收集（方便发送给服务器端）
• 播放过程中超时，重新加载的时候，显示最后一帧画面
• pause() 到 play()的时候，显示暂停的时候的最后一帧画面
• 支持分析视频流(flv,hls-ts,hls-mp4,TS,fmp4，裸流，webrtc)里面SEI数据，并提取出来，通过事件回调给业务层使用
• 支持配置webrtc弱网络模式，提升弱网环境下的播放体验，优化播放卡顿，支持检测低fps情况触发重播逻辑，保证业务播放体验
• 支持监听播放器是否在可视区域，获取焦点，失去焦点事件。
• 支持播放异常暂停的时候显示错误提示信息
• 支持播放异常暂停的时候显示play按钮
• 支持检测首帧是否i帧，过滤掉非i帧数据
• 支持M7S加密流解密播放
• 支持国标SM4加密流解密播放
• 支持XOR加密流解密播放
• 支持国际化配置
• 提供业务解决方案文档
• 支持定制化服务开发

多路播放

• NxN路UI多屏播放(支持1x1,2x2,3x3,4x4)
• NxN路UI多屏播放支持不规则多屏播放(3-1，4-1)
• NxN路UI支持双击单个视频窗口，局部全屏（相对于container）
• NxN路UI支持拖拽排序

直播流(支持21种直播格式)

(live/test为streamPath)

1. ws(s)-raw 即ws(s)://host-name:port/jessica/live/test (该协议只对接了monibuca服务器,其他服务器需要额外对接)
2. ws(s)-flv 即ws(s)://host-name:port/jessica/live/test.flv（chrome下ip会报安全错误，建议域名形式访问，检查下端口范围chrome浏览器是否允许，chrome会默认禁用很多端口）
3. http(s)-flv 即http(s)://host-name:port/hdl/live/test.flv
4. Hls 即http(s)://host-name:port/hls/live/test.m3u8 (支持H264/H265)
5. WebTransport 即wt://host-name:port/play/live/test (该协议只对接了monibuca服务器,其他服务器需要额外对接)
6. Webrtc 即 webrtc://host-name:port/webrtc/play/live/test (支持H264/H265, 仅支持https://或者http://localhost环境)
7. Webrtc-zlmediakit 即 webrtc://host-name:port/index/api/webrtc?app=live&stream=stream-name&type=play (支持H264, 仅支持https://或者http://localhost环境)
8. Webrtc-srs 即 webrtc://host-name:port/rtc/v1/play/live/test (支持H264, 仅支持https://或者http://localhost环境)
9. webrtc-qiniu 即 webrtc://host-name:port/live/test (支持H264, 仅支持https://或者http://localhost环境)
10. Webrtc-others 即 webrtc://host-name:port/live/test (支持H264, 仅支持https://或者http://localhost环境)
11. http(s)-fmp4 即http(s)://host-name:port/your-path/live/test.(f)mp4
12. ws(s)-fmp4 即ws(s)://host-name:port/your-path/live/test.(f)mp4
13. http(s)-h264 即http(s)://host-name:port/jessica/live/test.h264
14. ws(s)-h264 即ws(s)://host-name:port/jessica/live/test.h264
15. http(s)-h265 即http(s)://host-name:port/jessica/live/test.h265
16. ws(s)-h265 即ws(s)://host-name:port/jessica/live/test.h265
17. ws(s)-mpeg4 即ws(s)://host-name:port/your-path/live/test.mpeg4
18. http(s)-mpeg4 即http(s)://host-name:port/your-path/live/test.mpeg4
19. artc-aliyun Web Rtc 即artc://host-name:port/xxxx(根据阿里云的播放地址来)
20. http(s)-ts 即http(s)://host-name:port/your-path/live/test.ts (mpeg-ts 支持H264/H265)
21. http(s)-ps 即http(s)://host-name:port/your-path/live/test.ps (mpeg-ps 支持H264/H265)

• 注意http协议会有跨域问题，需要设置cors头
• 协议同时支持https、wss
• 同时支持H264和H265编码格式
• 支持mpeg4编码格式
• 支持webcodecs硬解码(H264+H265)和MSE硬解码(H264+H265)
• 支持HLS(H264+H265)软解码、硬解码
• 支持m7s webrtc(H264+H265(datachannel 软解码、硬解码))，
• 支持zlmediakit webrtc(H264+H265)(H265需要浏览器底层支持)
• 支持srs webrtc(H264+H265)(H265需要浏览器底层支持)
• 支持others webrtc(H264+H265)(H265需要浏览器底层支持)
• 支持加密流(国标SM4、XOR加密、m7s加密流)
• 支持裸流(H264+H265)
• 支持Fmp4格式(H264+H265)
• 支持mpeg-ts格式(H264+H265)
• 支持mpeg(ps)格式(H264+H265)
• 支持阿里云Web Rtc播放 阿里云Web Rtc

回放流

• 支持音视频回放流（TF卡流）的国标 GB28181 国标协议介绍
• 支持音视频回放流（TF卡流）的部标 GA/T1078部标协议介绍
• 支持音视频回放流（TF卡流）的倍数播放，支持2/4/8/16/32/64倍数控制，支持设置多少倍之后只解码I帧播放。
• 支持音视频回放流（TF卡流）UI控件的底部24小时进度条，并支持精度控制，提供事件回调，方便全屏模式下操作。
• 支持音视频回放流（TF卡流）UI控件的底部固定时长进度条，并支持精度控制，提供事件回调，方便全屏模式下操作。
• 支持音视频回放流（TF卡流）支持不规则码流，支持配置根据流的码率动态显示，也支持配置按照固定的码率显示。
• 支持音视频回放流（TF卡流）支持支持缓存流数据（对于存在有些流会在一倍率的情况下一下子以2倍甚至4倍的速率推送的情况）

语音通话（采集麦克风数据）

• 设置编码格式PCM/G711A/G711U
• 设置采样率16000Hz或8000Hz
• 设置采样位数32位或16位或8位
• 设置声道单声道或双声道
• 设置rtp包封装
• 设置jtt包解封装

音频播放器

协议

• 支持 ws-flv 协议
• 支持 http-flv 协议
• 支持 webrtc 协议

格式

• 支持AAC音频
• 支持MP3音频
• 支持PCMA(G711A)音频
• 支持PCMU(G711U)音频

点播文件(支持两种点播格式)

• 支持MP4格式点播文件播放（支持H264和H265编码格式👍🏻）。
• 支持HLS格式点播文件播放（支持H264和H265编码格式👍🏻）。
• 支持硬解码(MediaSource、Webcodec)和软解码(Wasm,Wasm(simd))。
• 支持软解码（Wasm,Wasm(simd)）多线程解码。👍🏻
• 支持支持加密文件(国标SM4、XOR加密、m7s加密)。
• 支持分析MP4格式点播文件里面SEI数据，并提取出来，通过事件回调给业务层使用。
• 支持分析HLS格式点播文件里面SEI数据，并提取出来，通过事件回调给业务层使用。
• 支持播放MP4的MOOV后置文件(👍🏻)
• 支持跳过解码异常的帧，继续播放。

PRO和开源版对比

http://jessibuca.monibuca.com/pro.html#%E5%BC%80%E6%BA%90%E7%89%88%E4%B8%8Epro-%E5%B7%AE%E5%BC%82%E6%80%A7

PRO DEMO 列表

• https https://jessibuca.com/pro-demo.html
• http http://jessibuca.monibuca.com/pro-demo.html

PRO AI 能力

• 人脸识别 链接
• 物品识别 链接
• 黑屏、绿屏、花屏、马赛克检查 链接
• 遮挡物检查 链接

PRO 扩展模块

• Mp4 录制（MPEG-4）(支持音视频) 链接
• 直播流、回放(录像)流下载（录制）器 链接
• VR 全景播放器(支持直播流、点播文件) 链接

LiveVideoStack 分享

• 掘金
• CSDN
• 知乎

体验地址

Jessibuca 开源版

• https Link: https://jessibuca.com/player.html
• http Link: http://jessibuca.monibuca.com/player.html

Jessibuca Pro

• https Link: https://jessibuca.com/player-pro.html
• http Link: http://jessibuca.monibuca.com/player-pro.html

性能测试情况

网友百鸣的测评

https://blog.csdn.net/huapeng_guo/article/details/124385345

性能测试情况（Pro）

单路

多路

多路-16路-内存消耗

多路-12路-低延迟

多路-24路-720p-1080p

本地测试

• 执行 yarn 或者 npm i
• 执行 yarn dev 或者 npm run dev

API

API

Document/Question 文档/答疑

DOC

DEMO

Demo

HTTP 地址

http://jessibuca.monibuca.com/

HTTPS 地址

https://jessibuca.com

不卡系列

• Monibuca(纯 Go 开源一站式流媒体服务器开发框架)
• Rebebuca(强大的运行配置管理工具)

友情链接

• Mediainsight(媒体格式在线分析)

源码目录结构

• wasm/obj 存放 emscripten 编译好的 ffmpeg 解码库的字节码库
• dist 存放编译输出的 js 和 wasm 文件
• src 存放 js 源码

打包 js

执行 yarn build 或者 npm run build

引用关系

• jessibuca.js 是业务 js 代码
• decoder.js 是 worker 进程跑的负责音视频解码的 js 代码
• decoder.wasm 是 decoder.js 的胶水代码

编译 C++ 代码

执行yarn build:wasm 或者 npm run build:wasm

基本原理

star

支持作者

第一作者

V3版本作者

群

qq频道