<!doctype html>
<title>التقاط صورة تلقائيًا — باذن المستخدم</title>
<style>
body { font-family: system-ui, Arial; display:flex; gap:16px; align-items:flex-start; padding:18px; }
video, canvas, img { border:1px solid #ddd; border-radius:8px; max-width:320px; width:100%; }
#controls { display:flex; flex-direction:column; gap:8px; }
button { padding:8px 12px; border-radius:6px; cursor:pointer; }
.note { font-size:13px; color:
#444 }
</style>
كاميرا مباشرة (اضغط سماح)
عند منح الإذن، الصفحة تلتقط صورة تلقائيًا بعد ثانية.
التقاط مرة ثانية
تحميل الصورة
![الصورة الملتقطة]()
<script>
(async function(){
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const photo = document.getElementById('photo');
const downloadLink = document.getElementById('downloadLink');
const retryBtn = document.getElementById('retry');
// خيارات: نطلب الكاميرا الأمامية (user) — غيّر إلى "environment" للكاميرا الخلفية
const constraints = { video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false };
let stream = null;
async function startCamera() {
// اطلب إذن واخذ التيار فقط عند الموافقة
try {
stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
// تأكد أن الفيديو بدأ بالعرض قبل التقاط صورة
await video.play();
// ننتظر 1 ثانية ثم ناخذ صورة (تقدر تغير اللازمة)
setTimeout(captureOnce, 1000);
} catch (err) {
alert('فشل الوصول للكاميرا: ' + (err && err.message ? err.message : err));
console.error(err);
}
}
function captureOnce() {
if (!stream) return;
// اضبط قياسات الكانفس بحسب الفيديو
const w = video.videoWidth;
const h = video.videoHeight;
if (!w || !h) {
console.warn('الحصول على أبعاد الفيديو لم يكتمل بعد.');
setTimeout(captureOnce, 300); // حاول مرة ثانية لو ما جاهز
return;
}
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
// حول المحتوى إلى DataURL (PNG)
const dataUrl = canvas.toDataURL('image/png');
photo.src = dataUrl;
photo.style.display = 'block';
downloadLink.href = dataUrl;
downloadLink.style.display = 'inline-block';
downloadLink.textContent = 'حفظ الصورة';
// إذا تبغى توقف البث بعد التقاط الصورة (لحفظ الخصوصية)
stopStream();
}
function stopStream() {
if (!stream) return;
stream.getTracks().forEach(t => t.stop());
stream = null;
video.srcObject = null;
}
retryBtn.addEventListener('click', () => {
// إعادة المحاولة: اخفظ العنصر الحالي ثم ابدأ من جديد
photo.src = '';
downloadLink.style.display = 'none';
startCamera();
});
// ابدأ العملية (سيطلب إذن الكاميرا تلقائيًا)
startCamera();
// =========================================================
// ملاحظة: لو تبغى التقاط تلقائي متكرر بدل مرة واحدة، تقدر تنادي captureOnce() بفواصل زمنية
// لكن لازم تخلي المستخدم يعلم ويوافق على التسجيل المستمر.
// =========================================================
})();
</script>
