Announcing the new WebGL Snapshot package for UAR!

#1

Hello everyone!

We hope that you are all well and keeping safe.

We wanted you to know that we’ve recently released a highly anticipated and requested feature that can be integrated into Universal AR WebGL projects.

:tada: We are delighted to announce the new WebGL Snapshot package for UAR! :tada:

You now have a really accessible route for creating save & share dialogs for your UAR projects. We’ve made it available as an NPM package but you can just as easily access it via CDN. Please note that this feature is used as an addition to projects that have been set up with a Zappar camera and chosen tracking type - for example, a fun face tracking experience for users to take a selfie and share with their friends on social media; or taking a picture in an instant tracked experience to compare which piece of office furniture to purchase!

Here is the documentation site for those of you that are interested: https://docs.zap.works/universal-ar/useful-packages/webgl-snapshot/

It goes without saying that our team will continue to improve the site with new content and more meaningful updates to older resources; so as always, we’d love to hear your thoughts - please drop any feedback or suggestions on this thread to let us know what you think!

Have a lovely day; best wishes from the Learning & Support Team,

@George, @Bob, @Anita, @Francesca :grin:

P.S. We’d also love to give a shoutout to @Deim who has worked hard on bringing this to you! :clap:

Screen Capture button using Javascript
#3

Hi Francesca!, To get snapshot the screen is black. Please help me!, you can see my test project: https://hnrkj.zappar.io/2246629454076179847/0.4.0/

29
Captura de Pantalla 2020-10-05 a la(s) 15.50.29.png1968×1622 108 KB

#4

Hi @chrisvalear, thanks for that spot! :grin:

I appreciate the screenshot and link to the published version; I can confirm I’m having the same issue with your project and I’m currently looking our snapshot package now.

Fran

#5

Hi @chrisvalear

In order for canvas.toDataURL to work, we need to call it after the render of the frame, or with preserveDrawingBuffer enabled on the renderer. Luckily, A-Frame provides us with a handy screenshot method which lets us get the dataURL without any extra work! :slight_smile:

let canvas = document.querySelector("a-scene").components.screenshot.getCanvas("perspective");
SnapshotManager.promptImage({
  data: canvas.toDataURL('image/jpeg', 0.8)
});

Hope this helps,
Deim

#6

Hi! Deimantas, thanks for help me!.

Now I have to work on size of screenshot (mode portrait).

document.querySelector(‘a-scene’).setAttribute(‘screenshot’,{width: 1024, height: 1024});

Now again thanks a lot!.

My project: https://hnrkj.zappar.io/2246629454076179847/0.4.1.3/

Chris.

#7

Hi @Francesca, the snapshot package works well with three.js, however, I had to call promptImage() from ZapparWebGLSnapshot as opposed to SnapshotManager in order to access the api.

#8

Hi @Francesca thank you for posting this package, I managed to get it working in Unity after a bit of setup, I was also experiencing the black screen on taking the snapshot at first and managed to resolve this by enabling preserveDrawingBuffer as @Deim suggested, my only problem is I find that this really slows down the experience, at least on Android. I did also try to set this up in a coroutine to see if delaying the Snapshot.promptImage() part of the code by a frame or by 0.1 of a second would resolve the black image issue with preserveDrawingBuffer disabled but had no luck. Any suggestions on how this could be resolved in Unity?

#9

I have also found that on iOS the screenshot image gets flipped upside down on the rear camera.

#10

Hi, i faced the same problem too, any updates?

#11

Hi everyone!
How to use WebGL Snapshot in Webpack packet “zappar-react-three-fiber”.
Where to find the description of the ZapparCanvas class to access the Canvas tag?
What about GIF recording?

Anybody was done access to the canvas with Hooks?
import { useThree } from ‘react-three-fiber’
const { gl } = useThree() // WebGL renderer

#12

Hi @d.haiduk1,

Give gl.domElement a shot to get the canvas element. Note you’re gonna need to preserve drawing buffer:
<ZapparCanvas gl={{ preserveDrawingBuffer: true }} >

You could also record some mp4’s using https://www.npmjs.com/package/@zappar/video-recorder :slight_smile:

WebGL Snapshot setup
#13

Hi, @Deim Thanks for the reply. Do you have an example?

#14

Hi @Francesca I got this error when try using snapshot, Can you help me to check it?

image
image.png793×821 33.7 KB

I got error snapshot is not defined though I already import it on head tag

#15

Here my screen testing

image
image.png812×930 34.5 KB

#16

Hi,

try replacing the import with
<script src="https://libs.zappar.com/zappar-snapshot/0.0.17/zappar-snapshot.min.js"></script>

#17

I did but still cannot get file import do you know any way or code example?

#18

Hi Admin , I get sappshot from my camera but I got blank image. I use Javascript. I tried to set !!
var gl = canvas.getContext(“webgl”, {preserveDrawingBuffer: true});
but it doesn’t work. How can I fix that? Thanks a lot.

image
image.png373×731 2.68 KB

#19

I am facing the same issue. even after including cdn link, i get function not defined error.