التقاط الصور والتحكّم في إعدادات الكاميرا

Miguel Casas-Sanchez

Sam Dutton

François Beaufort

ميزة "التقاط الصور" هي واجهة برمجة تطبيقات لالتقاط الصور الثابتة وضبط أجهزة الكاميرا الإعدادات. تتوفّر واجهة برمجة التطبيقات هذه في الإصدار 59 من Chrome على أجهزة Android وأجهزة الكمبيوتر المكتبي. قمنا أيضًا تم نشر مكتبة ImageCapture polyfill.

وتتيح واجهة برمجة التطبيقات إمكانية التحكم في ميزات الكاميرا مثل التكبير/التصغير والسطوع والتباين وISO وتوازن اللون الأبيض. وأفضل ما في الأمر هو أن ميزة "التقاط الصور" تتيح لك الوصول إلى إمكانات الدقة الكاملة لأي كاميرا أو كاميرا ويب متاحة في الجهاز. لقد استخدمت الأساليب السابقة لالتقاط الصور على الويب لقطات الفيديو، ذات دقة أقل من تلك المتاحة للصور الثابتة.

يتم إنشاء كائن ImageCapture باستخدام MediaStreamTrack كمصدر. تشير رسالة الأشكال البيانية تحتوي واجهة برمجة التطبيقات بعد ذلك على طريقتي التقاط takePhoto() وgrabFrame() وطرق واسترداد إمكانات الكاميرا وإعداداتها، وتغيير تلك الإعدادات.

أشغال

تتيح واجهة برمجة التطبيقات لميزة "التقاط الصور" الوصول إلى كاميرا من خلال MediaStreamTrack يتم الحصول عليها. من getUserMedia():

navigator.mediaDevices.getUserMedia({video: true})
    .then(gotMedia)
    .catch(error => console.error('getUserMedia() error:', error));

function gotMedia(mediaStream) {
    const mediaStreamTrack = mediaStream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(mediaStreamTrack);
    console.log(imageCapture);
}

يمكنك تجربة هذا الرمز من وحدة التحكّم في أدوات مطوّري البرامج.

التقاط

يمكن التقاط الصورة بطريقتين: إطار كامل ولقطة سريعة. takePhoto() تعرض Blob، نتيجة لتعرض فوتوغرافي واحد، يمكن تنزيلها أو تخزينها من خلال المتصفح أو عرضها في <img> العنصر. تستخدم هذه الطريقة أعلى درجة دقة متاحة للكاميرا الفوتوغرافية. على سبيل المثال:

const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('takePhoto() error:', error));

تعرض grabFrame() كائن ImageBitmap أو لقطة من فيديو مباشر. والتي يمكن (على سبيل المثال) رسمها على <canvas> ثم تتم معالجتها بعد ذلك تغيير قيم الألوان بشكل انتقائي. يُرجى العلم أنّ السمة ImageBitmap ستتضمّن فقط دقة مصدر الفيديو — والتي تكون عادةً أقل من درجة دقة الكاميرا إمكانات الصور الثابتة. على سبيل المثال:

const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
    .then(imageBitmap => {
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    })
    .catch(error => console.error('grabFrame() error:', error));

الإمكانات والإعدادات

هناك عدة طرق لمعالجة إعدادات الالتقاط، استنادًا إلى ما إذا كانت التغييرات ستنعكس في MediaStreamTrack أو يمكن فقط يظهر بعد takePhoto(). على سبيل المثال، يتمّ تغيير مستوى zoom مباشرةً. إلى MediaStreamTrack في حين أن نسبة تقليل العين الحمراء، عند ضبطها، تكون تسري فقط عند التقاط الصورة.

"منشور" يتم التلاعب بإمكانيات الكاميرا وإعداداتها من خلال المعاينة MediaStreamTrack: تعرض MediaStreamTrack.getCapabilities() MediaTrackCapabilities بالإمكانيات الملموسة المدعومة والنطاقات أو المسموح بها القيم، على سبيل المثال نطاق التكبير/التصغير المتوافق أو أوضاع موازنة اللون الأبيض المسموح بها. في المقابل، تعرض MediaStreamTrack.getSettings() MediaTrackSettings بالإعدادات الحالية الملموسة. ينتمي إلى وضع التكبير/التصغير والسطوع والكشاف هذه الفئة، على سبيل المثال:

var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
    zoomSlider.min = capabilities.zoom.min;
    zoomSlider.max = capabilities.zoom.max;
    zoomSlider.step = capabilities.zoom.step;
    zoomSlider.value = settings.zoom;
}

"أحداث غير مباشرة" يتم التلاعب بإمكانيات الكاميرا وإعداداتها من خلال كائن ImageCapture: يعرض ImageCapture.getPhotoCapabilities() PhotoCapabilities يتيح الوصول إلى المحتوى "غير مباشر" إمكانات الكاميرا المتاحة. وبالتالي، بدءًا من Chrome 61، ImageCapture.getPhotoSettings() يُنتج PhotoSettings بالإعدادات الحالية الملموسة. دقة الصورة، العين الحمراء التقليل ووضع الفلاش (باستثناء الكشاف) إلى هذا القسم، على سبيل المثال:

var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
    .then(function(photoCapabilities) {
    widthSlider.min = photoCapabilities.imageWidth.min;
    widthSlider.max = photoCapabilities.imageWidth.max;
    widthSlider.step = photoCapabilities.imageWidth.step;
    return imageCapture.getPhotoSettings();
    })
    .then(function(photoSettings) {
    widthSlider.value = photoSettings.imageWidth;
    })
    .catch(error => console.error('Error getting camera capabilities and settings:', error));

جارٍ الإعداد

"منشور" يمكن ضبط إعدادات الكاميرا من خلال المعاينة جهاز applyConstraints() الخاص بـ "MediaStreamTrack" القيود ، على سبيل المثال:

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

"أحداث غير مباشرة" يتم ضبط إعدادات الكاميرا وفقًا لإعدادات takePhoto() الاختيارية. PhotoSettings القاموس، على سبيل المثال:

var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
    .then(blob => {
    img.src = URL.createObjectURL(blob);
    img.onload = () => { URL.revokeObjectURL(this.src); }
    })
    .catch(error => console.error('Uh, oh, takePhoto() error:', error));

إمكانات الكاميرا

في حالة تشغيل التعليمة البرمجية أعلاه، ستلاحظ اختلافًا في الأبعاد بين grabFrame() وtakePhoto() نتيجة

تتيح الطريقة takePhoto() الوصول إلى أقصى درجة دقة للكاميرا.

بإمكان "grabFrame()" الحصول على VideoFrame المتاحة التالية في MediaStreamTrack. داخل عملية العرض، بينما يقاطع takePhoto() MediaStream، إعادة ضبط الكاميرا والتقاط الصورة (عادةً ما يكون بتنسيق مضغوط، وبالتالي Blob) ثم تستأنف MediaStreamTrack. وهذا يعني في الواقع الذي يتيح takePhoto() الوصول إلى الدقة الكاملة للصورة الثابتة إمكانات الكاميرا. في السابق، كان بإمكان "التقاط صورة" فقط في استدعاء drawImage() على عنصر canvas، باستخدام فيديو كمصدر (وفقًا هنا).

يمكن العثور على مزيد من المعلومات في قسم README.md.

في هذا العرض التوضيحي، يتم ضبط أبعاد <canvas> على درجة دقة الفيديو. ساحة المشاركات، في حين أن الحجم الطبيعي لـ <img> هو الحد الأقصى للصورة الثابتة دقة الكاميرا. يُستخدم CSS بالطبع لضبط طريقة العرض لكل منهما.

يمكن الحصول على المجموعة الكاملة من درجات دقة الكاميرا المتاحة للصور الثابتة وضبطها. باستخدام قيم MediaSettingsRange لـ PhotoCapabilities.imageHeight imageWidth لاحظ أن قيود الحد الأدنى والحد الأقصى للعرض والارتفاع إنّ getUserMedia() مخصّصة للفيديو، وقد تختلف (كما تمت مناقشته) عن إمكانات الكاميرا للصور الثابتة. بمعنى آخر، قد لا تتمكن من الوصول إلى إمكانات الدقة الكاملة لجهازك عند الحفظ من getUserMedia() إلى لوحة. العرض التوضيحي لقيد حلّ المشكلة في WebRTC كيفية تحديد قيود getUserMedia() لدرجة الدقة

هل هناك خطوات أخرى تريد تنفيذها؟

• Shape Detection API تعمل الميزة بشكل جيد مع ميزة "التقاط الصور": يمكن استدعاء grabFrame() بشكل متكرّر لتقديم الخلاصة. ImageBitmap إلى FaceDetector أو BarcodeDetector. يمكنك اكتشاف المزيد عن واجهة برمجة التطبيقات من مشاركة المدونة التي نشرها "بول كينلان".

• يمكن الوصول إلى فلاش الكاميرا (ضوء الجهاز) من خلال: FillLightMode بوصة PhotoCapabilities ، ولكن يمكن العثور على وضع الكشاف (ضوء الفلاش مشغَّل باستمرار) في MediaTrackCapabilities

نماذج تجريبية وعينات تعليمات برمجية

• العرض التوضيحي لنماذج Chrome
• simpl.info/ic
• نماذج WebRTC

الدعم

• الإصدار 59 من Chrome على أجهزة Android وأجهزة الكمبيوتر المكتبي
• Chrome Canary على أجهزة Android وأجهزة الكمبيوتر المكتبي الأقدم من 59 مع تم تفعيل ميزات النظام الأساسي التجريبي على الويب.

التعرف على المزيد

• مواصفات التقاط الصور عبر W3C
• حالة تنفيذ ميزة "التقاط الصور"
• Shape Detection API
• شرح وملف تعريفي لميزة "التعرّف على الأشكال"
• مجموعة الإصدار التجريبي لميزة "رصد الأشكال"