ফটো তুলুন এবং ক্যামেরা সেটিংস নিয়ন্ত্রণ করুন

Miguel Casas-Sanchez

Sam Dutton

François Beaufort

ইমেজ ক্যাপচার হল একটি API যা স্থির চিত্র ক্যাপচার করতে এবং ক্যামেরা হার্ডওয়্যার সেটিংস কনফিগার করতে পারে। এই API Android এবং ডেস্কটপে Chrome 59 এ উপলব্ধ। আমরা একটি ImageCapture পলিফিল লাইব্রেরিও প্রকাশ করেছি।

API ক্যামেরা বৈশিষ্ট্য যেমন জুম, উজ্জ্বলতা, বৈসাদৃশ্য, ISO এবং সাদা ব্যালেন্সের উপর নিয়ন্ত্রণ সক্ষম করে। সর্বোপরি, ইমেজ ক্যাপচার আপনাকে যেকোনো উপলব্ধ ডিভাইস ক্যামেরা বা ওয়েবক্যামের সম্পূর্ণ রেজোলিউশন ক্ষমতা অ্যাক্সেস করতে দেয়। ওয়েবে ফটো তোলার পূর্ববর্তী কৌশলগুলি ভিডিও স্ন্যাপশট ব্যবহার করেছে, যা স্থির চিত্রগুলির জন্য উপলব্ধ তুলনায় কম রেজোলিউশন।

একটি ImageCapture অবজেক্ট একটি MediaStreamTrack দিয়ে উৎস হিসেবে তৈরি করা হয়। API এর তখন দুটি ক্যাপচার পদ্ধতি রয়েছে takePhoto() এবং grabFrame() এবং ক্যামেরার ক্ষমতা এবং সেটিংস পুনরুদ্ধার করার উপায় এবং সেই সেটিংস পরিবর্তন করার।

নির্মাণ

getUserMedia() থেকে প্রাপ্ত MediaStreamTrack মাধ্যমে ইমেজ ক্যাপচার API একটি ক্যামেরায় অ্যাক্সেস পায়:

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 এ প্রচার করা হয় যেখানে লাল চোখের হ্রাস, যখন সেট করা হয়, শুধুমাত্র তখনই প্রয়োগ করা হয় যখন ছবি তোলা হচ্ছে।

"লাইভ" ক্যামেরার ক্ষমতা এবং সেটিংস প্রিভিউ 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));

কনফিগার করা হচ্ছে

"লাইভ" ক্যামেরা সেটিংস প্রিভিউ MediaStreamTrack এর applyConstraints() সীমাবদ্ধতার মাধ্যমে কনফিগার করা যেতে পারে, উদাহরণস্বরূপ:

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() রেন্ডারার প্রক্রিয়ার ভিতরে MediaStreamTrack এ পরবর্তী উপলব্ধ VideoFrame নেয়, যেখানে takePhoto() MediaStream বাধা দেয়, ক্যামেরা পুনরায় কনফিগার করে, ফটো তোলে (সাধারণত একটি সংকুচিত বিন্যাসে, তাই Blob ) এবং তারপরে MediaStreamTrack পুনরায় চালু করে। সারমর্মে, এর অর্থ হল takePhoto() ক্যামেরার সম্পূর্ণ স্থির-চিত্র রেজোলিউশন ক্ষমতাগুলিতে অ্যাক্সেস দেয়। পূর্বে, শুধুমাত্র একটি canvas উপাদানে drawImage() কল করে, একটি ভিডিওকে উৎস হিসেবে ব্যবহার করে 'একটি ছবি তোলা' সম্ভব ছিল ( এখানে উদাহরণ অনুযায়ী)।

আরও তথ্য README.md বিভাগে পাওয়া যাবে।

এই ডেমোতে, <canvas> মাত্রাগুলি ভিডিও স্ট্রিমের রেজোলিউশনে সেট করা হয়েছে, যেখানে <img> -এর স্বাভাবিক আকার হল ক্যামেরার সর্বাধিক স্থির-চিত্র রেজোলিউশন। CSS, অবশ্যই, উভয়ের প্রদর্শনের আকার সেট করতে ব্যবহৃত হয়।

স্থির চিত্রগুলির জন্য উপলব্ধ ক্যামেরা রেজুলেশনের সম্পূর্ণ পরিসর PhotoCapabilities.imageHeight এবং imageWidth এর জন্য MediaSettingsRange মান ব্যবহার করে পেতে এবং সেট করা যেতে পারে। নোট করুন যে getUserMedia() এর ন্যূনতম এবং সর্বাধিক প্রস্থ এবং উচ্চতা সীমাবদ্ধতাগুলি ভিডিওর জন্য, যা (আলোচনা করা হয়েছে) স্থির চিত্রগুলির জন্য ক্যামেরার ক্ষমতা থেকে আলাদা হতে পারে৷ অন্য কথায়, getUserMedia() থেকে একটি ক্যানভাসে সংরক্ষণ করার সময় আপনি আপনার ডিভাইসের সম্পূর্ণ রেজোলিউশন ক্ষমতা অ্যাক্সেস করতে পারবেন না। WebRTC রেজোলিউশন সীমাবদ্ধতা ডেমো দেখায় কিভাবে রেজোলিউশনের জন্য getUserMedia() সীমাবদ্ধতা সেট করতে হয়।

অন্য কিছু?

• শেপ ডিটেকশন এপিআই ইমেজ ক্যাপচারের সাথে ভাল কাজ করে: একটি FaceDetector বা BarcodeDetector ImageBitmap ফিড করতে grabFrame() বারবার কল করা যেতে পারে। পল কিনলানের ব্লগ পোস্ট থেকে API সম্পর্কে আরও জানুন।

• ক্যামেরার ফ্ল্যাশ (ডিভাইস লাইট) PhotoCapabilities FillLightMode মাধ্যমে অ্যাক্সেস করা যেতে পারে, কিন্তু টর্চ মোড (প্রতিনিয়ত ফ্ল্যাশ চালু) MediaTrackCapabilities এ পাওয়া যাবে।

ডেমো এবং কোড নমুনা

• Chrome নমুনা ডেমো
• simpl.info/ic
• WebRTC নমুনা

সমর্থন

• Android এবং ডেস্কটপে Chrome 59।
• এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম সহ 59 এর আগের Android এবং ডেস্কটপে Chrome Canary।

আরও জানুন

• W3C ইমেজ ক্যাপচার স্পেক
• চিত্র ক্যাপচার বাস্তবায়ন অবস্থা
• আকৃতি সনাক্তকরণ API
• আকৃতি সনাক্তকরণ ব্যাখ্যাকারী এবং রিডমি
• আকৃতি সনাক্তকরণ ডেমো সংগ্রহ