MediaStreamTrack-এর জন্য সন্নিবেশযোগ্য স্ট্রীম

একটি MediaStreamTrack এর বিষয়বস্তু একটি স্ট্রীম হিসাবে উন্মোচিত হয় যা ম্যানিপুলেট করা যেতে পারে বা নতুন সামগ্রী তৈরি করতে ব্যবহার করা যেতে পারে

টমাস স্টেইনার

পটভূমি

মিডিয়া ক্যাপচার এবং স্ট্রিম এপিআই এর প্রেক্ষাপটে MediaStreamTrack ইন্টারফেস একটি স্ট্রীমের মধ্যে একটি একক মিডিয়া ট্র্যাক উপস্থাপন করে; সাধারণত, এগুলি অডিও বা ভিডিও ট্র্যাক, তবে অন্যান্য ট্র্যাকের প্রকারগুলি বিদ্যমান থাকতে পারে। MediaStream অবজেক্ট শূন্য বা তার বেশি MediaStreamTrack অবজেক্ট নিয়ে গঠিত, যা বিভিন্ন অডিও বা ভিডিও ট্র্যাকের প্রতিনিধিত্ব করে। প্রতিটি MediaStreamTrack এক বা একাধিক চ্যানেল থাকতে পারে। চ্যানেলটি মিডিয়া স্ট্রিমের ক্ষুদ্রতম একককে প্রতিনিধিত্ব করে, যেমন একটি প্রদত্ত স্পিকারের সাথে যুক্ত একটি অডিও সংকেত, যেমন একটি স্টেরিও অডিও ট্র্যাকে বাম বা ডান।

MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীম কি?

MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীমগুলির পিছনে মূল ধারণা হল একটি MediaStreamTrack এর বিষয়বস্তুকে স্ট্রিমগুলির একটি সংগ্রহ হিসাবে প্রকাশ করা (WHATWG স্ট্রীমস API দ্বারা সংজ্ঞায়িত করা হয়েছে)৷ এই স্ট্রীমগুলিকে নতুন উপাদান প্রবর্তনের জন্য ব্যবহার করা যেতে পারে।

ডেভেলপারদের ভিডিও (বা অডিও) স্ট্রীমে সরাসরি অ্যাক্সেস দেওয়া তাদের সরাসরি স্ট্রীমে পরিবর্তনগুলি প্রয়োগ করতে দেয়। বিপরীতে, প্রথাগত পদ্ধতির সাথে একই ভিডিও ম্যানিপুলেশন কাজ উপলব্ধি করার জন্য বিকাশকারীদেরকে মধ্যস্থতাকারী যেমন <canvas> উপাদানগুলি ব্যবহার করতে হবে। (এই ধরনের প্রক্রিয়ার বিশদ বিবরণের জন্য, দেখুন, উদাহরণস্বরূপ, ভিডিও + ক্যানভাস = ম্যাজিক ।)

ব্রাউজার সমর্থন

MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীমগুলি Chrome 94 থেকে সমর্থিত।

কেস ব্যবহার করুন

MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রিমগুলির ক্ষেত্রে ব্যবহার করুন অন্তর্ভুক্ত, কিন্তু এতে সীমাবদ্ধ নয়:

  • ভিডিও কনফারেন্সিং গ্যাজেট যেমন "ফানি হ্যাট" বা ভার্চুয়াল ব্যাকগ্রাউন্ড।
  • সফটওয়্যার ভোকোডারের মতো ভয়েস প্রসেসিং।

MediaStreamTrack জন্য কীভাবে সন্নিবেশযোগ্য স্ট্রিমগুলি ব্যবহার করবেন

বৈশিষ্ট্য সনাক্তকরণ

আপনি নিম্নরূপ MediaStreamTrack সমর্থনের জন্য সন্নিবেশযোগ্য স্ট্রীম বৈশিষ্ট্য সনাক্ত করতে পারেন।

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

মূল ধারণা

MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীমগুলি পূর্বে WebCodecs দ্বারা প্রস্তাবিত ধারণাগুলির উপর তৈরি করে এবং ধারণাগতভাবে MediaStreamTrack দুটি উপাদানে বিভক্ত করে:

  • MediaStreamTrackProcessor , যা একটি MediaStreamTrack অবজেক্টের উৎস গ্রহণ করে এবং মিডিয়া ফ্রেমের একটি স্ট্রীম তৈরি করে, বিশেষ করে VideoFrame বা AudioFrame ) অবজেক্ট। আপনি এটিকে একটি ট্র্যাক সিঙ্ক হিসাবে ভাবতে পারেন যা ট্র্যাক থেকে আনকোড করা ফ্রেমগুলিকে একটি ReadableStream হিসাবে প্রকাশ করতে সক্ষম৷
  • MediaStreamTrackGenerator , যা মিডিয়া ফ্রেমের একটি স্ট্রীম ব্যবহার করে এবং একটি MediaStreamTrack ইন্টারফেস প্রকাশ করে। getUserMedia() থেকে ট্র্যাকের মতোই এটি যেকোনো সিঙ্কে প্রদান করা যেতে পারে। এটা ইনপুট হিসাবে মিডিয়া ফ্রেম লাগে.

MediaStreamTrackProcessor

একটি MediaStreamTrackProcessor অবজেক্ট একটি সম্পত্তি প্রকাশ করে, readable । এটি MediaStreamTrack থেকে ফ্রেম পড়ার অনুমতি দেয়। যদি ট্র্যাকটি একটি ভিডিও ট্র্যাক হয়, তাহলে readable থেকে পড়া অংশগুলি হবে VideoFrame অবজেক্ট। যদি ট্র্যাকটি একটি অডিও ট্র্যাক হয়, তাহলে readable থেকে পড়া অংশগুলি AudioFrame অবজেক্ট হবে৷

MediaStreamTrackGenerator

একটি MediaStreamTrackGenerator অবজেক্ট একইভাবে একটি সম্পত্তি প্রকাশ করে, writable , যা একটি WritableStream যা MediaStreamTrackGenerator এ মিডিয়া ফ্রেম লেখার অনুমতি দেয়, যা নিজেই একটি MediaStreamTrack । যদি kind অ্যাট্রিবিউটটি "audio" হয়, তাহলে স্ট্রীমটি AudioFrame অবজেক্ট গ্রহণ করে এবং অন্য কোনো প্রকারের সাথে ব্যর্থ হয়। যদি ধরনের "video" হয়, তাহলে স্ট্রীম VideoFrame অবজেক্ট গ্রহণ করে এবং অন্য কোনো প্রকারের সাথে ব্যর্থ হয়। যখন একটি ফ্রেম writable তে লেখা হয়, তখন ফ্রেমের close() পদ্ধতি স্বয়ংক্রিয়ভাবে চালু হয়, যাতে জাভাস্ক্রিপ্ট থেকে এর মিডিয়া সংস্থানগুলি আর অ্যাক্সেসযোগ্য না হয়।

একটি MediaStreamTrackGenerator হল একটি ট্র্যাক যার জন্য একটি কাস্টম সোর্স তার writable ক্ষেত্রে মিডিয়া ফ্রেম লিখে প্রয়োগ করা যেতে পারে।

এটা সব একসাথে আনা

মূল ধারণাটি নিম্নরূপ একটি প্রক্রিয়াকরণ চেইন তৈরি করা:

প্ল্যাটফর্ম ট্র্যাক → প্রসেসর → ট্রান্সফর্ম → জেনারেটর → প্ল্যাটফর্ম সিঙ্ক

নীচের উদাহরণটি একটি বারকোড স্ক্যানার অ্যাপ্লিকেশনের জন্য এই চেইনটিকে চিত্রিত করে যা একটি লাইভ ভিডিও স্ট্রীমে সনাক্ত করা বারকোডকে হাইলাইট করে৷

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

ডেমো

আপনি একটি ডেস্কটপ বা মোবাইল ব্রাউজারে উপরের বিভাগ থেকে QR কোড স্ক্যানার ডেমো দেখতে পারেন। ক্যামেরার সামনে একটি QR কোড ধরুন এবং অ্যাপটি এটি সনাক্ত করবে এবং হাইলাইট করবে। আপনি Glitch এ অ্যাপ্লিকেশনের সোর্স কোড দেখতে পারেন।

ডেস্কটপ ব্রাউজার ট্যাবে চলমান QR কোড স্ক্যানারটি ল্যাপটপের ক্যামেরার সামনে ব্যবহারকারীর ফোনে একটি সনাক্ত করা এবং হাইলাইট করা QR কোড দেখায়।

নিরাপত্তা এবং গোপনীয়তা বিবেচনা

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

প্রতিক্রিয়া

Chromium টিম MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীমগুলির সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷

API ডিজাইন সম্পর্কে আমাদের বলুন

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

আপনি কি Chromium এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন? new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিস্তারিত, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী, এবং উপাদান বাক্সে Blink>MediaStream লিখতে ভুলবেন না। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

API এর জন্য সমর্থন দেখান

আপনি কি MediaStreamTrack এর জন্য সন্নিবেশযোগ্য স্ট্রীম ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chromium টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

#InsertableStreams হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

স্বীকৃতি

MediaStreamTrack স্পেকের জন্য সন্নিবেশযোগ্য স্ট্রীমগুলি হ্যারাল্ড অ্যালভেস্ট্র্যান্ড এবং গুইডো উর্দানেটা লিখেছেন। এই নিবন্ধটি হ্যারাল্ড আলভেস্ট্র্যান্ড, জো মেডলি , বেন ওয়াগনার , হুইব ক্লেইনহাউট এবং ফ্রাঙ্কোইস বিউফোর্ট দ্বারা পর্যালোচনা করা হয়েছে। আনস্প্ল্যাশে ক্রিস মন্টগোমেরির নায়কের ছবি।