必须先通过CDN按顺序引入TensorFlow.js和ml5.js（如tfjs@4.21.0与ml5@0.18.0），再等待DOM和video加载完成，用async/await初始化MobileNet分类器，配合节流预测与状态提示，确保输入为有效video元素并处理移动端兼容性。
怎么在HTML里加载ml5.js并确保能用
必须通过 <script></script> 标签引入，且顺序不能错：先载入 tensorflow.js，再载入 ml5.js。否则控制台会报 referenceerror: ml5 is not defined 或 tf is not defined。
推荐用 CDN 方式，避免本地路径出错：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.21.0"></script><script src="https://cdn.jsdelivr.net/npm/ml5@0.18.0/dist/ml5.min.js"></script>
- 注意版本号要匹配，ml5 v0.18.0 对应 tfjs v4.x；用太新的 tfjs（如 v5）可能导致
ml5.imageClassifier初始化失败 - 不要把 script 放在
里就完事——等 DOM 加载完再调用模型，否则可能找不到<video></video>或<canvas></canvas>元素 - 浏览器需支持 WebGL，Safari 某些旧版本或禁用硬件加速时会静默失败，建议加个
console.log(tf.getBackend())确认是否用了webgl
imageClassifier 怎么初始化才不卡住页面
直接 new 一个分类器（比如 MobileNet）会触发模型下载和解析，耗时长、阻塞主线程。用户点开页面就看到白屏几秒，体验极差。
- 务必用
async/await或.then()包裹初始化逻辑，例如：const classifier = await ml5.imageClassifier('MobileNet'); - 初始化前显示 loading 提示，比如切换
<div id="status">Loading model...</div>的文本 - MobileNet 是最轻量的预置模型，适合浏览器端；别一上来试
'ResNet50'—— 它根本没在 ml5 官方模型列表里，会报Model not found - 如果想自定义模型，得用
ml5.imageClassifier('path/to/model.json')，但 JSON 文件必须放在同源服务器下，跨域会触发 CORS 错误
用 webcam 做实时识别时 canvas 总是黑的或延迟高
核心问题不在 ml5，而在 <video></video> 元素的获取与帧捕获时机。常见现象是 classifier.predict() 返回空结果、video.readyState 为 0、或画面卡在第一帧。
- 必须等
video触发loadeddata事件后再调用classifier.predict(video, ...)，否则传进去的是未解码的空白帧 - 别用
requestAnimationFrame无节制调用 predict —— 每秒 30 帧对 MobileNet 来说太猛，建议加节流：if (frameCount++ % 3 === 0) classifier.predict(...) -
<video autoplay muted playsinline></video>属性缺一不可：iOS Safari 要求muted和playsinline才允许自动播放；autoplay不加的话得用户手动点一次才能启动摄像头 - 预测结果回调里的
results[0].confidence是浮点数（0–1），不是百分比，别直接拼字符串显示成 “95%”
predict 回调里拿不到结果或 confidence 总是 0.01
这不是模型坏了，大概率是输入图像质量或尺寸不达标。ml5 的 imageClassifier 内部会把输入缩放到 224×224，但裁剪方式很关键。
- 确保传给
predict()的是已播放的<video></video>元素，不是<img>或 canvas 的toDataURL()字符串 - 如果 video 尺寸是 1280×720，ml5 默认用 center crop（居中裁切正方形），边缘物体容易被切掉——可改用
classifier.predict(video, { flipHorizontal: true })辅助调试方向，但不能解决裁切问题 - 低光照、模糊、小目标（比如手掌里的一枚硬币）会导致 confidence 普遍低于 0.3；别依赖单次结果，建议连续 5 帧取最高置信度类别
- 错误日志里出现
Tensor is disposed？说明你在 predict 回调里手动调了tensor.dispose()—— ml5 内部已处理，外部不需要管内存
真正麻烦的是模型冷启动后的首帧预测慢，以及移动端频繁唤醒摄像头导致的功耗和发热。这些没法靠改几行 JS 解决，得结合 visibilitychange 事件暂停预测，用户切走标签页时主动 video.pause()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
