Hello there,
I need to embed augmented reality content on my artist website, but I miss a lot of code skills to complete the last step of the process.
Here is the process:
1- I create an animation on Blender then, I export the scene in .glTF.
2-I import the 3D model folder into a new repository on GitHub.
3-Through the Glitch platform, I edit an HTML code whose header calls the A-Frame libraries, ar.js (Jérome Etienne) and the aframe-extras.min.js loader.
The body calls the URL of the 3D model on GitHub and the device’s camera.
Result 1: When I start HTML rendering, my camera turns on and when I show the HIRO marker, the 3D model works perfectly.
4- I create a new page on my Wix website editor.
5- I integrate an iFrame HTML module to integrate the code directly into my Wix page.
6- I copy the HTML code from glitch and I paste it in the area provided by the HTML module in Wix.
Problem:
From my site, browsers (Chrome, Safari, Firefox & Safari iPhone) do not ask me for permission to turn on the camera and I have the error’s pop-up:
Webwam Error
Name: NotallowedErros
Message: Permission Denied
What I tried:
- T o embed code from glitch in iframe, but despite the presence of allow = “geolocation; microphone; camera; midi; vr; encrypted-media”, the webcam error persists and the augmented reality device does not work not on my website.
- Call to Wix support to ask if it is possible to add an SSL wilcard to the default assigned by Wix. Support informed me that it was not possible to allow external SSL.
- Learn more about Wix node modules. I found in the wix module store, react-webcam, ar.js and three.js libraries. I have seen on other unsolved posts from some people indicate that it is possible to communicate with an HTML box, corvid and the node module. My knowledge being limited, I have not yet understood how it works nor managed to make the AR process work with this method and that’s why Wix support recommended to talk with the community present on the forum Corvid.
Here is the html code that I integrated into the html box:
<html>
<head>
import Webcam from 'react-webcam';
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-assets>
<!-- model https://sketchfab.com/3d-models/low-poly-character-rpg-kit-animation-904c06fc53574534a3aace8dba79f796 -->
<a-asset-item
id="man"
src="https://raw.githubusercontent.com/Emiliendescot/ARTEST4/master/scene.gltf"
></a-asset-item>
</a-assets>
<a-entity
light="type:directional; castShadow:true;"
position="1 1 1"
></a-entity>
<a-marker-camera preset="hiro">
<a-entity gltf-model="#man" scale="0.002 0.002 0.002" animation-mixer>
</a-entity>
</a-marker-camera>
</a-scene>
</body>
</html>
The result here: https://emiliendeschodt.com/ar
I’m looking for help, tips, tutorials, and code that could solve this problem, as I think I’m not the only one having trouble allowing camera access on wix.
Thank you in advance for your concern of my request.
Sincerely Yours,
Emilien