عکس بگیرید و تنظیمات دوربین را کنترل کنید

Miguel Casas-Sanchez

Sam Dutton

François Beaufort

Image Capture یک API برای ثبت تصاویر ثابت و پیکربندی تنظیمات سخت افزاری دوربین است. این API در کروم 59 در اندروید و دسکتاپ موجود است. ما همچنین یک کتابخانه ImageCapture polyfill منتشر کرده‌ایم.

API کنترل ویژگی های دوربین مانند زوم، روشنایی، کنتراست، ISO و تعادل رنگ سفید را امکان پذیر می کند. بهتر از همه، Image Capture به شما امکان می دهد به قابلیت های وضوح کامل دوربین یا وب کم دستگاه موجود دسترسی داشته باشید. تکنیک‌های قبلی برای عکس‌برداری در وب از عکس‌های فوری ویدیویی استفاده می‌کردند که وضوح پایین‌تری نسبت به تصاویر ثابت موجود است.

یک شی ImageCapture با یک MediaStreamTrack به عنوان منبع ساخته می شود. سپس API دارای دو روش عکس برداری takePhoto() و grabFrame() و راه هایی برای بازیابی قابلیت ها و تنظیمات دوربین و تغییر آن تنظیمات است.

ساخت و ساز

Image Capture API از طریق 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);
}

می توانید این کد را از کنسول DevTools امتحان کنید.

گرفتن

گرفتن عکس به دو صورت انجام می شود: فول فریم و عکس فوری. 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 منتشر می شود، در حالی که کاهش قرمزی چشم، زمانی که تنظیم شود، تنها زمانی اعمال می شود که عکس در حال گرفتن است.

قابلیت‌ها و تنظیمات دوربین "Live" از طریق پیش‌نمایش 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;
}

قابلیت ها و تنظیمات دوربین "Non-Live" از طریق شی ImageCapture دستکاری می شوند: ImageCapture.getPhotoCapabilities() یک شی PhotoCapabilities را برمی گرداند که دسترسی به قابلیت های دوربین موجود "Non-Live" را فراهم می کند. به همین ترتیب، با شروع در 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));

در حال پیکربندی

تنظیمات دوربین "Live" را می توان از طریق محدودیت های applyConstraints() پیش نمایش MediaStreamTrack پیکربندی کرد، به عنوان مثال:

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

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

تنظیمات دوربین "Non-Live" با فرهنگ لغت PhotoSettings اختیاری takePhoto() پیکربندی شده است، به عنوان مثال:

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 به خوبی با Image Capture کار می کند: grabFrame() می توان به طور مکرر فراخوانی کرد تا ImageBitmap ها را به FaceDetector یا BarcodeDetector تغذیه کند. از پست وبلاگ Paul Kinlan درباره API بیشتر بیاموزید.

• فلاش دوربین (نور دستگاه) از طریق FillLightMode در PhotoCapabilities قابل دسترسی است، اما حالت Torch (فلاش دائماً روشن) را می توان در MediaTrackCapabilities یافت.

دموی و نمونه کد

• نسخه ی نمایشی Chrome Samples
• simpl.info/ic
• نمونه های WebRTC

پشتیبانی کنید

• Chrome 59 در اندروید و دسکتاپ.
• Chrome Canary در Android و دسک‌تاپ قبل از نسخه ۵۹ با ویژگی‌های Experimental Web Platform فعال شده است.

بیشتر بدانید

• W3C Image Capture Spec
• وضعیت اجرای تصویربرداری
• API تشخیص شکل
• توضیح دهنده تشخیص شکل و readme
• مجموعه نمایشی تشخیص شکل

Miguel Casas-Sanchez

Sam Dutton

François Beaufort

Image Capture یک API برای ثبت تصاویر ثابت و پیکربندی تنظیمات سخت افزاری دوربین است. این API در کروم 59 در اندروید و دسکتاپ موجود است. ما همچنین یک کتابخانه ImageCapture polyfill منتشر کرده‌ایم.

API کنترل ویژگی های دوربین مانند زوم، روشنایی، کنتراست، ISO و تعادل رنگ سفید را امکان پذیر می کند. بهتر از همه، Image Capture به شما امکان می دهد به قابلیت های وضوح کامل دوربین یا وب کم دستگاه موجود دسترسی داشته باشید. تکنیک‌های قبلی برای عکس‌برداری در وب از عکس‌های فوری ویدیویی استفاده می‌کردند که وضوح پایین‌تری نسبت به تصاویر ثابت موجود است.

یک شی ImageCapture با یک MediaStreamTrack به عنوان منبع ساخته می شود. سپس API دارای دو روش عکس برداری takePhoto() و grabFrame() و راه هایی برای بازیابی قابلیت ها و تنظیمات دوربین و تغییر آن تنظیمات است.

ساخت و ساز

Image Capture API از طریق 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);
}

می توانید این کد را از کنسول DevTools امتحان کنید.

گرفتن

گرفتن عکس به دو صورت انجام می شود: فول فریم و عکس فوری. 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 منتشر می شود، در حالی که کاهش قرمزی چشم، زمانی که تنظیم شود، تنها زمانی اعمال می شود که عکس در حال گرفتن است.

قابلیت‌ها و تنظیمات دوربین "Live" از طریق پیش‌نمایش 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;
}

قابلیت ها و تنظیمات دوربین "Non-Live" از طریق شی ImageCapture دستکاری می شوند: ImageCapture.getPhotoCapabilities() یک شی PhotoCapabilities را برمی گرداند که دسترسی به قابلیت های دوربین موجود "Non-Live" را فراهم می کند. به همین ترتیب، با شروع در 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));

در حال پیکربندی

تنظیمات دوربین "Live" را می توان از طریق محدودیت های applyConstraints() پیش نمایش MediaStreamTrack پیکربندی کرد، به عنوان مثال:

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

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

تنظیمات دوربین "Non-Live" با فرهنگ لغت PhotoSettings اختیاری takePhoto() پیکربندی شده است، به عنوان مثال:

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 به خوبی با Image Capture کار می کند: grabFrame() می توان به طور مکرر فراخوانی کرد تا ImageBitmap ها را به FaceDetector یا BarcodeDetector تغذیه کند. از پست وبلاگ Paul Kinlan درباره API بیشتر بیاموزید.

• فلاش دوربین (نور دستگاه) از طریق FillLightMode در PhotoCapabilities قابل دسترسی است، اما حالت Torch (فلاش دائماً روشن) را می توان در MediaTrackCapabilities یافت.

دموی و نمونه کد

• نسخه نمایشی Chrome Samples
• simpl.info/ic
• نمونه های WebRTC

پشتیبانی کنید

• Chrome 59 در اندروید و دسکتاپ.
• Chrome Canary در Android و دسک‌تاپ قبل از نسخه ۵۹ با ویژگی‌های Experimental Web Platform فعال شده است.

بیشتر بدانید

• W3C Image Capture Spec
• وضعیت اجرای تصویربرداری
• API تشخیص شکل
• توضیح دهنده تشخیص شکل و readme
• مجموعه نمایشی تشخیص شکل