WebRTC — Javascript getUserMedia ব্যবহার করে ক্যামেরা পাল্টান

সামনের ক্যামেরা এবং পিছনের ক্যামেরার মধ্যে আনয়ন বা টগল করতে, আমরা কেবল “ফেসিংমোড” ব্যবহার করতে পারি যা বেশিরভাগ ব্রাউজারে ব্যাপকভাবে সমর্থিত।

ফেসিং মোড কি?

আমরা ডিভাইস থেকে পছন্দসই মিডিয়া ক্যাপচার করতে বিভিন্ন অডিও এবং ভিডিও সীমাবদ্ধতা প্রদান করতে পারি। ‘facingMode’ হল ভিডিও সীমাবদ্ধতাগুলির মধ্যে একটি যা বিভিন্ন ক্যামেরা থেকে একটি ভিডিও স্ট্রিম আনার জন্য দায়ী৷

অনুযায়ী ডকুমেন্টেশনফেসিং মোডের জন্য অনুমোদিত মান হল:

"user":
ভিডিও উৎস ব্যবহারকারীর দিকে মুখ করা হয়; এর মধ্যে রয়েছে, উদাহরণস্বরূপ, একটি স্মার্টফোনের সামনের দিকের ক্যামেরা।

"environment":
ভিডিও উৎস ব্যবহারকারী থেকে দূরে সম্মুখীন হয়, যার ফলে তাদের পরিবেশ দেখছেন. এটি একটি স্মার্টফোনের পিছনের ক্যামেরা।

"left":
ভিডিও উৎসটি ব্যবহারকারীর দিকে মুখ করে কিন্তু তাদের বাম দিকে, যেমন একটি ক্যামেরা ব্যবহারকারীর দিকে লক্ষ্য করে কিন্তু তাদের বাম কাঁধের উপর।

"right":
ভিডিও উৎসটি ব্যবহারকারীর দিকে মুখ করে কিন্তু তাদের ডানদিকে, যেমন একটি ক্যামেরা ব্যবহারকারীর দিকে কিন্তু তাদের ডান কাঁধের ওপরে।

কেন মুখোমুখি মোড?

আপনি জিজ্ঞাসা করতে পারেন যে আমরা যদি সমস্ত ডিভাইসের তালিকা পেতে পারি (enumerateDevices()) এবং আমাদের ক্যামেরা সরবরাহ করার জন্য ব্রাউজারের উপর নির্ভর না করে একটি নির্দিষ্ট ডিভাইস নির্বাচন করুন?

সম্ভাব্য উত্তর হতে পারে:

• এই বিকল্পটি সোজা এবং ব্যবহার করা সহজ।
• বেশিরভাগ ব্রাউজারে ফেসিং মোড ব্যাপকভাবে সমর্থিত।
• কোন ক্যামেরা নির্বাচন করবেন তা নিয়ে কোন চিন্তা নেই (যদি আপনার উভয় পাশে একাধিক ক্যামেরা থাকে)

যদিও আজ আমাদের একাধিক পিছনে এবং সামনের ক্যামেরা রয়েছে, সত্যই, আমি এমন কোনও অ্যাপ্লিকেশন দেখিনি যার জন্য একটি নির্দিষ্ট সামনে বা পিছনের ক্যামেরা প্রয়োজন। যদি আপনার অ্যাপ্লিকেশনের এই ধরনের প্রয়োজনীয়তা থাকে তবে আপনাকে বিকল্প পদ্ধতিগুলি সন্ধান করতে হবে (যেমন enumerateDevices())

এর কোড লাফ দেওয়া যাক

কোড লেখা শুরু করার জন্য এখন আমরা ফেসিং মোড সম্পর্কে প্রাথমিক ধারণা পেয়েছি।

ফেসিং মোড ব্রাউজার দ্বারা সমর্থিত কিনা তা পরীক্ষা করুন!

বেশ স্পষ্ট, তাই না? আমি নিশ্চিত যে আপনি কিছু অদ্ভুত ত্রুটির মধ্যে পড়তে চান না এবং সমাধানটি খুঁজে পেতে ঘন্টা ব্যয় করতে চান এবং শেষ পর্যন্ত বুঝতে পারেন যে এই সীমাবদ্ধতাটি খুব পুরানো ব্রাউজারে সমর্থিত নয়।

const supports = navigator.mediaDevices.getSupportedConstraints();
if (!supports('facingMode')) {
    alert('This browser does not support facingMode!');
}

ফেসিং মোড সীমাবদ্ধতা যোগ করা হচ্ছে

getUserMedia বিকল্পগুলি নির্দিষ্ট করার সময়, আপনাকে এই ভিডিও সীমাবদ্ধতা যুক্ত করতে হবে:

const options = {
    audio: false,
    video: {
        facingMode: 'user', // Or 'environment'
    },
};

const stream = await navigator.mediaDevices.getUserMedia(options);

আপনি এই প্রশ্ন জিজ্ঞাসা করতে পারেন:

আমরা কেন ব্যবহার করছি না exact কীওয়ার্ড?
যেমন facingMode: { exact: 'user' }?

ব্যবহার করলে exact এটা সাধারণত নিক্ষেপ OverconstrainedError ডেস্কটপগুলিতে ত্রুটি কারণ তাদের সবসময় একাধিক ক্যামেরা থাকে না।

কিন্তু ক্যামেরার মধ্যে সুইচ কিভাবে?

যদি আপনি কেবলমাত্র একটি ফাংশনের ভিতরে উপরে উল্লিখিত কোডটি রাখেন এবং এর মধ্যে টগল করার চেষ্টা করেন user এবং environmentএটি খুব সম্ভবত আপনি এই ত্রুটিটি দেখতে পাবেন:

NotReadableError: ভিডিও উৎস শুরু করা যায়নি

কেন এই ত্রুটি?

এই ত্রুটিটি সাধারণত ঘটে যখন হয় আপনার ক্যামেরা অন্য কোনো অ্যাপ্লিকেশন দ্বারা ব্যবহার করা হচ্ছে অথবা আপনি বিদ্যমান ক্যামেরা স্ট্রিম বন্ধ করার আগে একটি ভিন্ন ক্যামেরা থেকে স্ট্রিম করার চেষ্টা করেন।

চলুন বিদ্যমান স্ট্রীম বন্ধ করে এই ত্রুটিটি ঠিক করি

// Stop the tracks
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());

// Provide new options
stream = await navigator.mediaDevices.getUserMedia(options);

// Add this stream to the video object
videoElm.srcObject = null;
videoElm.srcObject = stream;
videoElm.play();

আপনি শুধুমাত্র ভিডিও স্ট্রিম বন্ধ করতে একটি ফিল্টার যোগ করে এটি অপ্টিমাইজ করতে পারেন। প্রতিটি ট্র্যাক তাদের নিজস্ব ধরনের রয়েছে (ভিডিও বা অডিও) এবং আপনি এটি ব্যবহার করে অ্যাক্সেস করতে পারেন track.kind লুপের ভিতরে।

ডিভাইস আইডি কিভাবে পাবেন?

আমি দেখেছি বেশিরভাগ লোকই কিছু পরিষেবা ব্যবহার করে যেমন Twilio. যারা লাইব্রেরি বেশিরভাগই আমাদের প্রদান করতে হবে deviceId. ট্র্যাক থেকে ডিভাইসআইডি আনা বেশ সহজ।

const tracks = stream.getTracks();

tracks.forEach(track => {
  console.log(track.getSettings().deviceId);
});

এটা ডেমো সময়!

আসুন সবকিছু একসাথে করা যাক এবং জিনিসগুলি একসাথে কাজ করা দেখি।

ডেমো নিক্ষেপ করবে NotAllowedError: Permission denied ত্রুটি কারণ এটি অন্য কোনো ডোমেন থেকে ক্যামেরা অ্যাক্সেস করার চেষ্টা করছে। আপনি CodePen.io তে এটি খুলতে পারেন এবং চেষ্টা করতে পারেন।

যদি আপনার কোন সন্দেহ থাকে বা আপনি কোন সমস্যার সম্মুখীন হন, আপনি আমাকে অনুসরণ করতে বা পিং করতে পারেন টুইটার. আমি আপনার অভিজ্ঞতা বা অন্য কোন প্রতিক্রিয়া জানতে চাই.