vision_wasm_internal.wasm 找不到三步完整修复10分钟跑通【免费下载链接】mediapipeCross-platform, customizable ML solutions for live and streaming media.项目地址: https://gitcode.com/GitHub_Trending/med/mediapipe打开页面DevTools 控制台一条红字Failed to fetch: vision_wasm_internal.wasm人脸检测、手势识别等功能全部卡死。本文给出 3 条修复路径预计 10 分钟跑通。用 npm 安装过mediapipe/tasks-vision的前端开发者内网 / 国内网络无法直连 storage.googleapis.com 的环境CI 等需要可复现构建的场景先确认你踩的是同一个坑vision_wasm_internal.wasm 缺失的三个特征排查前先做自我诊断三条满足任意两条基本就是同一个问题控制台报错文案含Failed to fetch或404 (Not Found)资源名指向vision_wasm_internal.wasmNetwork 面板里同目录下的.js加载器请求成功唯独.wasm请求 404 或net::ERR_FAILED本地执行ls node_modules/mediapipe/tasks-vision/wasm文件缺失甚至整个wasm目录不存在。注意区分如果你缺的是vision_wasm_module_internal.wasm而vision_wasm_internal.wasm在那多半是浏览器 ES Module fetch 支持问题不在本篇范围内。缺文件的根因MediaPipe WASM 的分发链路浏览器端跑推理靠两个东西npm 包里的 TS 封装代码和一组 WASM 二进制WebAssembly把 C 编译成浏览器可执行的字节码。这些二进制不是手写维护的而是上游构建时由 Bazel 的http_file规则从 Google Storage 拉取并用 sha256 钉死版本源码在自动生成的 third_party/wasm_files.bzlhttp_file( name com_google_mediapipe_tasks_web_vision_wasm_vision_wasm_internal_wasm, sha256 8e8e6fa0..., urls [https://storage.googleapis.com/mediapipe-assets/wasm/tasks/web/vision/wasm/vision_wasm_internal.wasm], )拉下来的文件再由 mediapipe/tasks/web/vision/BUILD 里的pkg_npm打进mediapipe/tasks-vision的wasm/目录。运行时FilesetResolver.forVisionTasks(wasmRoot)会按你传入的路径去静态服务器逐个 fetch 这些.wasm/.js文件缺一个就抛Failed to fetch。所以问题不在你的代码而在你装的包里没带全文件或静态目录里没摆对位置。排查与修复由易到难的三条路径把 vision_wasm_internal.wasm 补全三个方案按成本从低到高排列每个都能独立跑通选适合你的那一条即可。方案 1重装 npm 包恢复 wasm 目录适用网络正常★ 推荐推荐理由一条命令的事顺带把装错版本的情况一起修掉。步骤 1确认当前装的版本npm ls mediapipe/tasks-vision # 看版本与 lockfile 是否一致步骤 2卸载后锁定精确版本重装注意不要带^npm uninstall mediapipe/tasks-vision npm install mediapipe/tasks-vision0.10.16 # 换成你实际要用的版本步骤 3验证文件是否落盘ls node_modules/mediapipe/tasks-vision/wasm能列出下面的 6 个文件直接跳到回归验证列不全走方案 2。方案 1 没解决时说明该版本的发布包本身就缺文件或 npm 走了有缓存问题的镜像此时需要自己把文件取回来。方案 2手动拉取 wasm 文件放入静态目录适用包内缺文件 / 内网离线环境步骤 1建目录mkdir -p node_modules/mediapipe/tasks-vision/wasm步骤 2下载 4 个必需文件。URL 以对应版本 third_party/wasm_files.bzl 中urls字段为准当前主干路径如下BASEhttps://storage.googleapis.com/mediapipe-assets/wasm/tasks/web/vision/wasm DESTnode_modules/mediapipe/tasks-vision/wasm for n in vision_wasm_internal vision_wasm_nosimd_internal; do curl -f -o $DEST/$n.js $BASE/$n.js # JS 加载器 curl -f -o $DEST/$n.wasm $BASE/$n.wasm # WASM 二进制 done注意0.10.x 旧版本的 URL 路径是.../mediapipe-assets/wasm/不含tasks/web/vision前缀下载前务必对照你装的那个版本的.bzl。如果curl报 404多半是版本与 URL 不匹配回查.bzl即可。步骤 3确认最终结构node_modules/mediapipe/tasks-vision/ └── wasm/ ├── vision_wasm_internal.js ├── vision_wasm_internal.wasm ├── vision_wasm_nosimd_internal.js └── vision_wasm_nosimd_internal.wasmdev server 的静态映射必须覆盖到wasm目录否则文件在盘上也 fetch 不到。方案 2 能救急但换台机器、CI 重跑又会丢需要可复现的场景走方案 3。方案 3从源码构建 npm 包适用CI / 离线 / 可复现构建步骤 1克隆仓库git clone https://gitcode.com/GitHub_Trending/med/mediapipe cd mediapipe步骤 2用 Bazel 构建 vision 包构建约需数十分钟机器上需有 Bazelbazel build //mediapipe/tasks/web/vision:vision_pkg步骤 3产物在bazel-bin/mediapipe/tasks/web/vision/下可直接npm install ./bazel-bin/mediapipe/tasks/web/vision本地安装或把其中的wasm目录拷进构建产物。这样文件来源完全可控不受上游发布状态影响。回归验证5 行代码确认 vision_wasm_internal.wasm 加载成功在开发服务器页面里放一段最小验证脚本script typemodule import vision from mediapipe/tasks-vision; const fileset await vision.FilesetResolver.forVisionTasks( /wasm // dev server 下映射 node_modules/mediapipe/tasks-vision/wasm 的路径 ); console.log(WASM loaded, fileset); /script成功的标志控制台输出WASM loaded {…}Network 面板中.wasm/.js请求全部 200不再有红色Failed to fetch。如果还是 404最可能是 dev server 静态映射没覆盖wasm目录把整个目录拷进 dist 或给包路径配一个静态别名即可。长效防护顺手做的四件事package.json 里锁定mediapipe/tasks-vision精确版本不用^或~构建脚本前加一行test -f node_modules/mediapipe/tasks-vision/wasm/vision_wasm_internal.wasm缺文件时快速失败把wasm目录纳入构建产物或 CDN 缓存换机器不重新下载升级依赖后 diff 一下 third_party/wasm_files.bzlURL 路径和文件名变了就同步更新手动下载脚本问题本质就一句话浏览器端运行时文件没落在wasmRoot指向的位置和你的模型、业务代码无关。绝大多数情况用方案 1 或方案 210 分钟内可以修好文件清单以 mediapipe/tasks/web/vision/BUILD 为准。换了环境又复现的话把控制台报错贴出来一起看。【免费下载链接】mediapipeCross-platform, customizable ML solutions for live and streaming media.项目地址: https://gitcode.com/GitHub_Trending/med/mediapipe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考