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/


#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?

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


#15

Here my screen testing


#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.


#19

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


#20

Hi, may i know how do you integrate this package into Unity?


#21

Ok, lets clear some things up as I finished testing with some bugs that were thrown at me. To do a proper setup using the index.html file:

  1. Add these to your header:

< head>
< meta charset=“utf-8”>
< meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
< meta name=“viewport” content=“width=device-width, initial-scale=1.0, user-scalable=no”>
< title> Zappar AR< /title>
< link rel=“shortcut icon” href=“TemplateData/favicon.ico”>
< script type=“text/javascript” src=“https://libs.zappar.com/zappar-cv/0.3.8/zappar-cv.js”>var zappar=ZCV.initialize();< /script>
< script src=“https://libs.zappar.com/zappar-snapshot/0.0.22/zappar-snapshot.min.js”>
< script type=“text/javascript” import ZapparWebGLSnapshot from ‘@zappar/webgl-snapshot’>< /script>

< /head>

I highlighted where to add the snapshot referencing code!

  1. Create a function to call a snapshot; which can be called from a button (from html or Unity: will go into this in next step) and then make sure the code is within script markers:

    < script>
    function takeScreenshot() {

             // Get canvas from dom
             const canvas = document.querySelector('canvas');
             var gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });
    
             // Convert canvas data to url
             const url = canvas.toDataURL('image/jpeg', 0.8);
    
             // Take snapshot
             ZapparWebGLSnapshot({
                 data: url,
                 fileNamePrepend: 'Zappar',
                 shareUrl: 'www.zappar.com',
                 shareTitle: 'Hello World!',
                 shareText: 'Hello World!',
                 onSave: () => {
                     console.log(`Image was saved`)
                 },
                 onShare: () => {
                     console.log('Share button was pressed');
                 },
                 onClose: () => {
                     console.log('Dialog was closed');
                 }
             }, {
                 SAVE: "SAVE",
                 SHARE: "SHARE",
                 NowOpenFilesAppToShare: "Now open files app to share",
                 TapAndHoldToSave: "Tap and hold the image to save to your Photos app",
             });
    
         }
    

    < /script>

  2. If you want to use in Unity, follow these steps:
    a. Create a jslib file to get Unity to work with html and put this file in the Plugins folder inside Unity. It should look something like this; I named it TakeScreenshot.jslib:

mergeInto(LibraryManager.library, {

TakeScreenshot: function()
{
takeScreenshot();
}

});

b. Create a C# file in Unity and name it something like TakeScreenShot.cs, then add this:

public class TakeScreenShot : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void TakeScreenshot();

public void Take () {

  TakeScreenshot();

}

}

c. Create a button in Unity and use UnityEvents for that button to call the Take function of the Screenshot script. If you need instructions of how to use Unity button events to call stuff in scripts, there are plenty of tutorials on Youtube for that.

BUT WAIT!

If you launch on the web browser you will get this error:

Uncaught TypeError: Cannot set property ‘0’ of undefined
at new o (zappar-snapshot.min.js:1)
at new o (zappar-snapshot.min.js:1)
at t.default (zappar-snapshot.min.js:1)

This error is because of these lines of the ZapparWebGLSnapshot:

SAVE: “SAVE”,
SHARE: “SHARE”,
NowOpenFilesAppToShare: “Now open files app to share”,
TapAndHoldToSave: “Tap and hold the image to save to your Photos app”,

Remove these and the screenshot feature should work. I checked the docs and it says this is for localization. So for now if you don’t need to change to different wordings or language then ignore. But I will email the Zapworks team about this!

Thanks,
jrDev