WebCodecs এ দক্ষতা অর্জন: টেম্পোরাল নয়েজ রিডাকশনের মাধ্যমে ভিডিওর মান বৃদ্ধি

ওয়েব-ভিত্তিক ভিডিও কমিউনিকেশন, স্ট্রিমিং এবং রিয়েল-টাইম অ্যাপ্লিকেশনের জগতে, মানই হলো আসল। সারা বিশ্বের ব্যবহারকারীরা পরিষ্কার এবং ঝকঝকে ভিডিও আশা করে, তারা ব্যবসায়িক মিটিংয়ে থাকুক, লাইভ ইভেন্ট দেখুক বা কোনো দূরবর্তী পরিষেবার সাথে ইন্টারঅ্যাক্ট করুক। তবে, ভিডিও স্ট্রিমে প্রায়শই একটি বিরক্তিকর এবং স্থায়ী সমস্যা দেখা যায়: নয়েজ। এই ডিজিটাল নয়েজ, যা প্রায়ই দানাদার বা স্ট্যাটিক টেক্সচার হিসেবে দেখা যায়, দেখার অভিজ্ঞতা নষ্ট করতে পারে এবং আশ্চর্যজনকভাবে, ব্যান্ডউইথ খরচও বাড়িয়ে দেয়। সৌভাগ্যবশত, একটি শক্তিশালী ব্রাউজার এপিআই, WebCodecs, ডেভেলপারদের এই সমস্যাটি সরাসরি মোকাবেলা করার জন্য অভূতপূর্ব নিম্ন-স্তরের নিয়ন্ত্রণ প্রদান করে।

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

ভিডিও নয়েজ কী এবং এটি কেন গুরুত্বপূর্ণ?

কোনো সমস্যা সমাধান করার আগে, আমাদের প্রথমে সেটি বুঝতে হবে। ডিজিটাল ভিডিওতে, নয়েজ বলতে ভিডিও সিগন্যালে উজ্জ্বলতা বা রঙের তথ্যের এলোমেলো পরিবর্তনকে বোঝায়। এটি ছবি তোলা এবং প্রেরণের প্রক্রিয়ার একটি অনাকাঙ্ক্ষিত উপজাত।

নয়েজের উৎস এবং প্রকারভেদ

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

এই নয়েজ সাধারণত গাউসিয়ান নয়েজ হিসেবে প্রকাশ পায়, যেখানে প্রতিটি পিক্সেলের তীব্রতা তার আসল মানের চারপাশে এলোমেলোভাবে পরিবর্তিত হয়, যা পুরো ফ্রেম জুড়ে একটি সূক্ষ্ম, ঝিকমিক করা দানাদার ভাব তৈরি করে।

নয়েজের দ্বিমুখী প্রভাব

ভিডিও নয়েজ কেবল একটি বাহ্যিক সমস্যা নয়; এর উল্লেখযোগ্য প্রযুক্তিগত এবং উপলব্ধিগত পরিণতি রয়েছে:

1. ব্যবহারকারীর অভিজ্ঞতা হ্রাস: সবচেয়ে সুস্পষ্ট প্রভাব হলো ভিজ্যুয়াল মানের উপর। একটি নয়েজযুক্ত ভিডিও দেখতে অপেশাদার লাগে, মনোযোগ বিঘ্নিত করে এবং গুরুত্বপূর্ণ বিবরণ বোঝা কঠিন করে তুলতে পারে। টেলিকনফারেন্সিংয়ের মতো অ্যাপ্লিকেশনগুলিতে, এটি অংশগ্রহণকারীদের দানাদার এবং অস্পষ্ট দেখাতে পারে, যা উপস্থিতির অনুভূতি কমিয়ে দেয়।
2. কম্প্রেশন দক্ষতার হ্রাস: এটি কম স্বজ্ঞাত কিন্তু সমানভাবে গুরুতর একটি সমস্যা। আধুনিক ভিডিও কোডেক (যেমন H.264, VP9, AV1) রিডানডেন্সি বা পুনরাবৃত্তি কাজে লাগিয়ে উচ্চ কম্প্রেশন অনুপাত অর্জন করে। তারা ফ্রেমগুলোর মধ্যে (টেম্পোরাল রিডানডেন্সি) এবং একটি একক ফ্রেমের মধ্যে (স্পেশিয়াল রিডানডেন্সি) মিল খোঁজে। নয়েজ, তার প্রকৃতিগত কারণেই, এলোমেলো এবং অপ্রত্যাশিত। এটি পুনরাবৃত্তির এই প্যাটার্নগুলো ভেঙে দেয়। এনকোডার এলোমেলো নয়েজকে উচ্চ-ফ্রিকোয়েন্সি ডিটেল হিসেবে দেখে যা সংরক্ষণ করতে হবে, ফলে এটি আসল বিষয়বস্তুর পরিবর্তে নয়েজ এনকোড করার জন্য আরও বেশি বিট বরাদ্দ করতে বাধ্য হয়। এর ফলে একই মানের জন্য ফাইলের আকার বড় হয় অথবা একই বিটরেটে নিম্ন মানের ভিডিও তৈরি হয়।

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

WebCodecs এর আগমন: নিম্ন-স্তরের ভিডিও নিয়ন্ত্রণের শক্তি

বহু বছর ধরে, ব্রাউজারে সরাসরি ভিডিও ম্যানিপুলেশন সীমিত ছিল। ডেভেলপাররা মূলত <video> এলিমেন্ট এবং ক্যানভাস এপিআই-এর ক্ষমতার মধ্যে সীমাবদ্ধ ছিল, যা প্রায়শই জিপিইউ থেকে পারফরম্যান্স-ঘাতী রিডব্যাকের সাথে জড়িত ছিল। WebCodecs এই খেলাটি পুরোপুরি পরিবর্তন করে দিয়েছে।

WebCodecs একটি নিম্ন-স্তরের এপিআই যা ব্রাউজারের অন্তর্নির্মিত মিডিয়া এনকোডার এবং ডিকোডারগুলিতে সরাসরি অ্যাক্সেস সরবরাহ করে। এটি এমন অ্যাপ্লিকেশনগুলির জন্য ডিজাইন করা হয়েছে যেগুলির জন্য মিডিয়া প্রসেসিংয়ের উপর সুনির্দিষ্ট নিয়ন্ত্রণ প্রয়োজন, যেমন ভিডিও এডিটর, ক্লাউড গেমিং প্ল্যাটফর্ম এবং উন্নত রিয়েল-টাইম কমিউনিকেশন ক্লায়েন্ট।

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

• timestamp: ফ্রেমটির উপস্থাপনার সময় মাইক্রোসেকেন্ডে।
• duration: ফ্রেমটির সময়কাল মাইক্রোসেকেন্ডে।
• codedWidth এবং codedHeight: ফ্রেমটির মাত্রা পিক্সেলে।
• format: ডেটার পিক্সেল ফরম্যাট (যেমন, 'I420', 'RGBA')।

গুরুত্বপূর্ণভাবে, VideoFrame একটি copyTo() নামক মেথড সরবরাহ করে, যা আমাদের কাঁচা, অসংকুচিত পিক্সেল ডেটা একটি ArrayBuffer-এ অনুলিপি করতে দেয়। এটি বিশ্লেষণ এবং ম্যানিপুলেশনের জন্য আমাদের প্রবেশদ্বার। একবার আমাদের কাছে কাঁচা বাইটগুলো এসে গেলে, আমরা আমাদের নয়েজ রিডাকশন অ্যালগরিদম প্রয়োগ করতে পারি এবং তারপরে পরিবর্তিত ডেটা থেকে একটি নতুন VideoFrame তৈরি করতে পারি যা প্রসেসিং পাইপলাইনের আরও গভীরে পাঠানো হবে (যেমন, একটি ভিডিও এনকোডারে বা একটি ক্যানভাসে)।

টেম্পোরাল ফিল্টারিং বোঝা

নয়েজ কমানোর কৌশলগুলোকে বিস্তৃতভাবে দুটি ভাগে ভাগ করা যায়: স্পেশিয়াল এবং টেম্পোরাল।

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

টেম্পোরাল ফিল্টারিংয়ের সবচেয়ে সহজ রূপ হলো টেম্পোরাল অ্যাভারেজিং। কল্পনা করুন আপনার কাছে বর্তমান ফ্রেম এবং আগের ফ্রেম রয়েছে। যেকোনো পিক্সেলের জন্য, তার 'প্রকৃত' মান সম্ভবত বর্তমান ফ্রেমের মান এবং আগের ফ্রেমের মানের মাঝামাঝি কোথাও। তাদের মিশ্রণ করে, আমরা এলোমেলো নয়েজকে গড় করে ফেলতে পারি। নতুন পিক্সেলের মান একটি সাধারণ ওয়েটেড অ্যাভারেজ দিয়ে গণনা করা যেতে পারে:

new_pixel = (alpha * current_pixel) + ((1 - alpha) * previous_pixel)

এখানে, alpha হলো ০ এবং ১ এর মধ্যে একটি মিশ্রণ ফ্যাক্টর। একটি উচ্চ alpha মানে আমরা বর্তমান ফ্রেমের উপর বেশি বিশ্বাস করছি, যার ফলে নয়েজ কম হ্রাস পায় কিন্তু মোশন আর্টিফ্যাক্টও কম হয়। একটি নিম্ন alpha শক্তিশালী নয়েজ হ্রাস প্রদান করে কিন্তু গতির স্থানগুলিতে 'ঘোস্টিং' বা ট্রেইল তৈরি করতে পারে। সঠিক ভারসাম্য খুঁজে বের করাই মূল বিষয়।

একটি সরল টেম্পোরাল অ্যাভারেজিং ফিল্টার বাস্তবায়ন

আসুন WebCodecs ব্যবহার করে এই ধারণার একটি বাস্তব প্রয়োগ তৈরি করি। আমাদের পাইপলাইনটি তিনটি প্রধান ধাপে গঠিত হবে:

1. VideoFrame অবজেক্টের একটি স্ট্রিম পান (যেমন, একটি ওয়েবক্যাম থেকে)।
2. প্রতিটি ফ্রেমের জন্য, আগের ফ্রেমের ডেটা ব্যবহার করে আমাদের টেম্পোরাল ফিল্টার প্রয়োগ করুন।
3. একটি নতুন, পরিচ্ছন্ন VideoFrame তৈরি করুন।

ধাপ ১: ফ্রেম স্ট্রিম সেট আপ করা

VideoFrame অবজেক্টের একটি লাইভ স্ট্রিম পাওয়ার সবচেয়ে সহজ উপায় হলো MediaStreamTrackProcessor ব্যবহার করা, যা একটি MediaStreamTrack (যেমন getUserMedia থেকে পাওয়া) গ্রহণ করে এবং এর ফ্রেমগুলোকে একটি রিডেবল স্ট্রিম হিসেবে প্রকাশ করে।

ধারণাগত জাভাস্ক্রিপ্ট সেটআপ:

async function setupVideoStream() { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); const track = stream.getVideoTracks()[0]; const trackProcessor = new MediaStreamTrackProcessor({ track }); const reader = trackProcessor.readable.getReader(); let previousFrameBuffer = null; let previousFrameTimestamp = -1; while (true) { const { value: frame, done } = await reader.read(); if (done) break; // এখানেই আমরা প্রতিটি 'ফ্রেম' প্রসেস করব const processedFrame = await applyTemporalFilter(frame, previousFrameBuffer); // পরবর্তী ইটারেশনের জন্য, আমাদের *মূল* বর্তমান ফ্রেমের ডেটা সংরক্ষণ করতে হবে // আপনি মূল ফ্রেমের ডেটা 'previousFrameBuffer'-এ কপি করবেন এটি বন্ধ করার আগে। // মেমরি রিলিজ করতে ফ্রেম বন্ধ করতে ভুলবেন না! frame.close(); // প্রসেস করা ফ্রেম দিয়ে কিছু করুন (যেমন, ক্যানভাসে রেন্ডার, এনকোড) // ... এবং তারপর এটিও বন্ধ করুন! processedFrame.close(); } }

ধাপ ২: ফিল্টারিং অ্যালগরিদম - পিক্সেল ডেটা নিয়ে কাজ করা

এটি আমাদের কাজের মূল অংশ। আমাদের applyTemporalFilter ফাংশনের ভিতরে, আমাদের আগত ফ্রেমের পিক্সেল ডেটা অ্যাক্সেস করতে হবে। সরলতার জন্য, আসুন ধরে নিই আমাদের ফ্রেমগুলো 'RGBA' ফরম্যাটে আছে। প্রতিটি পিক্সেল ৪ বাইট দ্বারা উপস্থাপিত হয়: লাল, সবুজ, নীল এবং আলফা (স্বচ্ছতা)।

async function applyTemporalFilter(currentFrame, previousFrameBuffer) { // আমাদের ব্লেন্ডিং ফ্যাক্টর নির্ধারণ করুন। ০.৮ মানে নতুন ফ্রেমের ৮০% এবং পুরানো ফ্রেমের ২০%। const alpha = 0.8; // ডাইমেনশনগুলো নিন const width = currentFrame.codedWidth; const height = currentFrame.codedHeight; // বর্তমান ফ্রেমের পিক্সেল ডেটা রাখার জন্য একটি ArrayBuffer বরাদ্দ করুন। const currentFrameSize = width * height * 4; // RGBA-এর জন্য প্রতি পিক্সেল ৪ বাইট const currentFrameBuffer = new Uint8Array(currentFrameSize); await currentFrame.copyTo(currentFrameBuffer); // যদি এটি প্রথম ফ্রেম হয়, তাহলে ব্লেন্ড করার জন্য কোনো পূর্ববর্তী ফ্রেম নেই। // যেমন আছে তেমনই রিটার্ন করুন, কিন্তু পরবর্তী ইটারেশনের জন্য এর বাফারটি সংরক্ষণ করুন। if (!previousFrameBuffer) { const newFrameBuffer = new Uint8Array(currentFrameBuffer); // আমরা এই ফাংশনের বাইরে আমাদের গ্লোবাল 'previousFrameBuffer' এটি দিয়ে আপডেট করব। return { buffer: newFrameBuffer, frame: currentFrame }; } // আমাদের আউটপুট ফ্রেমের জন্য একটি নতুন বাফার তৈরি করুন। const outputFrameBuffer = new Uint8Array(currentFrameSize); // প্রধান প্রসেসিং লুপ। for (let i = 0; i < currentFrameSize; i++) { const currentPixelValue = currentFrameBuffer[i]; const previousPixelValue = previousFrameBuffer[i]; // প্রতিটি কালার চ্যানেলের জন্য টেম্পোরাল অ্যাভারেজিং ফর্মুলা প্রয়োগ করুন। // আমরা আলফা চ্যানেলটি এড়িয়ে যাই (প্রতি ৪তম বাইট)। if ((i + 1) % 4 !== 0) { outputFrameBuffer[i] = Math.round(alpha * currentPixelValue + (1 - alpha) * previousPixelValue); } else { // আলফা চ্যানেলটি যেমন আছে তেমনই রাখুন। outputFrameBuffer[i] = currentPixelValue; } } return { buffer: outputFrameBuffer, frame: currentFrame }; }

YUV ফরম্যাট (I420, NV12) সম্পর্কে একটি নোট: যদিও RGBA বোঝা সহজ, বেশিরভাগ ভিডিও দক্ষতার জন্য স্থানীয়ভাবে YUV কালার স্পেসে প্রসেস করা হয়। YUV হ্যান্ডেল করা আরও জটিল কারণ রঙ (U, V) এবং উজ্জ্বলতা (Y) তথ্য আলাদাভাবে সংরক্ষণ করা হয় ('প্লেন'-এ)। ফিল্টারিং যুক্তি একই থাকে, কিন্তু আপনাকে প্রতিটি প্লেন (Y, U, এবং V) আলাদাভাবে পুনরাবৃত্তি করতে হবে, তাদের নিজ নিজ মাত্রা সম্পর্কে সচেতন থাকতে হবে (রঙের প্লেনগুলো প্রায়শই কম রেজোলিউশনের হয়, যা ক্রোমা সাবস্যাম্পলিং নামক একটি কৌশল)।

ধাপ ৩: নতুন ফিল্টার করা `VideoFrame` তৈরি করা

আমাদের লুপ শেষ হওয়ার পরে, outputFrameBuffer আমাদের নতুন, পরিষ্কার ফ্রেমের জন্য পিক্সেল ডেটা ধারণ করে। আমাদের এখন এটিকে একটি নতুন VideoFrame অবজেক্টে মোড়ানো দরকার, মূল ফ্রেম থেকে মেটাডেটা অনুলিপি করা নিশ্চিত করে।

// applyTemporalFilter কল করার পরে আপনার প্রধান লুপের ভিতরে... const { buffer: processedBuffer, frame: originalFrame } = await applyTemporalFilter(frame, previousFrameBuffer); // আমাদের প্রসেস করা বাফার থেকে একটি নতুন VideoFrame তৈরি করুন। const newFrame = new VideoFrame(processedBuffer, { format: 'RGBA', codedWidth: originalFrame.codedWidth, codedHeight: originalFrame.codedHeight, timestamp: originalFrame.timestamp, duration: originalFrame.duration }); // গুরুত্বপূর্ণ: পরবর্তী ইটারেশনের জন্য পূর্ববর্তী ফ্রেম বাফার আপডেট করুন। // আমাদের *মূল* ফ্রেমের ডেটা কপি করতে হবে, ফিল্টার করা ডেটা নয়। // ফিল্টার করার আগে একটি পৃথক কপি তৈরি করা উচিত। previousFrameBuffer = new Uint8Array(originalFrameData); // এখন আপনি 'newFrame' ব্যবহার করতে পারেন। এটি রেন্ডার করুন, এনকোড করুন, ইত্যাদি। // renderer.draw(newFrame); // এবং গুরুতরভাবে, মেমরি লিক প্রতিরোধ করতে আপনার কাজ শেষ হলে এটি বন্ধ করুন। newFrame.close();

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

পারফরম্যান্স বিবেচনা: জাভাস্ক্রিপ্ট বনাম ওয়েবঅ্যাসেম্বলি

উপরের বিশুদ্ধ জাভাস্ক্রিপ্ট বাস্তবায়নটি শেখার এবং প্রদর্শনের জন্য চমৎকার। তবে, একটি ৩০ FPS, ১০৮০p (১৯২০x১০৮০) ভিডিওর জন্য, আমাদের লুপকে প্রতি সেকেন্ডে ২৪৮ মিলিয়নেরও বেশি গণনা করতে হবে! (১৯২০ * ১০৮০ * ৪ বাইট * ৩০ fps)। যদিও আধুনিক জাভাস্ক্রিপ্ট ইঞ্জিনগুলো অবিশ্বাস্যভাবে দ্রুত, এই প্রতি-পিক্সেল প্রসেসিং একটি আরও পারফরম্যান্স-ভিত্তিক প্রযুক্তির জন্য উপযুক্ত: ওয়েবঅ্যাসেম্বলি (Wasm)।

ওয়েবঅ্যাসেম্বলি পদ্ধতি

ওয়েবঅ্যাসেম্বলি আপনাকে C++, Rust বা Go-এর মতো ভাষায় লেখা কোড ব্রাউজারে প্রায়-নেটিভ গতিতে চালাতে দেয়। আমাদের টেম্পোরাল ফিল্টারের যুক্তি এই ভাষাগুলোতে প্রয়োগ করা সহজ। আপনি একটি ফাংশন লিখবেন যা ইনপুট এবং আউটপুট বাফারের পয়েন্টার নেয় এবং একই পুনরাবৃত্তিমূলক মিশ্রণ অপারেশন সম্পাদন করে।

Wasm-এর জন্য ধারণাগত C++ ফাংশন:

extern "C" { void apply_temporal_filter(unsigned char* current_frame, unsigned char* previous_frame, unsigned char* output_frame, int buffer_size, float alpha) { for (int i = 0; i < buffer_size; ++i) { if ((i + 1) % 4 != 0) { // আলফা চ্যানেল এড়িয়ে যান output_frame[i] = (unsigned char)(alpha * current_frame[i] + (1.0 - alpha) * previous_frame[i]); } else { output_frame[i] = current_frame[i]; } } } }

জাভাস্ক্রিপ্ট দিক থেকে, আপনি এই কম্পাইল করা Wasm মডিউলটি লোড করবেন। মূল পারফরম্যান্স সুবিধাটি আসে মেমরি শেয়ারিং থেকে। আপনি জাভাস্ক্রিপ্টে ArrayBuffer তৈরি করতে পারেন যা Wasm মডিউলের লিনিয়ার মেমরি দ্বারা সমর্থিত। এটি আপনাকে কোনো ব্যয়বহুল অনুলিপি ছাড়াই ফ্রেম ডেটা Wasm-এ পাস করতে দেয়। পুরো পিক্সেল-প্রসেসিং লুপটি তখন একটি একক, অত্যন্ত অপ্টিমাইজড Wasm ফাংশন কল হিসাবে চলে, যা জাভাস্ক্রিপ্ট `for` লুপের চেয়ে উল্লেখযোগ্যভাবে দ্রুত।

উন্নত টেম্পোরাল ফিল্টারিং কৌশল

সরল টেম্পোরাল অ্যাভারেজিং একটি দুর্দান্ত সূচনা বিন্দু, তবে এর একটি উল্লেখযোগ্য অসুবিধা রয়েছে: এটি মোশন ব্লার বা 'ঘোস্টিং' তৈরি করে। যখন একটি বস্তু চলে, তখন বর্তমান ফ্রেমের তার পিক্সেলগুলো আগের ফ্রেমের পটভূমির পিক্সেলগুলোর সাথে মিশে যায়, যা একটি ট্রেইল তৈরি করে। একটি সত্যিকারের পেশাদার-গ্রেড ফিল্টার তৈরি করতে, আমাদের গতি বিবেচনা করতে হবে।

মোশন-কম্পেনসেটেড টেম্পোরাল ফিল্টারিং (MCTF)

টেম্পোরাল নয়েজ রিডাকশনের জন্য গোল্ড স্ট্যান্ডার্ড হলো মোশন-কম্পেনসেটেড টেম্পোরাল ফিল্টারিং। একটি পিক্সেলকে আগের ফ্রেমের একই (x, y) স্থানাঙ্কের পিক্সেলের সাথে অন্ধভাবে মিশ্রিত করার পরিবর্তে, MCTF প্রথমে খুঁজে বের করার চেষ্টা করে যে সেই পিক্সেলটি কোথা থেকে এসেছে।

প্রক্রিয়াটির মধ্যে রয়েছে:

1. মোশন এস্টিমেশন: অ্যালগরিদমটি বর্তমান ফ্রেমকে ব্লকে (যেমন, ১৬x১৬ পিক্সেল) ভাগ করে। প্রতিটি ব্লকের জন্য, এটি আগের ফ্রেমে সবচেয়ে সাদৃশ্যপূর্ণ ব্লকটি খুঁজে বের করে (যেমন, যার Sum of Absolute Differences সর্বনিম্ন)। এই দুটি ব্লকের মধ্যে সরণকে 'মোশন ভেক্টর' বলা হয়।
2. মোশন কম্পেনসেশন: এরপর এটি মোশন ভেক্টর অনুযায়ী ব্লকগুলোকে স্থানান্তরিত করে আগের ফ্রেমের একটি 'মোশন-কম্পেনসেটেড' সংস্করণ তৈরি করে।
3. ফিল্টারিং: অবশেষে, এটি বর্তমান ফ্রেম এবং এই নতুন, মোশন-কম্পেনসেটেড আগের ফ্রেমের মধ্যে টেম্পোরাল অ্যাভারেজিং সম্পাদন করে।

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

অ্যাডাপটিভ ফিল্টারিং

আরেকটি উন্নতি হলো ফিল্টারটিকে অ্যাডাপটিভ বা অভিযোজিত করা। পুরো ফ্রেমের জন্য একটি নির্দিষ্ট alpha মান ব্যবহার করার পরিবর্তে, আপনি স্থানীয় অবস্থার উপর ভিত্তি করে এটি পরিবর্তন করতে পারেন।

• মোশন অ্যাডাপটিভিটি: উচ্চ গতি সনাক্ত করা এলাকাগুলিতে, আপনি alpha বাড়িয়ে দিতে পারেন (যেমন, ০.৯৫ বা ১.০) যাতে প্রায় সম্পূর্ণভাবে বর্তমান ফ্রেমের উপর নির্ভর করা যায়, যা কোনো মোশন ব্লার প্রতিরোধ করে। স্থির এলাকাগুলিতে (যেমন পটভূমির একটি দেয়াল), আপনি অনেক শক্তিশালী নয়েজ হ্রাসের জন্য alpha কমাতে পারেন (যেমন, ০.৫)।
• লুমিন্যান্স অ্যাডাপটিভিটি: নয়েজ প্রায়শই একটি ছবির অন্ধকার অংশে বেশি দেখা যায়। ফিল্টারটিকে ছায়ায় আরও আক্রমণাত্মক এবং উজ্জ্বল অংশে কম আক্রমণাত্মক করা যেতে পারে যাতে বিশদ সংরক্ষণ করা যায়।

বাস্তব ব্যবহার এবং অ্যাপ্লিকেশন

ব্রাউজারে উচ্চ-মানের নয়েজ রিডাকশন সম্পাদন করার ক্ষমতা অসংখ্য সম্ভাবনা উন্মোচন করে:

• রিয়েল-টাইম কমিউনিকেশন (WebRTC): ব্যবহারকারীর ওয়েবক্যাম ফিড ভিডিও এনকোডারে পাঠানোর আগে প্রি-প্রসেস করা। এটি কম-আলোর পরিবেশে ভিডিও কলের জন্য একটি বিশাল জয়, যা ভিজ্যুয়াল মান উন্নত করে এবং প্রয়োজনীয় ব্যান্ডউইথ হ্রাস করে।
• ওয়েব-ভিত্তিক ভিডিও এডিটিং: ইন-ব্রাউজার ভিডিও এডিটরে একটি 'Denoise' ফিল্টার ফিচার হিসেবে অফার করা, যা ব্যবহারকারীদের সার্ভার-সাইড প্রসেসিং ছাড়াই তাদের আপলোড করা ফুটেজ পরিষ্কার করতে দেয়।
• ক্লাউড গেমিং এবং রিমোট ডেস্কটপ: আগত ভিডিও স্ট্রিমগুলো পরিষ্কার করে কম্প্রেশন আর্টিফ্যাক্ট হ্রাস করা এবং একটি পরিষ্কার, আরও স্থিতিশীল ছবি প্রদান করা।
• কম্পিউটার ভিশন প্রি-প্রসেসিং: ওয়েব-ভিত্তিক AI/ML অ্যাপ্লিকেশনগুলির জন্য (যেমন অবজেক্ট ট্র্যাকিং বা ফেসিয়াল রিকগনিশন), ইনপুট ভিডিও ডিনয়েজ করা ডেটাকে স্থিতিশীল করতে পারে এবং আরও সঠিক এবং নির্ভরযোগ্য ফলাফলের দিকে নিয়ে যেতে পারে।

চ্যালেঞ্জ এবং ভবিষ্যতের দিকনির্দেশনা

শক্তিশালী হলেও, এই পদ্ধতিটি চ্যালেঞ্জ ছাড়া নয়। ডেভেলপারদের নিম্নলিখিত বিষয়গুলো সম্পর্কে সচেতন থাকতে হবে:

• পারফরম্যান্স: HD বা 4K ভিডিওর জন্য রিয়েল-টাইম প্রসেসিং বেশ চাহিদা সম্পন্ন। দক্ষ বাস্তবায়ন, সাধারণত ওয়েবঅ্যাসেম্বলি দিয়ে, অপরিহার্য।
• মেমরি: এক বা একাধিক পূর্ববর্তী ফ্রেম অসংকুচিত বাফার হিসাবে সংরক্ষণ করা উল্লেখযোগ্য পরিমাণে RAM খরচ করে। সতর্ক ব্যবস্থাপনা অপরিহার্য।
• লেটেন্সি: প্রতিটি প্রসেসিং ধাপ লেটেন্সি যোগ করে। রিয়েল-টাইম কমিউনিকেশনের জন্য, এই পাইপলাইনটি লক্ষণীয় বিলম্ব এড়াতে অত্যন্ত অপ্টিমাইজড হতে হবে।
• WebGPU এর সাথে ভবিষ্যৎ: উদীয়মান WebGPU API এই ধরনের কাজের জন্য একটি নতুন দিগন্ত উন্মোচন করবে। এটি এই প্রতি-পিক্সেল অ্যালগরিদমগুলোকে সিস্টেমের GPU-তে অত্যন্ত সমান্তরাল কম্পিউট শেডার হিসাবে চালানোর অনুমতি দেবে, যা এমনকি CPU-তে ওয়েবঅ্যাসেম্বলির চেয়েও পারফরম্যান্সে আরেকটি বিশাল লাফ দেবে।

উপসংহার

WebCodecs API ওয়েবে উন্নত মিডিয়া প্রসেসিংয়ের জন্য একটি নতুন যুগের সূচনা করেছে। এটি ঐতিহ্যবাহী ব্ল্যাক-বক্স <video> এলিমেন্টের বাধাগুলো ভেঙে দেয় এবং ডেভেলপারদের সত্যিকারের পেশাদার ভিডিও অ্যাপ্লিকেশন তৈরির জন্য প্রয়োজনীয় সূক্ষ্ম নিয়ন্ত্রণ দেয়। টেম্পোরাল নয়েজ রিডাকশন এর শক্তির একটি নিখুঁত উদাহরণ: একটি পরিশীলিত কৌশল যা ব্যবহারকারীর অনুভূত গুণমান এবং অন্তর্নিহিত প্রযুক্তিগত দক্ষতা উভয়কেই সরাসরি সম্বোধন করে।

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

পরের বার যখন আপনি একটি ওয়েব অ্যাপে একটি দানাদার ভিডিও দেখবেন, মনে রাখবেন যে এটি ঠিক করার সরঞ্জামগুলো এখন, প্রথমবারের মতো, ওয়েব ডেভেলপারদের হাতে সরাসরি রয়েছে। ওয়েবে ভিডিও নিয়ে কাজ করার জন্য এটি একটি উত্তেজনাপূর্ণ সময়।