AR.js Hiro Marker Focus Time Tracking with JavaScript
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.1.4/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-assets>
<video id="alpha" autoplay src="assets/brm.mp4" ></video>
</a-assets>
<pre><code> <a-marker preset='hiro' id="marker">
<a-video id="vid" rotation="-92.584 -3.936 4.509" scale="1 1 1" src="#alpha" visible="false"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<script>
var marker = document.querySelector("#marker");
var video = document.querySelector("#alpha");
var videocnt = document.querySelector("#vid");
var focusCounter = 0;
var timer;
marker.addEventListener("markerFound", function () {
videocnt.setAttribute("visible", "true");
video.play();
timer = setInterval(function() {
focusCounter++;
console.log("Focus Counter: " + focusCounter);
}, 1000); // increment focusCounter every second (1000ms)
});
marker.addEventListener("markerLost", function () {
video.pause();
videocnt.setAttribute("visible", "false");
clearInterval(timer);
console.log("Final Focus Counter: " + focusCounter);
});
</script>
</code></pre>
</body>
</html>
<p>To count the number of seconds that the user is focusing on the 'hiro' marker, you can modify the JavaScript code as follows:</p>
<pre><code class="language-javascript"><script>
var marker = document.querySelector("#marker");
var video = document.querySelector("#alpha");
var videocnt = document.querySelector("#vid");
var focusCounter = 0;
var timer;
marker.addEventListener("markerFound", function () {
videocnt.setAttribute("visible", "true");
video.play();
timer = setInterval(function() {
focusCounter++;
console.log("Focus Counter: " + focusCounter);
}, 1000); // increment focusCounter every second (1000ms)
});
marker.addEventListener("markerLost", function () {
video.pause();
videocnt.setAttribute("visible", "false");
clearInterval(timer);
console.log("Final Focus Counter: " + focusCounter);
});
</script>
</code></pre>
<p>In this code, we added a <code>focusCounter</code> variable to keep track of the number of seconds the user is focusing on the marker. We also added a <code>timer</code> variable to store the interval timer used to increment the counter every second.</p>
<p>Once the 'hiro' marker is found, the timer starts incrementing the <code>focusCounter</code> by 1 every second. When the marker is lost, the timer is cleared using <code>clearInterval()</code> and the final <code>focusCounter</code> value is logged to the console.</p>
<p>You can access the <code>focusCounter</code> variable and use it as needed for further processing or display.</p>
原文地址: https://www.cveoy.top/t/topic/s6m 著作权归作者所有。请勿转载和采集!