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

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

প্রকাশিত: ৪ মে, ২০২১

মিডিয়া ক্যাপচার এবং স্ট্রিমস API- এর প্রেক্ষাপটে, MediaStreamTrack ইন্টারফেসটি একটি স্ট্রিমের মধ্যে একটি একক মিডিয়া ট্র্যাককে প্রতিনিধিত্ব করে। সাধারণত, এগুলি অডিও বা ভিডিও ট্র্যাক, তবে অন্যান্য ধরণের ট্র্যাক থাকতে পারে।

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

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

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

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

ব্রাউজার সাপোর্ট

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

ব্যবহারের ক্ষেত্রে

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

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

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

MediaStreamTrack সাপোর্টের জন্য ফিচার-ডিটেক্ট ইনসার্টেবল স্ট্রিমগুলি নিম্নরূপ।

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

মূল ধারণা

MediaStreamTrack জন্য ইনসার্টেবল স্ট্রিমগুলি ওয়েবকোডেক্স দ্বারা পূর্বে প্রস্তাবিত ধারণাগুলির উপর ভিত্তি করে তৈরি এবং ধারণাগতভাবে 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 অবজেক্ট গ্রহণ করে এবং অন্য যেকোনো ধরণের সাথে ব্যর্থ হয়। যদি kind "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 কোড ধরুন এবং অ্যাপটি এটি সনাক্ত করবে এবং হাইলাইট করবে। আপনি GitHub-এ অ্যাপ্লিকেশনটির সোর্স কোড দেখতে পাবেন।

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

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

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

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

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

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

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

বাস্তবায়নে কোনও সমস্যার কথা জানান

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

API এর জন্য সমর্থন

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

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

স্বীকৃতি

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