تعليق: التقط صورة في HTML5 أولاً وقبل كل شيء ، دعنا نلقي نظرة على هيكل رمز HTML. بالطبع ، يجب تحميل هذا الجزء من محتوى DOM ديناميكيًا بعد أن يسمح المستخدم باستخدام أحداث الكاميرا. يمكن للأصدقاء المهتمين التعرف على ذلك.
عنوان العرض التوضيحي: عرض صور HTML5أولاً ، دعونا نلقي نظرة على بنية رمز HTML. بالطبع ، يجب تحميل هذا الجزء من محتوى DOM ديناميكيًا بعد أن يسمح المستخدم باستخدام أحداث الكاميرا الخاصة بهم.
ملاحظة: نستخدم دقة 640 × 480. إذا كنت تستخدم JS Dynamic Generation ، فيمكنك التحكم في الدقة بمرونة.
<!-
البيان: يجب إنشاء هذا div بشكل ديناميكي بعد السماح لكاميرا الويب ، كاميرا الويب
العرض والارتفاع: 640 * 480 ، بالطبع ، يمكن التحكم فيه ديناميكيًا!
->
<!-
من الناحية المثالية ، لم يتم إنشاء هذه العناصر حتى يتم تأكيد أن
يدعم العميل الفيديو/الكاميرا ، ولكن من أجل توضيح
العناصر المعنية ، يتم إنشاؤها بميزات (وليس JavaScript)
->
<video autoplay> </video>
<NUNTY> SNAP PHOTO </utton>
<Canvas> </tanvas>
جافا سكريبت
طالما تم إنشاء عنصر HTML أعلاه ، سيكون جزء JavaScript أبسط مما تعتقد:
// تعيين الاستماع إلى الحدث ، يتم تحميل محتوى DOM ، وهو ما يشبه تأثير $. READER () JQuery.
Window.AdDeventListener ("DomContentLoaded" ، Function () {
// سيتم استخدام عنصر القماش للالتقاط
var canvas = document.getElementById ("canvas") ،
السياق = canvas.getContext ("2D") ،
// عنصر الفيديو ، لتلقي وتشغيل دفق البيانات للكاميرا
video = document.getElementById ("video") ،
VideoObj = {"Video": True} ،
// تطبع وظيفة رد الاتصال على رسالة خطأ على وحدة التحكم في وحدة التحكم
errback = function (خطأ) {
if ("" object "=== typeof window.console) {
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) ؛
}
// استمع إلى حدث زر الصورة
document.getElementById ("snap"). addeventListener ("Click" ، function () {
// ارسم على القماش
context.drawImage (فيديو ، 0 ، 0 ، 640 ، 480) ؛
}) ؛
}، خطأ شنيع)؛
أخيرًا ، تذكر أن تضع صفحة الويب الخاصة بك أسفل خادم الويب والوصول إليها من خلال بروتوكول HTTP.
بالإضافة إلى ذلك ، يجب أن تكون إصدار المتصفح أحدث ويدعم ميزات جديدة HTML5.
المترجم غير مؤهل ولم يترجم وفقًا للنص الأصلي. المستعرض المستخدم هو Chrome 28.
أخيرًا ، انشر الكود الكامل ، وهو أكثر صلابة.
<! doctype html>
<html>
<head>
<title> Browser WebCamera </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "reved by:">
<script>
// تعيين الاستماع إلى الحدث ، يتم تحميل محتوى DOM ، وهو ما يشبه تأثير $. READER () JQuery.
Window.AdDeventListener ("DomContentLoaded" ، Function () {
// سيتم استخدام عنصر القماش للالتقاط
var canvas = document.getElementById ("canvas") ،
السياق = canvas.getContext ("2D") ،
// عنصر الفيديو ، لتلقي وتشغيل دفق البيانات للكاميرا
video = document.getElementById ("video") ،
VideoObj = {"Video": True} ،
// تطبع وظيفة رد الاتصال على رسالة خطأ على وحدة التحكم في وحدة التحكم
errback = function (خطأ) {
if ("" object "=== typeof window.console) {
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) ؛
}
// استمع إلى حدث زر الصورة
document.getElementById ("snap"). addeventListener ("Click" ، function () {
// ارسم على القماش
context.drawImage (فيديو ، 0 ، 0 ، 640 ، 480) ؛
}) ؛
}، خطأ شنيع)؛
</script>
</head>
<body>
<viv>
<!-
البيان: يجب إنشاء هذا div بشكل ديناميكي بعد السماح لكاميرا الويب ، كاميرا الويب
العرض والارتفاع: 640 * 480 ، بالطبع ، يمكن التحكم فيه ديناميكيًا!
->
<!-
من الناحية المثالية ، لم يتم إنشاء هذه العناصر حتى يتم تأكيد أن
يدعم العميل الفيديو/الكاميرا ، ولكن من أجل توضيح
العناصر المعنية ، يتم إنشاؤها بميزات (وليس JavaScript)
->
<video autoplay> </video>
<NUNTY> SNAP PHOTO </utton>
<Canvas> </tanvas>
</div>
</body>
</html>