تصميم قواعد بيانات
#000002
تصاميم وايقونات
#000003
الرئيسيةتطويرالتعامل مع كاميرا الويب فى جافاسكربت
#000004
التعامل مع كاميرا الويب فى جافاسكربت
#000005
لا يخفى على أحد قوة لغة جافاسكربت فى الويب وأمكانياتها الكبيرة كونها تعمل على المتصفح الخاص بالزائر, إحد الأشياء المهمة التى تستطيع جافاسكربت فعلها هى التعامل مع كاميرا الويب الخاصة بالزائر.
#000006
سنستعرض سويًا فى هذا المقال كيفية التعامل مع الكاميرا عن طريقة لغة جافاسكربت.
#000007
سنقوم بعرض كود المشروع ثم بعد ذلك نقوم بشرح كل جزء على حده.
#000008
? لاحظ ستحتاج لفتح الكود فى Codepen عن طريق الضغط على Codepen فى الأسفل لكى تفتح الكاميرا
#000009
وسم <button> : هذا هو الزر الذى سنقوم بالضغط عليه لأخذ صورة لاحظ اننا قمنا بعيين id وهو snap لإستخدامه فى جافاسكربت وCSS كما سترى لاحقًا.
الجزء الخاص بالمودل modal : وهو عنصر منبثق يظهر تلقائى بعد الضغط على زر اخذ الصورة ويحتوى على جزء الاول زر لغلقه والثانى المحتوى الخاص به.
الوسم <canvas> : وهو من العناصر الجديدة فى HTML من الإصدار الخامس HTML و هو بإختصار عنصر يستخدم فى الرسم, يمكنك معرفة المزيد فى هذا الدرس من دورة HTML5.
#000010
فى هذا الجزء نقوم بعيين متغيرات نختار فيها Modal (المنبثق) واجزائة المختلفة بهدف التحكم فيها لاحقًا وهى العنصر الأساسى والصورة داخله وايقونة الإغلاق.
#000012
هذا الجزء هو المسئول عن طلب تشغيل الكاميرا, حيث أن navigator.mediaDevices يقوم بطلب تشغيل الكاميرا وعند الموافقة تبدء الكاميرا فى العمل, جزء then يسمى فى جافاسكربت Promise اي وعد اي انه هذا الدالة لاتنفذ لاحظيًا ولكن تنفذ فى المستقبل عندما يحدث شئ معين.
#000013
فى هذه الحالة كأننا نطلب من المتصفح أن يفتح الكاميرا وحينما تفتح الكاميرا (ربما بعد موافقة المستخدم) نقوم بتنفيذ الجزء داخل Then ام إذا حدث شئ اخر جعل الكاميرا لاتفتح (يقوم المستخدم مثلًا برفض الوصول للكاميرا او لا يوجد كاميرا بالأساس) نقوم بتفيذ جزء Catch وربما نظهر الخطاء للمستخدم.
#000014
هذا الجزء نخبر المتصفح انه عند الضغط على زر الإلتقاط نقوم برسم الصورة الحالية للفيديو على العنصر Canvas.
#000015
الدالة drawImage تأخذ العديد من المعاملات ولكن هنا للتبسيط قمنا بملء 5 منهم الاول هو الصورة المراد رسمها وفى هذه الحالة هو الفيديو الحالى, الثانى هو X وهو المحور الأفقى الذى سترسم عليه الصور و Y هو المحور الرأسي ثم عرض وطول الصورة وقما بتحديدهم نفس عرض وصول Canvas اي ان الصورة ستملىء Canvas بالكامل.
#000016
هذا الجزء يقوم بتحويل Canvas + الصورة المرسوم عليه إلى صيغة Data URL وهى صيغة نصية للصورة على شكل كود base64 كالتالى
#000017
ويمكن إستخدام هذا الكود وتعينه فى Src الخاص بعنصر الصورة لعرضها على المتصفح كما فى هذا السطر.
#000018
الجزء الأخير هو لغلق الصورة المنبثقة عند الضغط على علامة X او عند الضغط خارج الصندوق.
#000019
اشترك فى القائمة البريدية
#000021
شارك على وسائل التواصل
#000022
ما هي الخدمات التي تحصل عليها من جوجل غير خدمة البحث
#000023
اشهر تخصصات تكنولوجيا المعلومات
#000024
كيف يعمل بحث جوجل Google Crawler ؟
#000025
اترك تعليقاً إلغاء الرد
#000026
البريد الإلكتروني*
#000028
يرجى إدخال الإجابة بالأرقام:
#000029
كتب قواعد بيانات
#000032