التعليق: لم تتم مزامنة واجهات برمجة التطبيقات العميل على الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية في البداية. في البداية ، هناك دائمًا بعض الميزات وواجهة برمجة التطبيقات المقابلة على الأجهزة المحمولة أولاً ، ولكن ببطء ، ستظهر واجهات برمجة التطبيقات هذه على أجهزة الكمبيوتر المكتبية. إحدى تقنيات واجهة التطبيق هي واجهة برمجة تطبيقات GetUsermedia ، والتي تتيح لمطوري التطبيقات الوصول إلى كاميرات المستخدمين أو الكاميرات المدمجة.
لم يتم مزامنة واجهات برمجة تطبيقات العميل على الأجهزة المحمولة وأجهزة الكمبيوتر المكتبية في البداية. في البداية ، هناك دائمًا بعض الميزات وواجهة برمجة التطبيقات المقابلة على الأجهزة المحمولة أولاً ، ولكن ببطء ، ستظهر واجهات برمجة التطبيقات هذه على أجهزة الكمبيوتر المكتبية. إحدى تقنيات واجهة التطبيق هي واجهة برمجة تطبيقات GetUsermedia ، والتي تتيح لمطوري التطبيقات الوصول إلى كاميرات المستخدمين أو الكاميرات المدمجة. اسمحوا لي أن أوضح لك كيفية الوصول إلى الكاميرا من خلال متصفح واستخراج لقطات الشاشة.
رمز HTML
لقد كتبت بعض التعليقات في الكود التالي ، يرجى قراءة:
<!-
من الناحية المثالية ، يجب علينا أولاً تحديد ما إذا كان جهازك قيد التشغيل
هناك كاميرات أو كاميرات ، ولكن من أجل البساطة ، نحن هنا مباشرة
اكتب علامات HTML بدلاً من استخدام JavaScript للحكم أولاً
ثم قم بإنشاء هذه العلامات ديناميكيًا
->
<video autoplay> </video>
<NUNTY> SNAP PHOTO </utton>
<Canvas> </tanvas>
قبل كتابة العلامات أعلاه ، يجب عليك تحديد ما إذا كان عميل المستخدم لديه دعم الكاميرا. ومع ذلك ، لكي لا تكون مزعجة للغاية ، تتم كتابة علامات HTML هذه مباشرة هنا. تجدر الإشارة إلى أن الطول والعرض الذي نستخدمه هنا هو 640 × 480.
رمز JavaScript
نظرًا لأننا نكتب HTML باليد ، فإن رمز JS التالي سيكون أبسط بكثير مما تعتقد.
// ضع مستمعي الأحداث في مكانهم
Window.AdDeventListener ("DomContentLoaded" ، Function () {
// عناصر الاستيلاء ، إنشاء إعدادات ، إلخ.
var canvas = document.getElementById ("canvas") ،
السياق = canvas.getContext ("2D") ،
video = document.getElementById ("video") ،
VideoObj = {"Video": True} ،
errback = function (خطأ) {
console.log ("خطأ في الالتقاط الفيديو:" ، error.code) ؛
} ؛
// ضع مستمعي الفيديو في مكانهم
if (navigator.getusermedia) {// Standard
navigator.getusermedia (videoobj ، function (Stream) {
video.src = دفق ؛
video.play () ؛
} ، errback) ؛
} آخر إذا (navigator.webkitgetusermedia) {// webkit-prefixed
navigator.webkitgetusermedia (videoobj ، وظيفة (دفق) {
video.src = window.webkiturl.createObjecturl (Stream) ؛
video.play () ؛
} ، errback) ؛
}
وإلا إذا (navigator.mozgetusermedia)
navigator.mozgetusermedia (videoobj ، function (Stream) {
video.src = window.url.createObjecturl (Stream) ؛
video.play () ؛
} ، errback) ؛
}
}، خطأ شنيع)؛
بمجرد تحديد أن متصفح المستخدم يدعم getUsermedia ، فإن ما يلي بسيط للغاية. تحتاج فقط إلى تعيين SRC لعنصر الفيديو هذا على اتصال الفيديو المباشر للكاميرا للمستخدم. هذا هو كل الأشياء التي تحتاج إلى القيام بها للوصول إلى الكاميرا مع متصفح!
لا يمكن قول وظيفة التقاط الصور إلا أنها أكثر تعقيدًا. نضيف شاشة إلى الزر لرسم الفيديو على القماش.
// توجيه إجراء الصورة
document.getElementByid ("Snap")
.addeventListener ("Click" ، Function () {
context.drawImage (فيديو ، 0 ، 0 ، 640 ، 480) ؛
}) ؛
بالطبع ، يمكنك أيضًا إضافة بعض تأثيرات التصفية إلى الصورة ...
في الماضي ، كنا بحاجة إلى استخدام المكونات الإضافية لجهة خارجية للوصول إلى كاميرا المستخدم من المتصفح ، والتي كانت معقدة بعض الشيء. الآن نحتاج فقط إلى تقنية HTML5 Canvas و JavaScript لتشغيل كاميرات المستخدمين بسهولة وبسرعة. لا يتعلق الأمر فقط بالوصول إلى الكاميرا ، ولكن أيضًا لأن تقنية Canvas HTML5 قوية للغاية بحيث يمكننا إضافة العديد من تأثيرات المرشح الرائعة إلى الصور. الآن ، استخدم الكاميرا الخاصة بك لالتقاط صورة لنفسك في متصفحك!