| Server IP : 185.143.234.238 / Your IP : 185.215.232.195 Web Server : nginx/1.22.1 System : Linux server2065 6.1.0-35-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.137-1 (2025-05-07) x86_64 User : www-data ( 33) PHP Version : 8.2.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/alibazzaz2/ |
Upload File : |
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8" />
<title>MindAR Face Scanner With Glasses</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
font-family: Arial, sans-serif;
touch-action: none;
}
a-scene {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 2 !important;
background: transparent !important;
}
canvas,
.a-canvas {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 2 !important;
background: transparent !important;
pointer-events: none !important;
}
video {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
object-fit: cover !important;
z-index: 1 !important;
background: #000 !important;
transform: translateZ(0);
}
#debugPanel {
position: fixed;
z-index: 999999;
top: 10px;
left: 10px;
right: 10px;
max-height: 42vh;
overflow: auto;
background: rgba(0, 0, 0, 0.82);
color: #ffffff;
border-radius: 10px;
padding: 10px;
font-size: 12px;
line-height: 1.45;
border: 1px solid rgba(34, 211, 238, 0.35);
direction: ltr;
text-align: left;
}
#statusBadge {
position: fixed;
z-index: 999999;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.78);
color: white;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
border: 1px solid rgba(34, 211, 238, 0.45);
white-space: nowrap;
}
#startButton {
position: fixed;
z-index: 999999;
left: 50%;
top: 58%;
transform: translate(-50%, -50%);
padding: 13px 20px;
border: 0;
border-radius: 12px;
background: #2563eb;
color: white;
font-size: 15px;
cursor: pointer;
display: none;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}
#startButton:disabled {
opacity: 0.55;
cursor: not-allowed;
}
#controlPanel {
position: fixed;
z-index: 999999;
top: 10px;
right: 10px;
display: none;
gap: 8px;
direction: rtl;
flex-wrap: wrap;
max-width: 50vw;
justify-content: flex-end;
}
.controlButton {
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.65);
color: #fff;
border-radius: 999px;
padding: 7px 10px;
font-size: 12px;
cursor: pointer;
backdrop-filter: blur(8px);
}
#screenHud {
position: fixed;
z-index: 999998;
inset: 0;
pointer-events: none;
display: none;
}
.scan-frame {
position: absolute;
left: 50%;
top: 50%;
width: min(62vw, 340px);
height: min(62vw, 340px);
transform: translate(-50%, -50%);
border: 1px solid rgba(34, 211, 238, 0.28);
border-radius: 22px;
box-shadow:
0 0 30px rgba(34, 211, 238, 0.22),
inset 0 0 30px rgba(34, 211, 238, 0.08);
}
.scan-line {
position: absolute;
left: 8%;
right: 8%;
top: 15%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(34, 211, 238, 0.95),
transparent
);
animation: scanMove 2.2s infinite ease-in-out;
box-shadow: 0 0 16px rgba(34, 211, 238, 0.8);
}
@keyframes scanMove {
0% {
top: 15%;
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
top: 85%;
opacity: 0.2;
}
}
.corner {
position: absolute;
width: 34px;
height: 34px;
border-color: rgba(34, 211, 238, 0.85);
}
.corner.tl {
left: -1px;
top: -1px;
border-left: 3px solid;
border-top: 3px solid;
border-top-left-radius: 20px;
}
.corner.tr {
right: -1px;
top: -1px;
border-right: 3px solid;
border-top: 3px solid;
border-top-right-radius: 20px;
}
.corner.bl {
left: -1px;
bottom: -1px;
border-left: 3px solid;
border-bottom: 3px solid;
border-bottom-left-radius: 20px;
}
.corner.br {
right: -1px;
bottom: -1px;
border-right: 3px solid;
border-bottom: 3px solid;
border-bottom-right-radius: 20px;
}
</style>
</head>
<body>
<div id="debugPanel"></div>
<div id="controlPanel">
<button id="toggleDebugButton" class="controlButton">Debug</button>
<button id="toggleEffectsButton" class="controlButton">Effects</button>
<button id="switchCameraButton" class="controlButton">Switch Camera</button>
</div>
<div id="screenHud">
<div class="scan-frame">
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<div class="scan-line"></div>
</div>
</div>
<div id="statusBadge">Initializing...</div>
<button id="startButton">Start Camera & AR</button>
<script>
/*
???? ???????????
??? ?? ???? ??? ??????????? ???? /libs ?????.
*/
const LOCAL_AFRAME = "/libs/aframe.min.js";
const LOCAL_MINDAR_FACE = "/libs/mindar-face-aframe.prod.js";
/*
???? ??? ????
??? ???? ???? ???? ???? lib ???? ???? ???? /lib ???.
???? ?????? /libs ?? fallback ?????? ???.
*/
const GLASSES_MODEL_CANDIDATES = [
"/lib/glasses-1-.glb",
"/libs/glasses-1-.glb"
];
/*
??????? ????? ????
??? ???? ???? ?? ??? ??? ?? ???? ????? ??? ??? ?? ????? ?? ????? ???.
*/
const GLASSES_CONFIG = {
anchorIndex: 168,
/*
??? ??? ???? ????/???? ??? ??? ????? ?? ????? ???.
??????? ??? 0.08 ?? 0.6 ???? ?? ??? GLB.
*/
scale: "0.7 0.7 0.7",
/*
??????? ???? ???? ?? ???? ????.
x: ??/????
y: ????/?????
z: ???/???
*/
position: "0 0.025 0.0",
/*
??? ???? ?? ???? rotation ?? ????? ???.
*/
rotation: "0 0 0"
};
const debugPanel = document.getElementById("debugPanel");
const statusBadge = document.getElementById("statusBadge");
const startButton = document.getElementById("startButton");
const controlPanel = document.getElementById("controlPanel");
const screenHud = document.getElementById("screenHud");
const toggleDebugButton = document.getElementById("toggleDebugButton");
const toggleEffectsButton = document.getElementById("toggleEffectsButton");
const switchCameraButton = document.getElementById("switchCameraButton");
let scriptsLoaded = false;
let currentFacingMode = "user";
let selectedGlassesModelPath = null;
let effectsEnabled = true;
let debugEnabled = true;
let videoLayerFixer = null;
let isStarting = false;
function log(message, data) {
const time = new Date().toLocaleTimeString();
const row = document.createElement("div");
if (typeof data !== "undefined") {
row.textContent = `[${time}] ${message} ${safeJson(data)}`;
console.log(message, data);
} else {
row.textContent = `[${time}] ${message}`;
console.log(message);
}
debugPanel.appendChild(row);
debugPanel.scrollTop = debugPanel.scrollHeight;
}
function setStatus(message) {
statusBadge.textContent = message;
log("STATUS:", message);
}
function safeJson(value) {
try {
return JSON.stringify(value);
} catch (e) {
return String(value);
}
}
function setAttrs(el, attrs) {
Object.entries(attrs).forEach(([key, value]) => {
if (value === null || typeof value === "undefined") return;
if (typeof value === "object") {
const attrValue = Object.entries(value)
.map(([k, v]) => `${k}: ${v}`)
.join("; ");
el.setAttribute(key, attrValue);
} else {
el.setAttribute(key, value);
}
});
return el;
}
function createEntity(tag, attrs, parent) {
const el = document.createElement(tag);
setAttrs(el, attrs || {});
if (parent) parent.appendChild(el);
return el;
}
function checkSecureContext() {
const isLocalhost =
location.hostname === "localhost" ||
location.hostname === "127.0.0.1" ||
location.hostname === "::1";
const isSecure =
window.isSecureContext ||
location.protocol === "https:" ||
isLocalhost;
if (!isSecure) {
throw new Error(
"Camera requires HTTPS or localhost. Use https:// or localhost."
);
}
log("Secure context OK");
return true;
}
function checkCameraSupport() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error("navigator.mediaDevices.getUserMedia is not supported.");
}
log("Camera API OK");
return true;
}
async function checkHttpFile(url) {
try {
const res = await fetch(url, {
method: "HEAD",
cache: "no-store"
});
if (res.ok) {
return {
ok: true,
url,
status: res.status,
method: "HEAD"
};
}
return {
ok: false,
url,
status: res.status,
method: "HEAD"
};
} catch (headError) {
try {
const res = await fetch(url, {
method: "GET",
cache: "no-store"
});
return {
ok: res.ok,
url,
status: res.status,
method: "GET"
};
} catch (getError) {
return {
ok: false,
url,
error: String(getError)
};
}
}
}
async function findFirstExistingFile(urls, label) {
for (const url of urls) {
const result = await checkHttpFile(url);
log(`Checking ${label}: ${url}`, result);
if (result.ok) {
log(`${label} found: ${url}`);
return url;
}
}
throw new Error(`${label} not found. Checked: ${urls.join(", ")}`);
}
function loadScriptOnce(src) {
return new Promise((resolve, reject) => {
const existing = document.querySelector(`script[src="${src}"]`);
if (existing) {
log(`Script already exists: ${src}`);
resolve();
return;
}
const script = document.createElement("script");
script.src = src;
script.async = false;
script.onload = () => {
log(`Script loaded: ${src}`);
resolve();
};
script.onerror = () => {
reject(new Error(`Failed to load script: ${src}`));
};
document.head.appendChild(script);
});
}
async function loadLibrariesIfNeeded() {
if (scriptsLoaded) {
log("Libraries already loaded");
return;
}
setStatus("Checking local libraries...");
const aframeCheck = await checkHttpFile(LOCAL_AFRAME);
log("AFrame file check", aframeCheck);
if (!aframeCheck.ok) {
throw new Error(`AFrame not found at ${LOCAL_AFRAME}`);
}
const mindarCheck = await checkHttpFile(LOCAL_MINDAR_FACE);
log("MindAR file check", mindarCheck);
if (!mindarCheck.ok) {
throw new Error(`MindAR Face not found at ${LOCAL_MINDAR_FACE}`);
}
setStatus("Loading AFrame...");
await loadScriptOnce(LOCAL_AFRAME);
setStatus("Loading MindAR Face...");
await loadScriptOnce(LOCAL_MINDAR_FACE);
validateLibraries();
scriptsLoaded = true;
log("All libraries loaded successfully");
}
function validateLibraries() {
if (!window.AFRAME) {
throw new Error("AFRAME is not available after loading script.");
}
/*
?? ???????? ????? MindAR ???? ??? namespace ?????? expose ????.
???? ???? ??? presence component ??? ?? register ??? ??? ???.
*/
log("AFRAME version", window.AFRAME.version || "unknown");
const hasMindARFace =
window.AFRAME.components &&
(
window.AFRAME.components["mindar-face"] ||
window.AFRAME.components["mindar-face-target"]
);
if (!hasMindARFace) {
log("Warning: MindAR components not visible immediately. Continuing...");
} else {
log("MindAR Face components OK");
}
}
async function testCameraPermission() {
setStatus("Requesting camera permission...");
const constraints = {
video: {
facingMode: currentFacingMode
},
audio: false
};
const stream = await navigator.mediaDevices.getUserMedia(constraints);
log("Camera permission OK");
stream.getTracks().forEach((track) => track.stop());
return true;
}
function fixMindARVideoLayer() {
const videos = Array.from(document.querySelectorAll("video"));
videos.forEach((video) => {
video.setAttribute("playsinline", "");
video.setAttribute("webkit-playsinline", "");
video.muted = true;
Object.assign(video.style, {
position: "fixed",
inset: "0",
width: "100vw",
height: "100vh",
objectFit: "cover",
zIndex: "1",
background: "#000"
});
});
const canvases = Array.from(
document.querySelectorAll("canvas, .a-canvas")
);
canvases.forEach((canvas) => {
Object.assign(canvas.style, {
position: "fixed",
inset: "0",
width: "100vw",
height: "100vh",
zIndex: "2",
background: "transparent",
pointerEvents: "none"
});
});
const scene = document.querySelector("a-scene");
if (scene) {
Object.assign(scene.style, {
position: "fixed",
inset: "0",
width: "100vw",
height: "100vh",
zIndex: "2",
background: "transparent"
});
}
}
function startTemporaryVideoLayerFixer() {
stopTemporaryVideoLayerFixer();
let counter = 0;
videoLayerFixer = setInterval(() => {
fixMindARVideoLayer();
counter++;
if (counter > 80) {
stopTemporaryVideoLayerFixer();
}
}, 100);
}
function stopTemporaryVideoLayerFixer() {
if (videoLayerFixer) {
clearInterval(videoLayerFixer);
videoLayerFixer = null;
}
}
function stopAndRemoveOrphanVideos() {
const videos = Array.from(document.querySelectorAll("video"));
videos.forEach((video) => {
try {
if (video.srcObject) {
video.srcObject.getTracks().forEach((track) => track.stop());
video.srcObject = null;
}
} catch (e) {
log("Video cleanup warning", String(e));
}
if (!video.closest("a-scene")) {
video.remove();
}
});
}
function removeExistingScene() {
const oldScene = document.querySelector("a-scene");
if (oldScene) {
try {
if (oldScene.systems && oldScene.systems["mindar-face-system"]) {
oldScene.systems["mindar-face-system"].stop();
}
} catch (e) {
log("MindAR stop warning", String(e));
}
oldScene.remove();
}
stopAndRemoveOrphanVideos();
}
function createFaceScannerEffects(scene) {
/*
??? ??? ???? effect??? ??????? ???? ??? ???? ???.
????? ?? ???? ??? ? ??? ????.
*/
const centerAnchor = createEntity(
"a-entity",
{
"mindar-face-target": `anchorIndex: ${GLASSES_CONFIG.anchorIndex}`
},
scene
);
const ring = createEntity(
"a-ring",
{
position: "0 0 0.03",
rotation: "0 0 0",
radiusInner: "0.115",
radiusOuter: "0.118",
material:
"color: #22d3ee; transparent: true; opacity: 0.35; side: double"
},
centerAnchor
);
ring.setAttribute("animation", {
property: "rotation",
to: "0 0 360",
dur: 3500,
loop: true,
easing: "linear"
});
const foreheadAnchor = createEntity(
"a-entity",
{
"mindar-face-target": "anchorIndex: 10"
},
scene
);
const marker = createEntity(
"a-sphere",
{
position: "0 0 0.02",
radius: "0.012",
material:
"color: #67e8f9; transparent: true; opacity: 0.7; emissive: #22d3ee; emissiveIntensity: 0.35"
},
foreheadAnchor
);
marker.setAttribute("animation", {
property: "scale",
from: "1 1 1",
to: "1.35 1.35 1.35",
dur: 900,
dir: "alternate",
loop: true,
easing: "easeInOutSine"
});
const noseAnchor = createEntity(
"a-entity",
{
"mindar-face-target": "anchorIndex: 1"
},
scene
);
createEntity(
"a-sphere",
{
position: "0 0 0.018",
radius: "0.008",
material:
"color: #ffffff; transparent: true; opacity: 0.45; emissive: #ffffff; emissiveIntensity: 0.2"
},
noseAnchor
);
setEffectsVisibility();
}
function setEffectsVisibility() {
screenHud.style.display = effectsEnabled ? "block" : "none";
const scannerObjects = document.querySelectorAll(
"a-ring, a-sphere"
);
scannerObjects.forEach((el) => {
el.setAttribute("visible", effectsEnabled ? "true" : "false");
});
}
function createGlassesAnchor(scene) {
const glassesAnchor = createEntity(
"a-entity",
{
"mindar-face-target": `anchorIndex: ${GLASSES_CONFIG.anchorIndex}`
},
scene
);
const glasses = createEntity(
"a-gltf-model",
{
id: "glassesModelEntity",
src: "#glassesAsset",
position: GLASSES_CONFIG.position,
rotation: GLASSES_CONFIG.rotation,
scale: GLASSES_CONFIG.scale,
visible: "true"
},
glassesAnchor
);
glasses.addEventListener("model-loaded", () => {
log("Glasses GLB model-loaded OK");
setStatus("Face tracking ready");
});
glasses.addEventListener("model-error", (event) => {
log("Glasses GLB model-error", event.detail || event);
setStatus("Glasses model error - check debug");
});
return glasses;
}
async function createARScene() {
removeExistingScene();
selectedGlassesModelPath = await findFirstExistingFile(
GLASSES_MODEL_CANDIDATES,
"Glasses model"
);
setStatus("Creating AR scene...");
const scene = document.createElement("a-scene");
/*
autoStart true ???? ??? ?? ????? ??? ????? MindAR ???? ???.
*/
scene.setAttribute(
"mindar-face",
[
"autoStart: true",
`facingMode: ${currentFacingMode}`,
"uiLoading: no",
"uiScanning: no",
"uiError: no"
].join("; ")
);
scene.setAttribute("embedded", "");
scene.setAttribute("vr-mode-ui", "enabled: false");
scene.setAttribute("device-orientation-permission-ui", "enabled: false");
scene.setAttribute(
"renderer",
[
"alpha: true",
"antialias: true",
"colorManagement: true",
"physicallyCorrectLights: true",
"precision: high"
].join("; ")
);
/*
assets ???? ??? ?? ??? ???? scene ????? ???.
*/
const assets = createEntity(
"a-assets",
{
timeout: "30000"
},
scene
);
const assetItem = createEntity(
"a-asset-item",
{
id: "glassesAsset",
src: selectedGlassesModelPath,
crossorigin: "anonymous"
},
assets
);
assetItem.addEventListener("loaded", () => {
log("Glasses asset loaded", selectedGlassesModelPath);
});
assetItem.addEventListener("error", (event) => {
log("Glasses asset error", event);
setStatus("Cannot load glasses asset");
});
createEntity(
"a-camera",
{
active: "false",
position: "0 0 0"
},
scene
);
/*
??? ???? ???? GLB
??? ??? PBR ???? ???? ??? ???? ??? ???? ?? ?????? ???? ???.
*/
createEntity(
"a-light",
{
type: "ambient",
intensity: "1.25",
color: "#ffffff"
},
scene
);
createEntity(
"a-light",
{
type: "directional",
intensity: "1.1",
color: "#ffffff",
position: "0 1 1"
},
scene
);
/*
????
*/
createGlassesAnchor(scene);
/*
???????? ????
*/
createFaceScannerEffects(scene);
scene.addEventListener("loaded", () => {
log("A-Frame scene loaded");
fixMindARVideoLayer();
});
scene.addEventListener("arReady", () => {
log("MindAR arReady");
setStatus("AR ready - show your face");
fixMindARVideoLayer();
});
scene.addEventListener("arError", (event) => {
log("MindAR arError", event.detail || event);
setStatus("AR error - check debug");
});
document.body.appendChild(scene);
startTemporaryVideoLayerFixer();
log("Scene created successfully");
}
async function switchCamera() {
if (isStarting) return;
currentFacingMode = currentFacingMode === "user" ? "environment" : "user";
log("Switching camera", currentFacingMode);
setStatus(`Switching camera: ${currentFacingMode}`);
try {
await createARScene();
} catch (e) {
log("Switch camera failed", String(e));
setStatus("Switch camera failed");
}
}
async function startAR() {
if (isStarting) return;
isStarting = true;
startButton.disabled = true;
try {
debugPanel.style.display = debugEnabled ? "block" : "none";
setStatus("Checking environment...");
checkSecureContext();
checkCameraSupport();
await testCameraPermission();
await loadLibrariesIfNeeded();
await createARScene();
startButton.style.display = "none";
controlPanel.style.display = "flex";
screenHud.style.display = effectsEnabled ? "block" : "none";
setStatus("Show your face");
log("AR started successfully");
} catch (error) {
console.error(error);
log("START ERROR:", String(error && error.message ? error.message : error));
setStatus("Error - check debug panel");
startButton.disabled = false;
startButton.style.display = "block";
} finally {
isStarting = false;
}
}
async function boot() {
debugPanel.innerHTML = "";
log("Booting...");
try {
checkSecureContext();
checkCameraSupport();
setStatus("Ready");
startButton.style.display = "block";
startButton.disabled = false;
/*
????? ??? ????? ????? ??? ????? ?????? ?? ??? ?? Start ?? ???? ???.
????? ???? ??? ?? Permission ?????? ???.
*/
findFirstExistingFile(GLASSES_MODEL_CANDIDATES, "Glasses model")
.then((url) => {
selectedGlassesModelPath = url;
log("Initial glasses path OK", url);
})
.catch((e) => {
log("Initial glasses path error", String(e.message || e));
});
} catch (error) {
log("BOOT ERROR:", String(error && error.message ? error.message : error));
setStatus("Boot error - check debug");
startButton.style.display = "none";
}
}
startButton.addEventListener("click", startAR);
toggleDebugButton.addEventListener("click", () => {
debugEnabled = !debugEnabled;
debugPanel.style.display = debugEnabled ? "block" : "none";
});
toggleEffectsButton.addEventListener("click", () => {
effectsEnabled = !effectsEnabled;
setEffectsVisibility();
log("Effects", effectsEnabled ? "enabled" : "disabled");
});
switchCameraButton.addEventListener("click", switchCamera);
window.addEventListener("resize", () => {
fixMindARVideoLayer();
});
window.addEventListener("orientationchange", () => {
setTimeout(fixMindARVideoLayer, 300);
setTimeout(fixMindARVideoLayer, 900);
});
boot();
</script>
</body>
</html>