简介这是一款轻量级无插件网页视频播放器面向安防监控系统开发者、前端音视频工程师及嵌入式Web应用实践者解决传统浏览器中实时流媒体播放、动态图像标注与本地录制截图等多场景协同需求。资源包共18个文件含11个JavaScript核心逻辑文件如jessibuca.js、index.js、decoder.js、2个CSS样式文件、1个WASM解码模块、1个HTML入口页、1个PNG图标、1个MSI安装包及1个README说明文档整体27.89MB结构清晰便于快速集成与二次开发。已有265人学习下载。用户可直接部署运行获得支持WS流的音视频播放能力并完整实现三类图像绘制功能方格子用于移动目标检测框选、不透明方框实现隐私区域遮挡、透明方框定义ROI分析区域同时内置录像与截图工具链源码开放适合作为监控前端SDK或教学演示原型。1. 一个不依赖浏览器插件的纯 Web 视频播放器为什么它能在现代 Chrome/Firefox/Edge 上直接跑 WS 流并实时绘图你可能已经遇到过这类场景在安防监控大屏系统里需要在网页端直接接入 WebSocket 视频流如 H.264 over WS但又不能要求用户安装任何浏览器扩展、ActiveX 或 NPAPI 插件同时还要在视频画面上叠加方格子做移动侦测标定、用半透明方框圈出 ROI 区域、甚至用不透明黑框遮挡敏感区域——所有这些操作必须在播放过程中实时完成且截图/录像结果需保留绘制层。这个noPlugin-video2项目就是为解决这一整套需求而生的轻量级方案。它不走 MSEMedia Source Extensions兼容老路也不依赖 WebRTC 信令协商而是基于jessibuca.js这一成熟 WebAssembly 解码内核通过decoder.wasm在主线程外完成 H.264 帧解码并将 YUV 数据交由 Canvas 2D 上下文进行像素级绘制与图层合成。整个流程完全运行在标准 HTML5 环境中实测兼容 Chrome 90、Firefox 85、Edge 95对 WebGL 支持无硬性依赖适合部署在国产化终端或受限网络环境下的嵌入式 Web 监控前端。2. 核心技术选型解析为何选用 jessibuca 而非 hls.js / flv.js / video.js2.1 jessibuca 的定位与不可替代性jessibuca 并非通用流媒体播放器而是专为「低延迟、高可控性、强自定义渲染」设计的 WebAssembly 解码框架。它与 hls.js基于 MSE、flv.js基于 MSE JS 解码存在本质差异hls.js依赖 HLS 协议分片与浏览器原生 MSE 缓冲延迟通常 ≥8s且无法干预解码后帧数据flv.js虽支持 FLV over WebSocket但 JS 解码 CPU 占用高4K 流易卡顿且不支持 H.264 Annex B 格式裸流video.js是播放器 UI 框架底层仍需对接 hls.js/flv.js无法绕过 MSE 限制。而 jessibuca 直接接收 WebSocket 传来的原始 H.264 Annex B NALU 流常见于 GB28181、海康 EHOME、自研流媒体服务器在 WebAssembly 模块中完成 SPS/PPS 解析、IDR 帧同步、CABAC 解码输出 RGBA 像素数组交由 JavaScript 控制 Canvas 绘制节奏。这意味着✅ 可精确控制每一帧渲染时机实现 500ms 端到端延迟✅ 可在解码后、绘制前插入任意图像处理逻辑如灰度化、边缘检测✅ 可多图层叠加视频底图 绘制图层Canvas 2D 文字标注图层DOM提示本项目中的decoder.wasm对应 jessibuca v3.7.0 版本已预编译为 x86_64 架构无需额外构建。若需适配 ARM64如树莓派 Web 端需重新编译 WASM 模块并替换。2.2 项目结构与关键文件职责拆解从noPlugin-video2.rar解压后的目录结构可看出其极简设计哲学├── app.js # 主应用入口初始化 Jessibuca 实例、绑定 DOM 元素、注册事件回调 ├── decoder.js # jessibuca 核心 JS 封装层加载 decoder.wasm、管理解码上下文、暴露 onVideoData 回调 ├── jessibuca.js # jessibuca 官方 SDK精简版含 WebSocket 连接、NALU 解包、WASM 初始化逻辑 ├── index.html # 唯一 HTML 页面含 canvas idvideo-canvas 与绘制控制按钮 ├── index.css # 基础样式固定 canvas 尺寸、隐藏滚动条、按钮布局 ├── index.js # 用户交互逻辑监听“画方格”“画遮挡框”等按钮调用绘图 API ├── slider/ # 滑动条组件用于亮度/对比度调节本项目未启用但源码预留接口 ├── js/jquery-1.9.1.min.js # 仅用于 DOM 操作简化非必需可替换为原生 querySelector └── readme.txt # 部署说明Node.js 启动方式、WS 地址格式、参数含义其中app.js是业务胶水层它不参与解码只负责创建new Jessibuca()实例并配置wsUrl、autoPlay、fitVideo等参数绑定onVideoData回调在每帧解码完成后获取Uint8Array像素数据将像素数据写入canvas.getContext(2d)的 ImageData触发重绘注册onStart/onStop/onError事件用于 UI 状态同步如“连接中…”提示。2.3 WebSocket 流协议适配要点如何构造合法的 H.264 Annex B 流jessibuca 要求服务端推送的 WebSocket 消息必须是原始 H.264 Annex B 格式即每个消息体以0x00 0x00 0x00 0x01start code开头后接完整 NALU如 SPS、PPS、IDR、P 帧。常见错误包括❌ 使用 Base64 编码后再发给前端jessibuca 接收的是二进制 ArrayBuffer❌ 将多个 NALU 合并为一个 WebSocket message必须单 NALU 单消息❌ SPS/PPS 未在首帧前发送导致解码器无法初始化。正确服务端伪代码Node.js ws 库// 假设 videoStream 是 H.264 编码器输出的 Buffer 流 videoStream.on(data, (chunk) { // 确保 chunk 是 Annex B 格式以 00 00 00 01 开头 if (chunk.length 4 chunk[0] 0x00 chunk[1] 0x00 chunk[2] 0x00 chunk[3] 0x01) { // 直接发送二进制 Buffer ws.send(chunk, { binary: true }); } });注意index.html中的wsUrl默认为ws://localhost:8080/live/stream1若服务端使用 HTTPS则必须改为wss://且证书需被浏览器信任否则 WebSocket 连接会被静默拒绝。3. 图像绘制功能实现三种方框的 Canvas 2D 渲染逻辑与坐标映射3.1 绘制坐标系与视频分辨率适配原理jessibuca 默认将解码后的视频帧缩放至canvas元素尺寸如 1280×720但原始视频分辨率如 1920×1080仍保留在jessibuca.videoWidth/jessibuca.videoHeight属性中。因此所有绘制操作必须进行设备像素比devicePixelRatio校正和缩放比例映射否则鼠标点击位置会严重偏移。核心映射公式// 获取 canvas 实际渲染尺寸CSS 像素 const canvas document.getElementById(video-canvas); const rect canvas.getBoundingClientRect(); const scaleX canvas.width / rect.width; // canvas 内部像素宽 / CSS 显示宽 const scaleY canvas.height / rect.height; // canvas 内部像素高 / CSS 显示高 // 将鼠标事件 clientX/clientY 转为 canvas 内部坐标 function getCanvasPoint(e) { const x (e.clientX - rect.left) * scaleX; const y (e.clientY - rect.top) * scaleY; return { x, y }; }3.2 方格子Grid绘制用于移动侦测标定的等距分割线方格子功能在index.js中通过drawGrid()函数实现其本质是在 Canvas 2D 上绘制水平/垂直线段。关键参数来自readme.txt中的配置项参数名默认值说明gridSize64每个方格的像素宽度原始分辨率下gridOpacity0.3线条透明度0~1gridColor#00ff00线条颜色实际绘制时需将gridSize按缩放比转换function drawGrid(ctx, videoWidth, videoHeight, canvasWidth, canvasHeight) { const scale canvasWidth / videoWidth; // 假设等比缩放 const gridStep Math.round(64 * scale); // 64px 原始尺寸 → 当前 canvas 步长 ctx.strokeStyle rgba(0, 255, 0, 0.3); ctx.lineWidth 1; // 绘制垂直线 for (let x 0; x canvasWidth; x gridStep) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvasHeight); ctx.stroke(); } // 绘制水平线 for (let y 0; y canvasHeight; y gridStep) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvasWidth, y); ctx.stroke(); } }提示方格子仅在canvas的 2D 上下文中绘制不影响视频帧像素数据因此截图时若需保留方格必须在截图前调用drawGrid()否则截图内容仅为原始视频画面。3.3 不透明方框Mask Box与透明方框ROI Box的差异化实现两种方框均采用鼠标拖拽交互但渲染逻辑截然不同类型用途渲染方式是否影响截图不透明方框隐私遮挡如人脸、车牌ctx.fillStyle rgba(0,0,0,1)fillRect()✅ 截图时保留遮挡效果透明方框ROI 区域选择如行为分析范围ctx.strokeStyle rgba(0,192,255,0.7)strokeRect()lineWidth2❌ 截图时不显示仅用于前端标记index.js中的startDrawingBox()函数根据boxTypemask 或 roi设置不同样式function startDrawingBox(boxType) { isDrawing true; currentBox { x: 0, y: 0, width: 0, height: 0, type: boxType }; canvas.addEventListener(mousemove, onMouseMove); canvas.addEventListener(mouseup, onMouseUp); } function onMouseMove(e) { if (!isDrawing) return; const point getCanvasPoint(e); currentBox.width point.x - currentBox.x; currentBox.height point.y - currentBox.y; } function onMouseUp() { isDrawing false; // 将当前方框加入 boxes 数组供后续重绘 boxes.push({...currentBox}); currentBox null; }重绘函数renderBoxes()在每一帧onVideoData回调后执行function renderBoxes(ctx) { boxes.forEach(box { if (box.type mask) { ctx.fillStyle rgba(0, 0, 0, 1); // 完全不透明 ctx.fillRect(box.x, box.y, box.width, box.height); } else if (box.type roi) { ctx.strokeStyle rgba(0, 192, 255, 0.7); // 半透明蓝边 ctx.lineWidth 2; ctx.strokeRect(box.x, box.y, box.width, box.height); // ROI 框内部不填充保持视频可见 } }); }3.4 录像与截图功能的底层机制Canvas toBlob 与 MediaRecorder 的协同本项目提供两种录制方式分别对应不同需求截图Screenshot调用canvas.toBlob()直接导出当前帧含所有绘制图层document.getElementById(screenshot-btn).addEventListener(click, () { canvas.toBlob((blob) { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download screenshot-${Date.now()}.png; a.click(); URL.revokeObjectURL(url); }, image/png); });✅ 优点简单可靠100% 保留绘制内容⚠️ 注意若视频未播放canvas 为空白截图将为黑图需确保onVideoData已触发至少一次。录像Recording使用MediaRecorderAPI 录制canvas.captureStream()输出的 MediaStreamlet mediaRecorder; let recordedChunks []; function startRecording() { const stream canvas.captureStream(30); // 30fps mediaRecorder new MediaRecorder(stream, { mimeType: video/webm }); mediaRecorder.ondataavailable (e) { if (e.data.size 0) recordedChunks.push(e.data); }; mediaRecorder.start(); } function stopRecording() { mediaRecorder.stop(); mediaRecorder.onstop () { const blob new Blob(recordedChunks, { type: video/webm }); const url URL.createObjectURL(blob); // 下载逻辑同截图 }; }✅ 优点生成标准 WebM 视频可直接播放⚠️ 注意captureStream()在 Safari 中需开启实验性功能且录制帧率受requestAnimationFrame节流影响建议在onVideoData回调中手动触发ctx.putImageData()后再调用captureStream().getVideoTracks()[0].requestFrame()确保关键帧捕获。4. Node.js 本地服务启动与调试技巧快速验证 WS 流与绘制功能4.1 使用内置 Node.js 服务模拟流媒体服务器项目附带node-v14.12.0-x64.msi安装包表明其设计为开箱即用的本地开发环境。app.js中的http.createServer启动了一个静态文件服务并内置了简易 WebSocket 中继逻辑ws模块需手动安装# 1. 安装依赖 npm install ws # 2. 启动服务默认端口 8080 node app.js # 3. 访问 http://localhost:8080/index.html此时index.html中的wsUrl指向ws://localhost:8080/live/stream1而app.js的 WebSocket 服务会监听该路径并将收到的测试帧如test.h264文件转发给前端。若需替换为真实流只需修改app.js中的wsServer.on(connection)回调接入你的流媒体源。4.2 常见连接失败排查清单当页面显示“连接失败”或 canvas 黑屏时按以下顺序检查检查项验证方法修复方式WebSocket 连接状态浏览器开发者工具 → Network → Filterws→ 查看连接是否为101 Switching Protocols确保服务端ws模块正确监听防火墙未拦截 8080 端口WASM 加载失败Console 中搜索decoder.wasm→ 是否报404或net::ERR_ABORTED检查decoder.wasm文件路径是否与decoder.js中fetch(decoder.wasm)一致建议使用绝对路径/decoder.wasmCanvas 尺寸异常console.log(canvas.width, canvas.height)→ 是否为 0 或远小于预期在index.css中显式设置#video-canvas { width: 1280px; height: 720px; }并在app.js初始化后调用canvas.width 1280; canvas.height 720;绘制图层被覆盖右键检查元素 → 查看canvas是否被其他 DOM 元素如div.slider遮挡在index.css中为#video-canvas添加z-index: 10; position: relative;4.3 快速注入测试帧用 Python 脚本模拟 H.264 流推送若无现成流媒体服务器可用以下 Python 脚本读取本地.h264文件并逐帧推送至 WebSocket# send_h264.py import asyncio import websockets import struct async def send_stream(): uri ws://localhost:8080/live/stream1 async with websockets.connect(uri) as websocket: with open(test.h264, rb) as f: while True: # 读取一个 NALU以 00 00 00 01 开头 header f.read(4) if not header or header ! b\x00\x00\x00\x01: break # 读取剩余 NALU 数据假设长度 64KB data f.read(65535) await websocket.send(header data) await asyncio.sleep(0.033) # ~30fps asyncio.get_event_loop().run_until_complete(send_stream())运行前确保test.h264是标准 Annex B 格式可用ffprobe test.h264验证然后执行pip install websockets python send_h264.py此时刷新index.html即可看到测试视频流与方格子/方框绘制同步生效。5. 生产环境部署优化减少首屏加载时间与内存泄漏防护5.1 WASM 模块懒加载与预编译缓存decoder.wasm文件大小约 1.2MB直接内联会导致首屏阻塞。优化方案是将其改为异步加载并利用浏览器Response.arrayBuffer()缓存// 修改 decoder.js 中的 wasm 加载逻辑 async function loadWasm() { if (wasmModule) return wasmModule; const response await fetch(/decoder.wasm); const bytes await response.arrayBuffer(); wasmModule await WebAssembly.instantiate(bytes, importObject); return wasmModule; }同时在index.html的head中添加预加载提示link relpreload href/decoder.wasm asfetch typeapplication/wasm crossorigin5.2 绘制图层内存管理避免重复创建 Canvas 2D 上下文index.js中若每次onVideoData都调用canvas.getContext(2d)会持续创建新上下文对象。应改为单例模式// 全局缓存 let canvasCtx null; function initCanvasContext() { const canvas document.getElementById(video-canvas); if (!canvasCtx) { canvasCtx canvas.getContext(2d); // 设置抗锯齿关闭提升绘制性能 canvasCtx.imageSmoothingEnabled false; } return canvasCtx; } // 在 onVideoData 中复用 function onVideoData(data) { const ctx initCanvasContext(); const imageData ctx.createImageData(canvas.width, canvas.height); // ... 复制 data 到 imageData.data ctx.putImageData(imageData, 0, 0); renderBoxes(ctx); // 复用同一 ctx }5.3 截图/录像文件命名策略防止覆盖与便于归档生产环境中需为截图和录像添加唯一标识。推荐在index.js中集成时间戳与会话 IDfunction generateFileName(prefix, type png) { const now new Date(); const sessionId localStorage.getItem(sessionId) || Math.random().toString(36).substr(2, 9); const timestamp ${now.getFullYear()}${String(now.getMonth()1).padStart(2,0)}${String(now.getDate()).padStart(2,0)}_${String(now.getHours()).padStart(2,0)}${String(now.getMinutes()).padStart(2,0)}${String(now.getSeconds()).padStart(2,0)}; return ${prefix}_${sessionId}_${timestamp}.${type}; } // 使用示例 canvas.toBlob((blob) { const filename generateFileName(screenshot, png); // ... 下载逻辑 }, image/png);此策略确保同一设备多次截图不会覆盖且可通过sessionId关联同一监控会话的所有媒体文件便于后续日志审计与回溯分析。本文还有配套的精品资源点击获取