企业官网建设流程全解析

Jessibuca PRO AI能力实战：黑屏、绿屏、遮挡实时检测怎么用

【免费下载链接】jessibucaJessibuca 是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。项目地址: https://gitcode.com/langhuihui/jessibuca

Jessibuca 是一款开源的纯 H5 直播流播放器，它通过 Emscripten 将音视频解码库编译为 WebAssembly 运行在浏览器中，无需安装插件即可在 PC、手机、微信中播放直播流。它的 PRO 版本内置了一组独立的 AI 能力模块，其中黑屏、绿屏、花屏、马赛克实时检测与遮挡物检测两项能力，能帮助监控系统、云台摄像机、直播运维场景做到"画面异常自动发现"。本文带你快速上手这两项 AI 能力。

一、先认识 Jessibuca PRO 的 AI 模块

Jessibuca PRO 的 AI 能力有 3 个特点，上手前需要知道：

1. 模块独立：每个 AI 能力都是单独的一套 js + wasm 文件，独立于 Jessibuca PRO 主体加载，不需要就会占用体积；
2. 配合 PRO 使用：AI 模块需要配合 Jessibuca PRO 播放器一起使用；
3. 按需开通：每项 AI 能力单独计费，用哪项开通哪项。

官方文档中对这两项能力的一句话说明是：

利用 OpenCV 实现的黑屏、绿屏、花屏、马赛克检查；利用 OpenCV 实现的遮挡物检查。

也就是说，检测算法基于 OpenCV 编译进 wasm，直接在浏览器里对解码后的画面做分析，不需要把视频传回服务器，检测是纯端侧实时完成的。

相关说明文档可参考：

• demo/pro-ai.md —— PRO AI 模块总览
• demo/pro.md —— PRO 版本功能列表（含 AI 章节）
• demo/pro-demo.md —— PRO 能力演示说明

二、黑屏、绿屏、花屏、马赛克检测怎么用

这是监控场景最实用的能力：摄像头信号丢失时会黑屏，编码器异常时会花屏、出现马赛克，网络丢包严重时会出现绿屏。开启后，播放器会持续分析画面并抛出检测结果事件。

1. 开启检测：3 个配置参数

在创建播放器时，添加以下配置即可：

jessibuca = new JessibucaPro({ container: container, // 关键参数 ↓ useImageDetector: true, // 启用画面检测模块 aiImageDetectActive: true, // 激活检测 aiImageDetectDrop: true, // 检测到异常画面时丢弃该帧不渲染 });

三个参数的区别：

其中aiImageDetectDrop: true是一个很贴心的细节：当画面出现花屏或马赛克时，直接不渲染这一帧，观众看到的始终是最后一帧正常画面，异常自动"消失"了。

2. 监听检测结果事件

检测出异常时，播放器会抛出aiImageDetectResult事件：

jessibuca.on(JessibucaPro.EVENTS.aiImageDetectResult, (result) => { // result.ts：检测到的时间戳 // result.type：异常类型 console.log('检测到异常画面', result.ts, result.type); });

result.type的取值与含义：

拿到事件后，你就可以对接自己的业务：比如弹出告警、写入运维日志、调用摄像头重启接口等。

3. 完整示例在哪看

仓库里提供了开箱即用的演示页面，直接打开就能体验（体验 demo 最多检测 10 分钟）：

• demo/public/pro/demo-ai-check-frame.html —— 画面检测 demo，页面里可以直接勾选"检测到黑屏、绿屏、花屏、马赛克丢弃渲染"，并观察FPS / DFPS性能指标
• demo/public/pro/demo-ai-check-occlusion.html —— 遮挡物检测 demo

三、遮挡物检测怎么用

摄像机被贴纸、布条、纸片遮挡后，画面是"正常的"——既不黑屏也不花屏，常规检测完全发现不了。遮挡物检测就是为这个场景准备的。

1. 配置参数

jessibuca = new JessibucaPro({ container: container, useOcclusionDetector: true, // 启用遮挡检测 aiOcclusionDetectInterval: 0.5, // 检测间隔，单位：秒 });

aiOcclusionDetectInterval是遮挡检测的轮询间隔（秒），demo 页面默认 0.5 秒。间隔越小响应越快、CPU 占用越高，可按业务需求调整。

2. 监听遮挡事件

jessibuca.on(JessibucaPro.EVENTS.aiOcclusionDetectResult, (result) => { // result.ts：被遮挡的时间戳 console.log('画面被遮挡，ts：', result.ts); });

当检测画面大部分区域被静态遮挡物覆盖时，事件就会触发。典型用法：

• 云台/球机监控：摄像头被人故意遮挡时自动告警并联动声光报警；
• 直播运维：主播误关镜头、画面被遮挡时实时提醒；
• 多路巡检：配合 demo/public/pro/4x4-demo.html 等多画面 demo，对每一路都开启遮挡检测，异常路自动高亮。

3. 演示页面

遮挡检测 demo 页面中还提供了一个aiOcclusion操作按钮（通过operateBtns.aiOcclusion控制显隐），方便在演示中直观切换。

四、使用限制与注意事项

五、小结

Jessibuca PRO 的 AI 能力把 OpenCV 图像分析放进了浏览器：

• 画面质量检测：useImageDetector+aiImageDetectResult事件，黑屏、绿屏、花屏、马赛克一目了然，还能用aiImageDetectDrop自动丢弃异常帧；
• 遮挡物检测：useOcclusionDetector+aiOcclusionDetectResult事件，按秒级间隔轮询，防"偷拍、遮挡、信号作假"。

两个能力配合使用，就能让 H5 监控大屏、云台页面具备"画面异常实时发现 + 告警"的能力，全程纯浏览器端完成，无需额外部署检测服务。

【免费下载链接】jessibucaJessibuca 是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。项目地址: https://gitcode.com/langhuihui/jessibuca