Video is not rendered when tried to implement "examples/arNFT_video_example.html" #334
Description
I downloaded the project zip file and running the examples from there, its working, but when i tried to implement the example on my own its not working.
Can anyone help to render/display the video when the target image is shown to the camera feed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARnft example showing a video</title>
<link rel="stylesheet" href="css/nft-style.css" />
</head>
<body>
<a
href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg"
class="ui marker"
target="_blank"
>
🖼 Marker Image
</a>
<video loop autoplay muted webkit-playsinline playsinline crossorigin="anonymous" id="arvideo">
<source src="https://avo-content-dev.s3.amazonaws.com/videos/bg_1588085276090.mp4" type="video/mp4" />
</video>
<script type="importmap">
{
"imports": {
"three": "/js/third_party/three.js/three.module.min.js",
"arnft-threejs": "/js/ARnftThreejs.module.js",
"arnft": "/dist/ARnft.module.js"
}
}
</script>
<script type="module">
import * as THREE from "three";
import arnft from "arnft";
import ARnftThreejs from "arnft-threejs";
const { ARnft } = arnft;
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;
let width = 640;
let height = 480;
ARnft.init(width, height, [["src/DataNFT/pinball"]], ["pinball"], "config.json", true).then((nft) => {
console.log('ARnft initialized:', nft);
let mat = new THREE.MeshLambertMaterial({
color: 0xff0000,
});
let boxGeom = new THREE.BoxGeometry(1, 1, 1);
let cube = new THREE.Mesh(boxGeom, mat);
cube.position.z = 90;
cube.scale.set(180, 180, 180);
document.addEventListener("containerEvent", (ev) => {
console.log("Container event received:", ev);
let canvas = document.getElementById("canvas");
let fov = (0.8 * 180) / Math.PI;
let ratio = width / height;
let config = {
renderer:{
alpha: true,
antialias: true,
context: null,
precision: "mediump",
premultipliedAlpha: true,
stencil: true,
depth: true,
logarithmicDepthBuffer: true,
},
camera: {
fov:fov,
ratio:ratio,
near:0.01,
far:1000,
}
}
let sceneThreejs = new SceneRendererTJS(config, canvas, nft.uuid, true);
sceneThreejs.initRenderer();
console.log("SceneRendererTJS initialized");
let nftAddTJS = new NFTaddTJS(nft.uuid);
// Set width, height and width and height number of segments of the PlaneGeometry.
let imgConfig = {w:1, h:1, ws:1, hs:1 }
nftAddTJS.addVideo("arvideo","pinball", 180, imgConfig, false)
// console.log("Video added to NFT:", nftAddTJS);
const tick = () => {
sceneThreejs.draw();
window.requestAnimationFrame(tick);
}
tick();
})
}).catch((error) => {
console.log("Error initializing ARnft:", error);
});
</script>
</body>
</html>
