AR.js Hiro Marker Focus Counter: Track User Attention and Trigger Actions
<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 interval;
marker.addEventListener("markerFound", function () {
videocnt.setAttribute("visible", "true");
video.play();
interval = setInterval(function () {
focusCounter++;
}, 1000);
});
marker.addEventListener("markerLost", function () {
video.pause();
videocnt.setAttribute("visible", "false");
clearInterval(interval);
if (focusCounter > 5) {
alert("User focused on marker for more than 5 seconds");
}
focusCounter = 0;
});
</script>
</code></pre>
</body>
</html>
<p>To count the number of seconds that the user is focusing on the 'hiro' marker, you can use the <code>setInterval</code> function to increase a <code>focusCounter</code> variable every second. Here's an example of how you can modify your code to achieve this:</p>
<p>This code sets up an interval that increments a <code>focusCounter</code> variable every second while the 'hiro' marker is detected. When the marker is lost, the interval is cleared, and if the counter exceeds 5, an alert is triggered. This technique provides a simple way to track user engagement with the marker, enabling you to create interactive experiences that respond to the user's attention.</p>
原文地址: https://www.cveoy.top/t/topic/s20 著作权归作者所有。请勿转载和采集!