TensorFlow.js实现3D姿态估计无报错无输出问题求助

问题背景 #

• 有Python+OpenCV+Mediapipe姿态估计开发经验，近期尝试用JS实现3D姿态估计
• 初始代码运行无JS报错但无预期输出，怀疑对await用法不熟悉是核心诱因
• 调整代码后出现新报错，目标是将检测到的姿态数组打印到页面确认功能正常

初始代码问题点梳理 #

1. await使用位置错误：await只能在async标记的异步函数内部使用，直接在全局script标签中调用属于语法错误，部分低版本浏览器会静默失败无报错
2. 语法混用：JS没有内置str()方法，str(poses[0].keypoints3D)是Python语法，JS中转字符串需要使用JSON.stringify()
3. 资源未就绪就执行推理：视频需要加载完成、可播放状态下才能传入模型做推理，直接读取DOM元素时视频可能还未加载到有效帧，自然无输出
4. 依赖引入顺序错误：tfjs-core、tfjs-converter、tfjs-backend-webgl需要在pose-detection之前引入，初始代码中顺序颠倒会导致依赖缺失

调整后代码问题点梳理 #

1. ES Module使用前提缺失：使用import语法必须给script标签添加type="module"属性，否则会报导入语法错误
2. 异步返回值未正确接收：estimatePosesOfVideo是异步函数，直接调用返回的是Promise对象，不是实际的姿态结果，必须加await或者用.then()处理返回值
3. Mediapipe runtime配置缺失：切换为mediapipe runtime需要在detectorConfig中指定solutionPath指向Mediapipe静态资源地址，否则会出现模型加载失败错误
4. 仍然未处理视频就绪逻辑：视频未加载完成就调用推理接口，还是无法获取有效结果

修正后可直接运行完整代码 #

<body>
  <div id="app"></div>
  <video id="video" controls width="640" height="480">
    <source src="vid.mp4" type="video/mp4"/>
  </video>
  <!-- 按依赖顺序引入资源 -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>

  <script>
    // 异步自执行函数包裹逻辑，可正常使用await
    (async () => {
      const video = document.getElementById('video');
      // 等待视频加载完成再执行后续操作
      await new Promise((resolve) => {
        video.onloadeddata = resolve;
      });

      const model = poseDetection.SupportedModels.BlazePose;
      const detectorConfig = {
        runtime: 'tfjs',
        modelType: 'full'
      };
      const detector = await poseDetection.createDetector(model, detectorConfig);
      const poses = await detector.estimatePoses(video);
      
      // 输出结果到页面和控制台
      if(poses && poses.length > 0) {
        document.getElementById("app").innerText = JSON.stringify(poses[0].keypoints3D, null, 2);
        console.log('3D姿态关键点：', poses[0].keypoints3D);
      } else {
        document.getElementById("app").innerText = '未检测到人体姿态';
      }
    })()
  </script>
</body>

额外注意事项 #

• 本地测试时建议用本地服务器打开HTML文件，直接双击打开会触发浏览器跨域限制，导致模型和视频加载失败
• 部分浏览器限制视频自动播放，可点击视频播放按钮后再触发检测逻辑，避免无有效帧数据
• 如果需要持续检测视频每帧姿态，可通过requestAnimationFrame循环调用detector.estimatePoses方法

内容的提问来源于stack exchange，提问作者FabulousFox