Announcing the new WebGL Snapshot package for UAR!

Universal AR
#22

Hi everyone!

Thank you for bringing this to our attention - we’ve been able to have a look at the issues here and were successfully able to find a solution. The README should now be updated and we will be updating the docs to reflect this change :zap:

You should now be able to use the package something like this:

// Get canvas from dom
const canvas = document.querySelector('canvas');

// Convert canvas data to url

const url = canvas!.toDataURL('image/jpeg', 0.8);

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<br/>to save to your Photos app',
});

​
Have a great day!
Francesca :blush:

1 Like
#23

i follow the step and still get black screenshot

1 Like
#24

You are correct! One thing I forgot to note on the Unity side is that you NEED to have a yield WaitForEndOfFrame in the code! So here is an edit to the TakeScreenShot.cs:

public void TakeScreenShot () {
		
		StartCoroutine(GetScreenshot());
		
	}
	
	IEnumerator GetScreenshot(){

		yield return new WaitForEndOfFrame();
		
		TakeScreenshot();
		
	}

Now, another issue people were having was because the screenshot was being flipped upside down. With help from the Zapworks team we found this fix. Change this code:

const url = canvas.toDataURL('image/jpeg', 0.8);

To this code:

const url = getDataUrl(canvas, 'image/jpeg');

Then add this function:

function getDataUrl(origCanvas, mimeType) {
             
   var canvas = document.createElement('canvas');
   canvas.width = origCanvas.width;
   canvas.height = origCanvas.height;
   var destCtx = canvas.getContext('2d');
   if (!destCtx) {
       console.error("Cannot create context")
       return ""
   }
   destCtx?.drawImage(origCanvas, 0, 0);
   return destCtx.canvas.toDataURL(mimeType);
}

Thanks,
jrDev
1 Like
#25

thanks, now its working

1 Like
#26

When I use this code, I only see the option to Save. I do not see any Share button or feature anywhere in the Snapshot UI. I am setting hideShareButton to false.

What am I missing? I am testing on iOS Safari mobile.

Update: I see the Share button when testing on Android. If the Share button is only available on Android, please update the README for the npm page to clarify that, rather than just stating “Where available”.

#27

@jrDev This is AWESOME. Thanks for that.

#28

Hello,

No problem everyone, anything I can do to help make fellow developers lives easier. Now have to figure out a way to have that Share button also show on iOS.

Thanks,
jrDev

#30

Hi everybody!

I would love to share an exciting update concerning the Save and Share functionality of the WebGL Snapshot package! :zap:

Until very recently, iOS supported only link sharing using the WebShare API. This meant that in order for iOS users to share their images, they first had to Save their image and then click on the Open Files App button in order to open their files app; before sharing from there.

This week, Apple released iOS 15 - and as usual, it’s packed with new features, updates and performance improvements across the operating system and included apps. As such, it’s now possible for users to share images directly from within Safari to their installed social media and messaging apps!

Simply update to the latest version of our WebGL Snapshot package (1.0.1) to support ‘Share’ on iOS 15. :tada:

You can find out more about this on our Products Updates platform here.

Have a wonderful day!
Francesca :blush:

2 Likes
#31

Great great great!

Thanks,
jrDev

#32

Hi,

is it possible to save a png image from the index.html file when using Snapshot in the script.js? I haven’t been able to capture the png together with the Snapshot.

Like this example
image
(https://ik.imagekit.io/launchnotes/production/dmwv26crgh6aywevuky84kuerx97#t=0.1)

I would really appreciate the help ;^;

#33

Hi @iffahmtu ,

I believe I have answered your support query; but just in case this is helpful to anybody:

The useful WebGL Snapshot package does not capture the index.html page itself, but rather the HTML canvas that your WebGL content is being presented on.

This means that in order to capture content, that content should be implemented on the canvas. In other words, anything that you want to take a screenshot of should be part of your AR content, rather than outside it as simple HTML UI elements.

Hopefully that makes sense!

All the best and have a lovely day,

Francesca

#34

would it be possible for you to provide a simple example?

I’m actually trying to paste an image on the bottomleft corner and I tried to make it but the .getContext is somehow not available in HTMLElement…

1 Like
#35

Hi @iffahmtu,

I have responded to your specific ticket, but again, in case this is helpful(!):

I have created a very basic example to show this sort of thing in action, you can find it here. This file is the 3D model photo feature example with the addition of the image in the middle.

Just something to note - this is a rudimentary example which shows off one possibility and is not a fully perfected experience. :nerd_face:

You can also see this sort of thing in basic Three.js (without Universal AR) here; and without Three.js but pure JavaScript here.

Hopefully this shows that there may be a few ways of achieving this sort of task - ultimately, it’s up to you to decide what is best for your project! :zap:

Have a great day!
Francesca :blush:

2 Likes