Hello!
I’m struggling to get the WebGL Snapshot package set up properly; I see that I’m not the only one since it was posted and that some questions are still left hanging. Could you share a simple vanilla example to get us all started properly? 
I’m starting from a blank A-Frame > Face Tracking > Standalone HTML template, but I’m confused by the installation guidelines.
Do we agree that installation is EITHER via npm and then import, OR via CDN by linking to the script (and then no need to import)? The CDN instructions saying “once you’ve installed the library, reference the script in your html” kind of confuses me, as it implies it should be done one after the other.
I see that the guidelines for the somewhat similar VideoRecorder comfort my feeling (i.e. it’s either one or the other, and the CDN link is pretty self-sufficient without further need to import).
Am I correct?
But based on this, I still cannot get it to work, neither through npm or CDN (which I’d prefer).
Could you help me correct what is wrong in these 2 approaches below?
I’m using the snippets from the webgl-snapshot npm readme rather than the dedicated page in the Zapworks docs as it seems more up-to-date (for instance it refers to PromptImage() which seems deprecated in the last updates, if I understand well?)
— METHOD 1: NPM —
Installation
npm install @zappar/webgl-snapshot
Usage
I ran into several troubles based on the default instructions:
1.
I think the recommended import:
import snapshot from '@zappar/webgl-snapshot'
should rather be:
import snapshot from './node_modules/@zappar/webgl-snapshot'
based on the default npm location modules are installed to
Otherwise I ran into an Uncaught TypeError: Failed to resolve module specifier "@zappar/webgl-snapshot" error.
2.
Here is my “app.js” file (I have a basic #snapshot-button on my HTML index)
import snapshot from './node_modules/@zappar/webgl-snapshot'
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('snapshot-button').addEventListener("click", function(e){
console.log("snapshot clicked");
// Get canvas from dom (>> modified for A-Frame)
//const canvas = document.querySelector('canvas');
const canvas = document.querySelector("a-scene").components.screenshot.getCanvas("perspective");
// Convert canvas data to url
const url = canvas.toDataURL('image/jpeg', 0.8);
// Take snapshot
snapshot({
data: url,
});
}, false);
})
If I link to this file with <script src="app.js"></script>, I’m thrown Uncaught SyntaxError: Cannot use import statement outside a module
So I use: <script type="module" src="app.js"></script>
But I’m still thrown: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
And I’m too little familiar with modules to go any further…
— METHOD 2: CDN (the one I’m rather interested in) —
Link to script
<script src="https://libs.zappar.com/zappar-snapshot/0.0.18/zappar-snapshot.min.js"></script>
Usage
Since we don’t have a “snapshot” import alias like we did in the NPM method, I looked into the minified JS code and think that ZapparWebGLSnapshot() is what we want to call, but it throws an error that ZapparWebGLSnapshot is not a function, so obviously someting is wrong or missing.
Here is my “app.js” file:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('snapshot-button').addEventListener("click", function(e){
console.log("snapshot clicked");
// Get canvas from dom (>> modified for A-Frame)
//const canvas = document.querySelector('canvas');
const canvas = document.querySelector("a-scene").components.screenshot.getCanvas("perspective");
// Convert canvas data to url
const url = canvas.toDataURL('image/jpeg', 0.8);
ZapparWebGLSnapshot({
data: canvas.toDataURL('image/jpeg', 0.8)
});
}, false);
})
Would be really great to have all this better documented, as this is a very desired feature for a lot of us I’m sure
Thanks for your assistance!
Thomas
). To rephrase, my question was: in the IG API, doesn’t the function return a “on success” boolean and/or verbose error message depending on whether the sharing succeeded, so we can inform the user if and why it failed?
)