Fras

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <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>
</head>
<body>
  <div>
    <h3>كاميرا مباشرة (اضغط سماح)</h3>
    <video id="video" autoplay playsinline></video>
  </div>

  <div id="controls">
    <p class="note">عند منح الإذن، الصفحة تلتقط صورة تلقائيًا بعد ثانية.</p>
    <button id="retry">التقاط مرة ثانية</button>
    <a id="downloadLink" style="display:none;" download="capture.png">تحميل الصورة</a>
    <canvas id="canvas" style="display:none;"></canvas>
    <img id="photo" alt="الصورة الملتقطة" />
  </div>

<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>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fras #10698

كاميرا مباشرة (اضغط سماح)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Fras #10698

Description

كاميرا مباشرة (اضغط سماح)

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions