简介myojs-emg 是一套基于 Myo 臂章 EMG 数据进行可视化的 JavaScript 项目面向生物信号处理学习者、前端开发者与人机交互研究人员。项目借助 MyoJS 库将肌电传感器采集的实时肌肉电信号转化为动态图表帮助直观理解肌肉收缩活动与手势识别之间的对应关系适用于熟悉 Web 技术、希望拓展硬件数据可视化技能的开发者。压缩包共 69 个文件包含核心 JS 库与源码、html 示例页面、md 说明文档、json 配置以及图表辅助工具等整体仅 652KB目录结构清晰便于按需阅读与快速运行。已有 247 人学习下载资源完整覆盖了从设备连接、数据解析到可视化呈现的整个开发链路。研读源码与示例可掌握 MyoJS API 调用、EMG 实时处理、浏览器端图表渲染以及将可穿戴设备数据集成到前端应用的设计思路。1. myojs-emg把 Myo 臂章的 EMG 数据在浏览器里画出来拿到 Myo 臂章之后第一件让人头疼的事不是采集而是看不到数据。绝大多数开发者第一反应是去找桌面版调试工具但 myojs-emg 这个资源包走的是另一条路直接用 JavaScript 通过 Web Bluetooth 读取臂章上 8 个 EMG 通道的原始信号并在网页里实时渲染成波形和热力图。它适合两类人一类是刚拿到臂章、想先验证传感器是不是正常的初学者另一类是已经在做手势识别但又不想反复编译原生代码的前端工程师。它的价值在于把「数据能不能读出来」这个黑匣子打开让你在五分钟内看到自己的肌肉收缩在浏览器里变成跳动的曲线。2. Myo 臂章的 EMG 数据长什么样先搞懂 8 通道字节流2.1 8 个传感器与两套更新率Myo 臂章的核心是 8 个金属传感器环形分布在臂章内侧紧贴前臂皮肤。每一个传感器采集的是局部肌肉区域的动作电位叠加信号不是针电极那种精确到单根肌纤维的信号所以它的本质是「皮肤表面的粗粒度 EMG」。这 8 个通道的位置固定但每个人前臂粗细和佩戴角度不同同一通道在不同人身上对应的肌肉未必相同。这个特性决定了后续可视化时不要过度依赖某个通道的绝对数值而要看相对变化趋势。数据更新率是第一个需要确认的参数。Myo 臂章在普通模式下 EMG 特征大约以 50Hz 的频率推送在快速模式下可以跑到 200Hz 左右。但 Web Bluetooth 实际能拿到的推送频率还取决于浏览器实现和蓝牙链路的负载。常见做法是先把数据打上时间戳然后按收到的时间间隔估算实际采样率而不是硬编码一个 50Hz。如果你后续要做频域分析或手势分类采样率漂移会直接影响结果所以可视化层面可以不管但数据记录层面一定要记录每个样本的相对到达时间。2.2 一帧数据拆开看int8、通道顺序与符号扩展Myo 臂章通过 BLE 特征值上报 EMG 数据时一次通知携带一个采样点。这个采样点对应 8 个通道的瞬时值每个通道用一个有符号 8 位整数表示范围是 -128 到 127。所以一帧有效数据正好是 8 字节。如果你在特征值回调里拿到一个 ArrayBuffer长度是 8 的倍数那说明可能一次推送里包含了多个采样点如果长度正好是 8那就是单帧数据。字节顺序在这里不构成问题因为 int8 一个字节就表示一个完整数据不存在高低字节拆分。真正容易踩坑的是符号扩展。有些人习惯用data.getUint8(i)去读结果负值全部变成了 128 到 255 的大正数画出来的波形看起来像是在 200 上下剧烈跳动。正确做法是getInt8(i)这样 -128 到 127 的原始语义才能保留下来。通道顺序方面Myo 官方 SDK 文档里定义的是传感器 0 到传感器 7 按臂章上的物理位置排列对应数据帧里的第 0 字节到第 7 字节。myojs-emg 的资源包里直接把这一层封装成了emgFrameToChannels函数你不需要再手动加偏移。但有经验的开发者最好自己实现一遍解析逻辑这样后续遇到异常数据时能快速定位是硬件问题还是解析问题。2.3 为什么原始数据不能直接画很多人第一次把 EMG 波形画出来时会觉得「都是一堆毛刺」怀疑是不是信号坏了。这其实是正常现象。皮肤表面的 EMG 信号本身幅值很小通常只有几十微伏到几毫伏而 Myo 臂章内部的模拟前端已经做了放大和增益调节输出到蓝牙的 int8 数值是放大后的结果。问题是这个数值包含直流偏置、工频干扰和运动伪迹直接画出来会看到一个明显的中线漂移和密集成团的毛刺。所以标准做法是原始 int8 值先进入一个滑动窗口然后做两个处理。第一是去直流偏置用当前窗口内的均值减去原始值这样波形会围绕 0 上下波动。第二是归一化把去偏置后的值除以窗口内的最大绝对值映射到 -1 到 1 之间。这样才能让不同人的不同肌肉强度在同一个坐标轴下比较。myojs-emg 的可视化部分已经内置了这套处理但你得明白它为什么存在——直接画原始值只是在看 ADC 输出而不是在看有用的肌电活动。3. 用 JavaScript 把数据读进来Web Bluetooth 连接与帧解析3.1 连接 Myo 臂章的浏览器前置条件Web Bluetooth 不是所有浏览器都支持。在动手之前先确认你用的是支持这个 API 的内核浏览器。其次连接必须由用户手势触发也就是用户必须点击页面上的按钮后才能真正调用requestDevice这是浏览器安全策略无法绕过。第三蓝牙适配器必须处于开启状态。听起来像废话但实际开发中很多「找不到设备」的报错其实是电脑蓝牙被飞行模式关掉了。连接代码的骨架是这样async function connectMyo() { const device await navigator.bluetooth.requestDevice({ filters: [{ services: [MYO_SERVICE_UUID] }], optionalServices: [MYO_EMG_SERVICE_UUID] }); const server await device.gatt.connect(); const service await server.getPrimaryService(MYO_EMG_SERVICE_UUID); const emgChar await service.getCharacteristic(MYO_EMG_CHAR_UUID); await emgChar.startNotifications(); emgChar.addEventListener(characteristicvaluechanged, onEmgData); return device; }这段代码的逻辑是先请求用户选择设备然后建立 GATT 连接再拿到 EMG 对应的服务和特征开启通知并挂监听。这里的关键参数是MYO_SERVICE_UUID和MYO_EMG_CHAR_UUID它们在不同固件版本的 Myo 臂章上有差异。我一般会写一个config.js把常见固件版本的 UUID 放在一个映射表里由用户在连接前选择自己的固件版本。不要问「既然 Myo 停产了为什么还要纠结 UUID」因为很多二手工具有不同批次你要么抓包确认要么信任资源包里整理好的对照表。3.2 从特征值回调里拿到 16 字节原始帧有开发者期望一次回调就是一个干净完整的数据帧但实际上 BLE 底层可能做分包或合并。你收到的DataView长度不一定是 8也可能是 16、24 或者 7分包时最后一包不完整。这里需要做一个缓冲区累积和拆帧。常见做法是维护一个pendingBuffer把每次收到的字节拼上去然后循环取完整帧处理。let pendingBuffer new Uint8Array(0); function onEmgData(event) { const incoming new Uint8Array(event.target.value.buffer); const combined new Uint8Array(pendingBuffer.length incoming.length); combined.set(pendingBuffer); combined.set(incoming, pendingBuffer.length); let offset 0; const frames []; while (offset 8 combined.length) { frames.push(combined.slice(offset, offset 8)); offset 8; } pendingBuffer combined.slice(offset); frames.forEach(parseFrame); }这里的核心是while循环它保证不丢帧、不拆错帧。pendingBuffer保存的是上一次剩余的不完整数据等下一次通知到达时再拼接。实际使用中Myo 臂章通常一次通知就是一个完整帧所以这个逻辑更多是防御性设计但一旦遇到丢包重传或系统调度波动你就知道它的价值了。3.3 解析成 8 通道数组并做滑动窗口缓存拿到完整 8 字节帧后解析到通道数组本身就很简单。但为了让可视化不卡顿建议直接把它推进一个环形缓存。我用channelHistory保存最近 500 帧按 50Hz 估算正好是 10 秒的窗口。每个通道独立维护一个数组数组满了就shift()掉最旧的数据。const bufferSize 500; const channelHistory Array.from({ length: 8 }, () []); function parseFrame(frame) { const samples []; const view new DataView(frame.buffer); for (let ch 0; ch 8; ch) { samples.push(view.getInt8(ch)); } for (let ch 0; ch 8; ch) { channelHistory[ch].push(samples[ch]); if (channelHistory[ch].length bufferSize) { channelHistory[ch].shift(); } } return samples; }channelHistory的长度直接决定可视化的时间轴宽度。如果你想看 3 秒内的精细波形可以把bufferSize设成 150如果想看手势发力过程中的长趋势可以设成 1000。需要注意shift()是 O(n) 操作500 的长度影响不大但如果超过 5000建议改成环形索引维护否则会明显掉帧。myojs-emg 里默认是 500我建议你自己试一次 1000感受一下不同窗口对应的认知差异。4. 可视化Canvas 波形图与通道热力图4.1 波形图用 requestAnimationFrame 把缓存画出来Canvas 画波形并不复杂关键是不要让每个数据点都触发重绘而是用统一的requestAnimationFrame循环每 16ms 左右刷新一次。这样即使蓝牙通知频率是 200Hz渲染频率也保持稳定。const canvas document.getElementById(emg-canvas); const ctx canvas.getContext(2d); function drawWave() { ctx.clearRect(0, 0, canvas.width, canvas.height); const amp canvas.height / 2 / 8 - 4; for (let ch 0; ch 8; ch) { const data channelHistory[ch]; if (data.length 2) continue; const baseY (ch 0.5) * (canvas.height / 8); ctx.beginPath(); data.forEach((value, index) { const x (index / bufferSize) * canvas.width; const y baseY - (value / 128) * amp; if (index 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); }); ctx.strokeStyle hsl(${ch * 36}, 80%, 55%); ctx.lineWidth 1; ctx.stroke(); } requestAnimationFrame(drawWave); }这段代码把 8 个通道均匀分布在画布垂直方向上每个通道有自己的基线波形上下摆动。amp的取值是画布高度的一半再除以 8留出通道间间隙。为什么要除以 128因为原始值范围是 -128 到 127除以 128 后映射到 -1 到 1。如果你做了去偏置这里要改成除以滑动窗口的最大绝对值防止信号太强或太弱导致波形溢出或者缩成一条直线。4.2 热力图8 通道强度映射成色块波形图适合观察单通道细节但看整体发力模式时热力图更直观。每一列代表一个时间点每一行代表一个通道颜色深浅表示当前时刻的肌肉收缩强度。实现时我直接复用channelHistory不需要额外数据源。function drawHeatmap() { const cellW canvas.width / bufferSize; const cellH canvas.height / 8; for (let ch 0; ch 8; ch) { const data channelHistory[ch]; for (let i 0; i data.length; i) { const normalized Math.abs(data[i]) / 128; const intensity Math.min(1, normalized * 2); const r Math.round(255 * intensity); const g Math.round(50 * (1 - intensity)); const b Math.round(255 * (1 - intensity)); ctx.fillStyle rgb(${r}, ${g}, ${b}); ctx.fillRect((i / bufferSize) * canvas.width, ch * cellH, cellW 0.5, cellH); } } }这里我做了normalized * 2意思是把绝对值小于 64 的信号都视为低强度在色块上呈现偏蓝绿色只有高强度收缩才转成红色。这个阈值不是固定的你可以根据自己手臂的实际信号幅度调整。常见做法是先握拳再放松观察波形最大幅值然后把normalized的分母改成这个实测峰值这样热力图的动态范围更合理。4.3 采样率与滤波先归一化再画不然全是噪声如果你直接把原始值丢给热力图会发现整个画面都在闪烁人眼看不出发力模式。原因有两个一是工频 50/60Hz 干扰会在波形上叠加周期性毛刺二是肌肉收缩时信号本身就不是持续高幅值而是高频振荡人眼需要求能量包络才能看懂。正确的做法是先做滑动平均滤波把高频振荡的光滑后展示。滤波窗口大小可以选 5 到 10 帧在 50Hz 采样率下对应 100 到 200ms 的时间常数。窗口太短滤不干净太长会模糊发力瞬间。我一般用 7 帧窗口几乎感受不到延迟。function smooth(values, windowSize 7) { const out []; for (let i 0; i values.length; i) { let sum 0; let count 0; for (let j Math.max(0, i - windowSize 1); j i; j) { sum values[j]; count; } out.push(sum / count); } return out; }这个函数是因果滤波它只用当前时刻之前的数据不会引入未来数据所以实时可视化时不会出现「预测未来」的错觉。要注意的是滤波后的values要与原始channelHistory分开保存否则你会看到波形整体变迟钝。myojs-emg 里默认在绘制前对channelHistory做一次smooth这件事在实际项目中应该由绘制层触发而不是在数据接收时触发。5. 避坑记录连接掉线、零数据与解析错位的 5 个血泪经验5.1 现象点击连接按钮后浏览器设备列表里永远看不到 Myo 臂章原因Myo 臂章的 BLE 广播把主服务 UUID 放在了特定字段而requestDevice的 filters 里如果写错或漏写optionalServices设备可能被浏览器过滤掉。另一个常见原因是臂章进入了休眠状态指示灯不闪时它不会广播。解决先确认臂章在充电或最近活动过处于可发现状态。然后在 filters 里同时尝试主服务 UUID 和空 filters空 filters 会列出附近所有 BLE 设备。我看见你的设备后再用device.gatt.connect连接连接失败会拿到更具体的错误码。资源包里的配置表覆盖了多个固件版本直接把对应 UUID 填进去即可。5.2 现象连接成功数据回调也在触发但 8 个通道全部是 0原因这是最误导人的情况。回调存在说明 BLE 链路正常但数据全 0 很可能是臂章没有紧贴皮肤或者传感器表面有污渍导致电极接触阻抗过高。还有一个可能是系统把臂章识别成了「已连接但待机」需要活动一下手臂唤醒。解决先把臂章摘下来用干布擦拭 8 个金属触点再重新佩戴确保内侧金属点全部接触皮肤。然后在页面里实时打印原始帧如果仍然全 0就用官方 SDK 连接一次确认硬件是否正常。这一步能把硬件问题和代码问题快速分开。5.3 现象波形每隔几秒忽然跳一大格整体趋势看起来有规律原因这是典型的 BLE 丢包与特征混淆问题。Myo 臂章除了 EMG 特征外还有 IMU加速度计、陀螺仪特征。如果你在代码里把两个特征都addEventListener并且都用同一个回调处理那么 IMU 数据帧长度和数据语义完全不同你的while (offset 8 combined.length)会把 IMU 帧按 8 字节切碎画出奇怪的跳变。解决只给 EMG 特征绑定解析回调或者回到onEmgData里先判断数据长度。EMG 特征的通知长度应该是 8 的倍数而 IMU 特征通常是 10 或 20 字节根据帧头特征不同可以做一级分流。我的习惯是第一时间打印event.target.value.buffer.byteLength先确认长度规律再谈解析。5.4 现象8 条波形看起来正常但所有波形的基线整体偏离 0握拳时波形幅度正常原因这是皮肤表面直流偏置在作怪。EMG 信号经过模拟前端放大后会带上一个与电极接触电位有关的直流分量。不同时间、不同出汗程度这个偏置缓慢漂移。如果不去除热力图会长期显示某一半颜色偏深。解决在绘制前用滑动窗口均值作为估算偏置每个通道独立减去自己的均值。一般取最近 100 帧的均值因为偏置变化速度远低于肌肉收缩速度。这个操作在 myojs-emg 里被抽象成removeDC(channelHistory[ch])实现就是求均值再逐点减。5.5 现象页面关闭后再次打开页面发现蓝牙一直提示被占用或者电脑蓝牙整体卡死原因浏览器标签页关闭时 GATT 连接没有主动断开某些蓝牙适配器在连接未释放时拒绝新的连接请求甚至会让整个蓝牙协议栈进入异常状态需要重启蓝牙才能恢复。解决在visibilitychange事件里监听页面隐藏调用之前保存的device.gatt.disconnect()。同时确保每次connectMyo的连接对象持有全局引用。如果已经卡死把电脑蓝牙关闭再打开通常能恢复。从那以后我每次连接前第一件事是确认没有残留连接再调用requestDevice。6. 进阶玩法录制 10 秒数据回放把可视化变成调试工具实时可视化能验证设备是否正常但做手势识别或算法调参时你需要反复测试同一段数据。myojs-emg 自带的数据回放模式值得用起来先在线录制一段带时间戳的原始帧保存成 JSON再离线重放。重放时不要直接改动绘制函数而是把录制数据按原始时间间隔重新喂给parseFrame这样在线与离线共用同一套数据处理链路不会出现「在线效果好、回放效果差」的差异。我常用的一段回放代码是async function replayFromLog(log) { let lastTs performance.now(); for (const item of log) { const now performance.now(); const wait Math.max(0, item.timestamp - (now - startTime)); await new Promise(resolve setTimeout(resolve, wait)); parseFrame(item.frame); } }这里的item.timestamp是录制时的相对毫秒时间戳frame是 8 字节数组转成的普通数组。逻辑很简单每帧按原始时间间隔等待然后重新进入解析与绘制链路。加一帧setTimeout虽然不够精确但用于回放完全够因为可视化本身已经有 16ms 的渲染节流。如果你希望完全精确定时可以改用requestAnimationFrame驱动每次根据时间差补帧但那样代码复杂度会明显上升。在这个回放基础上你可以顺手做一个最简单的握拳检测记录握拳和放松两个状态各 3 秒数据计算每个通道的滑动 RMS找到差值最大的通道和阈值。之后实时模式下用这个阈值判断手势状态。因为 Myo 臂章已经停产不需要追求复杂分类这个阈值方法足够应付演示与原型验证了。这也引出了我对可视化用途的认识它不是为了好看而是为了让你对数据建立直觉。我见过太多人拿到 EMG 数据就直接上机器学习模型却连握拳时通道 3 和通道 6 的关系都没看过。从那以后每次拿到新的传感器数据我都强制自己先画波形和热力图观察至少 10 分钟再谈建模。这份 myojs-emg 资源包把上面说的连接、解析、可视化和回放都打包好了下载后打开浏览器就能看到自己的肌电信号再自己改一改滤波窗口和阈值就能从「看热闹」进入到「看门道」的阶段。希望帮到你。本文还有配套的精品资源点击获取