Home>
Please tell me how to make the streaming video into the texture of the 3D object displayed by the AR marker.
  • I tried the following, but it did not display well.
  • Raspberry Pi with camera (IP address192.168.33.102) Has implemented the following.
  • Use MJPG-streamer for streaming
  • Reverse proxy server for SSL communication is constructed with Nginx + Oleore certificate
  • SSL communication for streaming delivery with reverse proxy
  • (https://192.168.33.102/webcam1/?action=stream(Confirm that you can see the distribution video when you open
  • Create af.html that displays 3D object with AR marker (using A-Frame)
  • (https://192.168.33.102/af.html(Open with)
  • Specify streaming video for texture of 3D object← This doesn't work
  • On Windows 10 on the same network as Razpaihttps://192.168.33.102/af.htmlopen
  • → Video from the camera attached to Windows is displayed in the browser
  • → When Hiro's AR marker is moved to the image, a cube (3D object) is displayed
  • → However, the texture of the cube is black instead of streaming video
  • → When the browser (Chrome) was set to debug mode, the following warning message was displayed.
WebGL: INVALID_VALUE: texImage2D: no video @ three.js:19341
240[.WebGL-0000024303993270]RENDER WARNING: texture bound to texture unit 0 is not renderable.It maybe non-power-of-2 and have incompatible texture filtering.
Applicable source code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>test</title>
</head>
<body>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    
      
      <!--<video src="arsample.mp4" autoplay="true">No problem if mp4 video is specified -->
      <video src="https://192.168.33.102/webcam1/?action=stream" autoplay="true"><!-- It doesn't work well when streaming video is specified -->
    </a-assets>
      
      </a-entity>
    </a-marker>
    </a-entity>
  </a-scene>
</body>
</html>