简介：myojs-emg 是一个基于 MyoJS 库的前端项目，核心功能是将肌电臂章采集到的肌电信号通过浏览器实时转化为可视化图形，帮助开发者直观理解肌肉活动与手势动作之间的对应关系，适合可穿戴设备开发、前端数据可视化及人机交互方向的学习者。压缩包共包含 69 个文件，以 JS 源码、网页示例和说明文档为主，另有配置文件和图片等辅助内容，整体仅 652KB，结构清晰且轻量。该项目已获得 246 人学习，是接触硬件编程与生物信号可视化的简单入口。资源内既提供了完整的项目源码和构建配置，也包含多个可直接运行的浏览器示例，通过图表库将原始肌电数据绘制成动态波形；阅读代码可以学习连接与数据读取方式、实时传感器数据的处理流程，以及如何将复杂的生物电信号封装为友好的可视化界面，具有较好的实践参考价值。 我折腾 Myo 臂章的时候，最苦恼的是没法直观看到 8 通道 EMG 信号到底长什么样。官方面板早就停了，社区工具又多是命令行或者老旧的桌面程序，装起来一堆依赖。后来我基于 myo.js 写了一个小项目，叫 myojs-emg，核心就做一件事：把 Myo 臂章采集到的 EMG 肌电数据实时画到浏览器里，打开网页就能看到 8 条肌肉活动波形。
这篇博文就把整个实现过程、代码思路和踩过的坑完整记录下来。如果你手里也有一块吃灰的 Myo，或者只是想研究肌电信号可视化、想在浏览器里玩 Web Bluetooth，这篇文章应该能帮你节省不少折腾时间。
1. 项目定位与整体设计思路
1.1 为什么还对 Myo 这块停产臂章念念不忘
Myo 臂章是 Thalmic Labs 在 2013 年推出的手势控制设备，2018 年公司被收购之后，产品线基本停摆，官方 SDK 和支持工具也都停止维护了。但它在硬件圈子里一直没有消失，原因很简单：一块能够同时采集 8 通道表面肌电信号、内置九轴姿态传感器、支持 Bluetooth Low Energy（BLE）的臂环式设备，放到现在依然没有特别便宜的替代品，二手市场一两百块钱就能买到，对于做肌电交互原型验证来说是性价比极高的工具。
EMG 信号在这里指的是肌肉收缩时产生的电活动信号，通过皮肤表面的电极就能采集到。Myo 臂章内侧有 8 个不锈钢触点，对应前臂一圈不同位置的肌肉群。当你握拳、张开手指、转动手腕时，不同位置的肌肉会以不同强度收缩，这 8 路信号会呈现不同的波形组合。手势识别的基本逻辑，就是基于这些波形做特征提取和模式分类。
这块臂章最反直觉的地方是：它默认不是持续输出 EMG 数据的，通常每 50 毫秒才推送一次批量数据，而且在没有明显肌肉活动的时候，数据几乎是一条平线，只有主动做手势动作才能看到明显的波动。myojs-emg 的第一版做功能验证时，我一度以为自己拿到了坏设备，后来才发现是姿势不对。
1.2 为什么选择 myo.js + 浏览器方案
当时摆在我面前的可选方案有这么几条：
- 使用控制台日志输出原始数据，只做终端打印，看似简单，但根本没有办法快速理解肌肉活动随时间的变化规律。
- 用 Python + pybluez 读取蓝牙设备数据，再加 matplotlib 画图，这套方案对蓝牙权限和数据格式的处理比较繁琐，跨平台兼容性一般。
- 用浏览器 + Web Bluetooth + myo.js，在页面里直接完成设备配对、数据订阅和 Canvas 动态绘图。
我选了第三条路。一个重要原因是 myo.js 这个开源库本身已经把 Myo 的 GATT 服务、特征值订阅和事件分发做得很完整，开发者只需要调用myo.connect()就能发起蓝牙配对，然后监听emg事件就能拿到 8 通道数据。另一个原因是我后续想跑 TensorFlow.js 做在线手势识别，如果数据链路本身就在浏览器里，可以直接把波形数据喂给模型，不用走本地服务器转发那一套。
1.3 项目文件结构与职责划分
myojs-emg 的整体文件结构很简单，没有引入任何前端构建工具：
myojs-emg/ ├── index.html // 页面结构 + 控制按钮 ├── sketch.js // 主逻辑：蓝牙连接、数据处理、Canvas 绘制 └── vendor/ └── myo.js // myo.js 库文件不使用 Webpack 或 Vite 的理由很实际：myo.js 是一个古老的浏览器全局变量库，硬塞进现代模块化成套工具链反而会产生奇怪的兼容问题，直接全局引入反而最稳定。这个项目本质上是个演示工具，核心价值在数据获取和可视化逻辑，越少依赖越容易跑起来。
2. 环境准备与项目初始化
2.1 硬件与软件清单
在写代码之前，我建议先确认一遍环境，避免后面把时间耗在无关因素上：
| 依赖项 | 版本/要求 | 说明 |
|---|---|---|
| Myo 臂章 | 固件版本 1.5 或以上 | 1.5 以下不支持 EMG 数据流 |
| 电脑 | 支持蓝牙 4.0+ | MacBook 或 Windows 笔记本均可，台式机最好配 USB 蓝牙适配器 |
| Chrome 浏览器 | 版本 80 以上 | Web Bluetooth API 目前只在 Chrome 系浏览器稳定可用 |
| Node.js / Python | 任意可用版本 | 用于启动本地静态服务器 |
版本这里特别说明一下。Web Bluetooth 是一个浏览器层面的 API，不需要额外安装驱动，但低版本固件的 Myo 臂章在 BLE 广播时不会暴露 EMG 特征值，导致emg事件永远不触发。我的第一块臂章固件停在 1.3，后来下载官方固件更新工具升级到 1.5 才算稳定。
2.2 初始化项目与引入 myo.js
最开始我用 npm 安装过一段时间，命令如下：
npm install myo.js但后来发现这个包的版本较旧，目录里包含的文件不够直观，就直接改为从 GitHub 下载 myo.js 的原始脚本放入vendor目录。这样做的另一个好处是，如果遇到奇怪的连接问题，可以直接打开源码定位问题，而不是依赖一个被封装的模块接口。
index.html 只需要最基础的内容：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>myojs-emg - Myo EMG 可视化</title> <style> body { background: #111; color: #eee; font-family: monospace; } canvas { border: 1px solid #333; } </style> </head> <body> <h1>myojs-emg</h1> <button id="connectBtn">连接 Myo</button> <button id="resetBtn">重置波形</button> <canvas id="emgCanvas" width="800" height="420"></canvas> <script src="vendor/myo.js"></script> <script src="sketch.js"></script> </body> </html>这里有一个容易被新手忽略的细节：myo.js必须在sketch.js之前加载，因为 sketch.js 中会直接使用全局的myo对象和Myo构造函数。如果顺序反了，浏览器会报Myo is not defined。
2.3 启动本地服务
由于 Web Bluetooth API 对安全上下文有强制要求，页面必须运行在 HTTPS 或 localhost 环境。直接双击打开index.html文件是不行的，因为文件协议不满足安全上下文要求。
我平时比较快的做法是使用 Python 内置的 HTTP 服务器：
cd myojs-emg python3 -m http.server 8080然后在 Chrome 地址栏输入http://localhost:8080。如果蓝牙设备很多，localhost 也能正常工作，不过建议还是用127.0.0.1更稳。
3. 连接 Myo 与订阅 EMG 数据
3.1 Myo 配对流程
Myo 臂章的配对操作和普通蓝牙耳机不太一样。短按一下臂章上的电源键，而不是长按或快速双击，此时 LED 灯会变成闪烁的蓝色，并进入 BLE 广播状态。如果长按，它会直接关机或进入充电模式，不少初学者会在这里踩坑。
在浏览器里点击页面的“连接 Myo”按钮后，Chrome 会弹出系统蓝牙配对请求，设备列表里一般会显示为MYO或类似名称。选择并完成配对后，页面就能拿到设备访问权限。
3.2 myo.js 核心 API 与事件机制
myo.js 的核心设计是事件驱动。它的基础流程是：myo.connect()发起扫描，成功之后触发connected事件，然后通过myo.on('emg', callback)订阅肌电数据。
最小可用的连接代码类似于这样：
const myo = Myo.create(); myo.on('connected', () => { console.log('Myo 已连接'); }); myo.on('disconnected', () => { console.log('Myo 断开连接'); }); myo.on('emg', (data) => { // data 是长度为 8 的数组，每个元素是 0~255 的整数 console.log(data); }); // 触发浏览器蓝牙配对弹窗 myo.connect();这里解释一个关键点：emg事件数据里的 8 个数字，对应臂章上 8 个电极点的肌肉电活动强度。数值范围是 0 到 255，0 表示几乎无肌肉活动，数值越大说明该位置的肌肉收缩越猛烈。数据并不会连续稳定地推送，Myo 内部以约 200Hz 的频率采集，然后每 50ms 左右批量推送一次。
3.3 订阅 EMG 数据流时必须注意的两个坑
第一个坑是 Myo 的 EMG 数据流默认可能处于关闭状态。在部分固件版本中，需要先发送一个激活流式数据的命令，myo.js 已经封装了myo.streamEMG(true)，在连接成功后调用一次即可。
myo.on('connected', () => { myo.streamEMG(true); // 显式开启 EMG 数据流 });第二个坑是 Myo 会进入休眠状态。如果一段时间没有检测到明显动作，臂章会自动关闭 BLE 连接，这是正常的省电机制。唤醒方式很简单：用力握一下拳头，让肌肉活动强度超过阈值即可。为了调试方便，我通常把连接按钮和重置按钮放在同一个视觉区域，以便快速重连。
4. 可视化实现：从原始数据到动态波形
4.1 数据缓冲与滑动窗口设计
拿到 8 通道原始数据之后，可视化要做的事情本质上是把这些离散点连成一条随时间滚动的波形。为了保证画图逻辑简单且高效，我使用了一个环形缓冲区来保存最近的数据。
const windowSize = 300; // 保存最近 300 批数据 const buffers = Array.from({ length: 8 }, () => new Array(windowSize).fill(0));每来一批 EMG 数据，就把旧数据往前移动一位，在末尾写入新数据。这是最直观的方式，虽然略土，但对于 8 × 300 的数据量来说性能压力完全可控。更复杂的方式是维护循环索引指针，可以避免频繁的数组移动，但代码可读性会下降，这里我选择了简单优先。
4.2 Canvas 绘制 8 路波形的主体逻辑
绘制部分使用 Canvas 2D API，整体流程很常规但有几个细节值得记录。
第一步，为每个通道分配一条水平带状区域，8 条波形垂直排列，互不覆盖。按 Canvas 高度 420px 计算，每条波形的高度可以定为channelHeight = 420 / 8 = 52.5px，实际使用中会略加内边距，避免波形贴住区域边界。
第二步，将通道数据映射到像素坐标。原始数值范围是 0～255，映射方式如下：
const y = channelY + (channelHeight / 2) + ((255 - value) / 255 - 0.5) * channelHeight * 0.9;其中0.9是一个轻微的缩放系数，目的是让波形顶部和底部保留一点视觉留白，不至于强信号时波形直接溢出到相邻通道。
第三步，把所有通道的数据点依次连线。比较推荐的做法是一开始就把ctx.beginPath()包含在循环外面，避免为每个点重复创建路径对象。
function drawWave(channelIndex) { const ch = channels[channelIndex]; ctx.strokeStyle = channelColors[channelIndex % channelColors.length]; ctx.lineWidth = 1.5; ctx.beginPath(); for (let i = 0; i < windowSize; i++) { const x = i / (windowSize - 1) * plotWidth; const y = channelY(channelIndex) + valueToY(ch[channelIndex][i]); if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); }4.3 动态刷新与滚动效果的控制
动态刷新用requestAnimationFrame来做，比setInterval更顺滑，也能避免屏幕刷新率与定时器频率不一致导致的卡顿。在每一帧中，先清空画布，再绘制网格、8 条波形和振幅参考线。
let running = true; function drawLoop() { if (!running) return; ctx.clearRect(0, 0, canvas.width, canvas.height); drawGrid(); for (let i = 0; i < 8; i++) { drawWave(i); } requestAnimationFrame(drawLoop); }有一点必须坦白：不要每接收一批emg事件就立即调用一次绘制函数。因为事件频率约 20Hz 到 50Hz，而浏览器渲染一帧通常需要 16ms 左右，如果每批数据都触发绘制，会在事件堆积时造成绘制队列拥堵。正确做法是让事件处理器只负责往缓冲区里写数据，真正的绘制由独立的requestAnimationFrame循环驱动，这样数据和渲染解耦后，哪怕数据突然爆发，界面也不会糊成一团。
4.4 交互增强与调试辅助功能
为了让自己和身边朋友用起来更顺手，我在原始画波形的基础上加了三项辅助功能：
- 暂停/继续绘制按钮，方便停下来观察某一个手势的波形细节。
- 重置按钮，把缓冲区清空重新开始，避免有旧数据干扰观察。
- 当前振幅指示条，每个通道右侧实时显示最近一批数据的最大值，直观看到哪块肌肉正在发力。
这些功能代码加起来不到五十行，但体验提升非常明显。做信号分析类工具时，最忌讳的就是波形密密麻麻地滚动，而用户既无法暂停也没有参考标尺，最后根本看不出规律。
5. 常见问题与排查实录
理论讲完，接下来是把这套流程跑通时最容易遇到的实际问题。以下问题我基本都亲自遇到过，按出现频率排序整理成表格：
| 问题现象 | 直接原因 | 解决方案 |
|---|---|---|
| Chrome 不弹蓝牙配对窗口 | 页面不是 secure context | 使用 localhost 或 HTTPS 访问 |
| 连接成功但 emg 事件不触发 | 未调用 streamEMG(true) | 连接事件回调中主动开启数据流 |
| 重置按钮后波形不更新 | 数据流中断或臂章休眠 | 握拳唤醒，或重新连接臂章 |
| 波形经常断断续续 | 蓝牙信号干扰或距离过远 | 让 USB 蓝牙适配器离 Myo 1 米以内，避开 WiFi 干扰 |
| 波形数据几乎都是 0 | 臂章未紧贴皮肤 | 调整佩戴位置，确认 8 个金属触点都压在前臂上 |
| Linux 下点击“连接”无反应 | 蓝牙权限或 BlueZ 问题 | 确认 Chrome 有蓝牙访问权限，并重启蓝牙服务 |
5.1 蓝牙连接不稳定，反复断开
这个问题在 Windows 笔记本上最明显。我的一个处理办法是把电脑蓝牙驱动更新到最新版本，然后关闭其他占用蓝牙的设备，比如同时连接的鼠标和音箱。另外一个经验是不要离路由器太近，2.4GHz 频段的 WiFi 信号和蓝牙会互相干扰，导致数据包丢失率升高。
如果频繁断连，也可以通过缩短windowSize来降低视觉影响。波形短了以后，视觉上的空洞和断档会不那么明显。
5.2 连接成功但 emg 事件完全没动静
这个问题有一个特别容易误导人的点：Myo 在没有肌肉活动时确实不推送数据。如果只是把手放在桌上什么都不做，你会以为数据链路是坏的。我当时调试了很久，后来发现只要握拳、张开手指、用力勾手腕，emg 事件就会立刻密集触发。
另外要确认臂章佩戴是否正确。Myo 的金属触点那一面必须贴合皮肤，而且尽量避开骨骼凸起区域。我习惯把小臂内侧比较平坦的位置对应到第一个电极点，这样数据一致性会好很多。佩戴位置不对，数据质量差异极大，这是后续做手势识别时最重要的一条经验。
5.3 波形看起来有明显的锯齿感或卡顿
如果波形图看起来不是平滑的曲线，而是像楼梯一样一顿一顿的，常见原因有两个。
第一个原因是主循环里同时做了太多操作，特别是console.log打印每批数据。监听事件回调里打印日志会严重拖慢浏览器，因为控制台输出本身就是同步的、非常耗时的操作。解决方法是把打印逻辑放到一个节流函数里，或者干脆只在需要调试时才开启。
第二个原因是 Canvas 的宽高设置不正确，导致浏览器对画布做了额外的缩放，绘制分辨率变低。建议在index.html的 CSS 和 JavaScript 中让 Canvas 的width/height属性保持统一，避免使用外扩 CSS 样式强制缩放画布。
6. 写在最后的经验补充
项目本身做完之后，我又在 myojs-emg 的基础上尝试了一些扩展，比如用 TensorFlow.js 做实时手势分类，用波形数据训练一个简单的 4 分类模型。说实话效果比想象中好，但前提是数据采集阶段足够规范。佩戴位置稍微偏移一点，同一手势的波形就会有明显变化，所以固定佩戴位置、固定同一块肌肉群的采集姿势非常关键。
另外一个比较实用的小技巧是：在 Observable 或者本地sketch.js里给 emg 数据打一个简单的时间戳标记，把原始数据导出来保存成 CSV。这样即使臂章历史数据没法连续记录，也能离线复盘、分析不同手势在 8 通道上的幅值差异。用 Excel 或者 Python 打开后再做频域分析，体验会比只看浏览器波形更灵活。
Myo 臂章虽然官方早已停止更新，但这块硬件本身还远没有到退役的程度。只要浏览器还在支持 Web Bluetooth，myojs-emg 这样的项目就能一直跑下去。如果你手上正好有一块臂章，不妨动手把波形画出来，你会发现自己对肌肉活动和手势控制的感知会上一个台阶。
本文还有配套的精品资源，点击获取
