A-Frame中FFmpeg流作为Canvas纹理的调试求助

我帮你排查了代码里的几个关键问题，调整后应该能正常显示了：

问题1：DOM加载顺序错误 #

你的WebSocket和player初始化脚本写在<body>最前面，这时候<canvas id="my-canvas">还没被浏览器解析完成，document.getElementById('my-canvas')会返回null，直接导致player无法绑定到正确的canvas元素，视频流自然没法渲染。

问题2：冗余的draw-canvas组件 #

你注册的draw-canvas组件其实没有实际作用——A-Frame的material组件只要正确指定src: #my-canvas，就会自动把canvas作为纹理使用，这个组件反而可能干扰正常的渲染流程。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  <script type="text/javascript" src="js/jsmpg.js"></script>
</head>
<body>
  <a-scene>
    <a-assets>
      <canvas id="my-canvas" crossorigin="anonymous" width="640" height="480"></canvas>
    </a-assets>
    <a-entity 
      geometry="primitive: plane; width: 4; height: 3" 
      material="src: #my-canvas; shader: flat"
      position="0 1.6 -5">
    </a-entity>
  </a-scene>

  <script>
    // 等DOM完全加载后再初始化WebSocket和player
    document.addEventListener('DOMContentLoaded', function() {
      var client = new WebSocket('ws://127.0.0.1:8084/');
      var canvas = document.getElementById('my-canvas');
      // 初始化player，确保canvas已存在
      var player = new jsmpeg(client, { canvas: canvas });
    });
  </script>
</body>
</html>

额外优化点 #

• 给canvas设置了明确的width和height，避免默认尺寸过小导致纹理拉伸模糊
• 调整了平面的宽高比为4:3（和canvas匹配），并设置了position让平面在视野内更易观察
• 添加了shader: flat，避免A-Frame默认的phong shader可能带来的纹理渲染问题
• 用DOMContentLoaded事件确保所有DOM元素加载完成后再执行初始化逻辑

这样调整后，你的FFmpeg视频流应该能正常在A-Frame的平面上显示了。

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