التعامل مع كاميرا الويب فى جافاسكربت

لا يخفى على أحد قوة لغة جافاسكربت فى الويب وأمكانياتها الكبيرة كونها تعمل على المتصفح الخاص بالزائر, إحد الأشياء المهمة التى تستطيع جافاسكربت فعلها هى التعامل مع كاميرا الويب الخاصة بالزائر.

سنستعرض سويًا فى هذا المقال كيفية التعامل مع الكاميرا عن طريقة لغة جافاسكربت.

سنقوم بعرض كود المشروع ثم بعد ذلك نقوم بشرح كل جزء على حده.

👇 لاحظ ستحتاج لفتح الكود فى Codepen عن طريق الضغط على Codepen فى الأسفل لكى تفتح الكاميرا

See the Pen Using web camera in JavaScript example by amrelarabi (@amrelarabi) on CodePen.

اولًا جزء HTML

• وسم <video> : هذا الوسم خاص بعرض مقاطع الفيديو او البث فى HTML , ويمكن ان يحتوى على وسم <soruce> او اكثر لتعين مصدر الفيديو وسيقوم المتصفح تلقائيًا بإستخدام اول مصدر مدعوم من المتصفح ولكن فى هذا المثال لا نحتاج إلى ذلك حيث ان مصدر الفيديو سيتم تعيينه لاحقًا بإستخدام جافاسكربت.
• وسم <button> : هذا هو الزر الذى سنقوم بالضغط عليه لأخذ صورة لاحظ اننا قمنا بعيين id وهو snap لإستخدامه فى جافاسكربت وCSS كما سترى لاحقًا.
• الجزء الخاص بالمودل modal : وهو عنصر منبثق يظهر تلقائى بعد الضغط على زر اخذ الصورة ويحتوى على جزء الاول زر لغلقه والثانى المحتوى الخاص به.
• الوسم <canvas> : وهو من العناصر الجديدة فى HTML من الإصدار الخامس HTML و هو بإختصار عنصر يستخدم فى الرسم, يمكنك معرفة المزيد فى هذا الدرس من دورة HTML5.

ثانيًا جزء CSS

لن نتطرق لكامل التنسيقات هنا ولكن نود لفت نظرك لجزء مهم وهو إخفاء Canvas عن طريق display: none وقمنا بذلك لاننا نريد canvas بشكل مؤقتًا كما سترى فى كود JavaScript ولا نريد إظهاره نفسه وانما نقوم بتصدير الصورة الملتقطة إلى المودل كما سترى فى كود JavaScript.

أخيرًا جزء JavaScript

const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const snap = document.getElementById("snap");

فى هذا الجزء نقوم بتعيين بعض المتغيرات وهى الفيديو و Canvas و زر الإلتقاط, لاحظ ان getElementById تقوم بتحديد العنصر عن طريق المعرف الخاص به فى جزء HTML.

const modal = document.getElementById("modal");
const modalImg = document.getElementById("modal-img");
const closeBtn = document.querySelector(".close");

فى هذا الجزء نقوم بعيين متغيرات نختار فيها Modal (المنبثق) واجزائة المختلفة بهدف التحكم فيها لاحقًا وهى العنصر الأساسى والصورة داخله وايقونة الإغلاق.

// بدء تشغيل الكاميرا
navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((stream) => {
    video.srcObject = stream;
    video.play();
  })
  .catch((error) => {
    console.log(error);
  });

هذا الجزء هو المسئول عن طلب تشغيل الكاميرا, حيث أن navigator.mediaDevices يقوم بطلب تشغيل الكاميرا وعند الموافقة تبدء الكاميرا فى العمل, جزء then يسمى فى جافاسكربت Promise اي وعد اي انه هذا الدالة لاتنفذ لاحظيًا ولكن تنفذ فى المستقبل عندما يحدث شئ معين.

فى هذه الحالة كأننا نطلب من المتصفح أن يفتح الكاميرا وحينما تفتح الكاميرا (ربما بعد موافقة المستخدم) نقوم بتنفيذ الجزء داخل Then ام إذا حدث شئ اخر جعل الكاميرا لاتفتح (يقوم المستخدم مثلًا برفض الوصول للكاميرا او لا يوجد كاميرا بالأساس) نقوم بتفيذ جزء Catch وربما نظهر الخطاء للمستخدم.

// عند الضغط على زر الإلتقاط قم برسم الصورة على Canvas
snap.addEventListener("click", () => {
  const context = canvas.getContext("2d");
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

هذا الجزء نخبر المتصفح انه عند الضغط على زر الإلتقاط نقوم برسم الصورة الحالية للفيديو على العنصر Canvas.

الدالة drawImage تأخذ العديد من المعاملات ولكن هنا للتبسيط قمنا بملء 5 منهم الاول هو الصورة المراد رسمها وفى هذه الحالة هو الفيديو الحالى, الثانى هو X وهو المحور الأفقى الذى سترسم عليه الصور و Y هو المحور الرأسي ثم عرض وطول الصورة وقما بتحديدهم نفس عرض وصول Canvas اي ان الصورة ستملىء Canvas بالكامل.

  // نقوم بعد ذلك بتحويل الصورة إلى صيغة Data ونقوم بتعيين Src للصورة لتظهر فى المودل
  const dataURL = canvas.toDataURL();
  modalImg.src = dataURL;
  modal.style.display = "block";

هذا الجزء يقوم بتحويل Canvas + الصورة المرسوم عليه إلى صيغة Data URL وهى صيغة نصية للصورة على شكل كود base64 كالتالى

data:[<mediatype>][;base64],<data>

ويمكن إستخدام هذا الكود وتعينه فى Src الخاص بعنصر الصورة لعرضها على المتصفح كما فى هذا السطر.

modalImg.src = dataURL;

// عند الضغط على علامة الإغلاق فى المودل
closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});

// الإغلاق ايضًا عند الضغط خارج المودل
window.addEventListener("click", (event) => {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

الجزء الأخير هو لغلق الصورة المنبثقة عند الضغط على علامة X او عند الضغط خارج الصندوق.

إلى هنا نكون قد انتهينا إذا افادك الدرس لاتنسى مشاركته ليستفيد الجميع.