Capturing screenshot with AR background

Hi all,

I’ve been trying to use the following to take a screenshot on button press in much the same way this tutorial is set up:
https://developer.playcanvas.com/en/tutorials/capturing-a-screenshot/
I also have an AR camera that renders onto a marker. When taking a screenshot, the model saves in the screenshot but the background from the camera saves as being blank.
Just wondering how I’d go about modifying the tutorial to include the image from the camera as well?

Thanks for reading!

What AR library are you using? 8th Wall, Zap AR or WebXR?

Using the following that states it uses AR Toolkit:
https://playcanvas.com/project/481413/overview/ar-starter-kit
Thanks!

Hmm, I’ve not done this before but my guess the approach would be to get hold of the video element, add the current frame that to canvas for the screenshot first and then apply whatever the camera is rendering on top.

I don’t suppose you know how to grab the current frame from the artoolkit do you?
If not, if anyone has any idea on a solution I look forward to hearing it :slight_smile:

Thanks!

There will be a video element on the page somewhere that you should be able to grab. There should be some code/samples/tutorials/stack overflow pages for this like: https://codepen.io/kennylei12/pen/rrRJpX