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:
- 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!
-
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>
-
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
We are delighted to announce the new WebGL Snapshot package for UAR! 
