search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.24k stars 417 forks source link

Screenshot problem #202

Closed mancio2388 closed 2 years ago

mancio2388 commented 2 years ago

Hi, i'm using the three js version. When i'm trying to take a snap of the canvas like this

const img = document.querySelector('.ar canvas').toDataURL(); document.querySelector('.snap img').setAttribute('src', img);

a transparent image appears. Why? I understand that the video may not be there, but the 3d object on the marker must be there. I also set preserveDrawingBuffer option on renderer but still not work.

const {renderer, scene, camera} = mindarThree; renderer.preserveDrawingBuffer = true;

Any help? Thanks

demisquare commented 2 years ago

When you take a screenshot with three.js or a-frame, you just take the rendering. You have to take a screenshot both webcam video and rendering in order to obtain a proper screenshot of your situation. I managed to take a screenshot with success with this code, using a-frame, check #191.