I have volumetric video shot and hosted by Evercoast that I'm trying to use in a webAR experience using the Blippar WebSDK. I have a scene set up, properly by all accounts, so that upon an image target being scanned and recognized, the captured video should play on top of the marker image. However, what happens is that my marker is recognized and the video just does not show up.
All of the .js libraries are called properly in the head of the HTML. I just don't know where I'm going wrong here.
Here are the .js libraries I'm using and how they're placed in the head:
<script src="https://ar-libs.blippar.com/aframe/1.3.0/aframe-v1.3.0.min.js"></script>
<script src="https://streaming.evercoast.com/api/2.0.17/aframe/lib/evercoast-aframe.js"></script>
<script src="https://webar-sdk.blippar.com/releases/1.7.1-r1/webar-sdk-v1.7.1-r1.min.js"
Here is how my body is setup:
<body>
<!-- Step 2: Add webar-scene attribute to AFrame's <a-scene> tag -->
<!-- Provide a valid Blippar license-key value in the key: property -->
<a-scene
webar-scene="key: 508c9ac2-8cd0-4c70-bec8-2f8ffa0953bd"
vr-mode-ui="enabled: false"
device-orientation-permission-ui="enabled: false"
loading-screen="enabled: false"
renderer="colorManagement: true;">
<!-- Step 3: Add webar-camera attribute to AFrame's <a-entity camera> tag -->
<a-camera webar-camera></a-camera>
<!-- Step 4: Add webar-marker attribute with a valid marker id value(obtained from Blippar hub), to AFrame's parent <a-entity> tag -->
<!-- The models defined as a child element under this webar-marker id, will be displayed on the marker image during marker image tracking -->
<a-entity webar-marker="id: f5d9db12-80be-4fa2-9a82-f1cc0790e4a6">
<!-- Step 5: Add AR models under the webar-marker nodes -->
<!-- Add webar-loadmonitor attribute to the entities to display loading progress screen before starting the surface tracking -->
<!-- Refer API Reference documentation for more details -->
<a-entity id="asset" evercoast-asset="https://streaming.evercoast.com/FourthIdea%20Advertising/Dutchess-GW-Stories.JohnKane.ec.take.016/10387/Dutchess-GW-Stories.JohnKane.ec.take.016.ecm"
evercoast-asset-controls="float: right" position="0 0 0" rotation="0 180 0" scale="1 1 1"></a-entity><!--closes asset-->
</a-entity> <!--closes webar-marker-->
</a-scene><!--closes scene-->
<!-- Refer API:Functions documentation for more details -->
<script>
WEBARSDK.Init();
// Give a callback when the WebAR Marker <a-entity webar-marker> is ready to track the marker image
WEBARSDK.SetMarkerDetectedCallback((markerId) => {
console.info('Marker is detected for marker id: ', markerId);
});
// Give a callback when the WebAR Marker <a-entity webar-marker> is lost
WEBARSDK.SetMarkerLostCallback((markerId) => {
console.info('Marker tracking is lost for marker id: ', markerId);
});
/**
* Sets custom style for auto marker detection(auto-marker-detection = true):
* (1) Add your custom html layout for auto marker detection
* (2) May disable scan instruction if needed, by default it is true
* @param {HTMLElement} custom division
* @param {boolean} showScanInstructions set it to false to disable it
*/
//WEBARSDK.SetAutoMarkerDetectionStyle(htmlElement, showScanInstructions)
</script>
</body>