ওয়েবে ভিডিও স্টোরেজ পরিচালনা করা

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

একজন পরিষেবা কর্মীর ভিডিও ক্যাশে করা হচ্ছে

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

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

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      return response || fetch(event.request);
    }),
  );
});

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

আগের কৌশলটিকে বলা হয় cache first । ওয়ার্কবক্স ব্যবহার করে একই জিনিস লিখতে, আপনাকে নিম্নলিখিতগুলি অন্তর্ভুক্ত করতে হবে:

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst()
);

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

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

আগ্রহী পন্থা

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

ফাইলগুলি প্রিক্যাশ করার জন্য আপনার সার্ভিস ওয়ার্কারে নিম্নলিখিত ওয়ার্কবক্স কোডটি ব্যবহার করা যেতে পারে:

import { addPlugins, precacheAndRoute } from 'workbox-precaching';
import { RangeRequestsPlugin } from 'workbox-range-requests';

addPlugins([new RangeRequestsPlugin()]);
precacheAndRoute(self.__WB_MANIFEST);

• import (s) - সংশ্লিষ্ট Workbox মডিউল থেকে প্রয়োজনীয় বাইন্ডিং লোড করুন। যেহেতু পরিষেবা কর্মীরা এখনও সর্বজনীনভাবে ESModules সমর্থন করে না, তাই আপনার Workbox-চালিত পরিষেবা কর্মীকে উৎপাদনে কাজ করার জন্য একটি বান্ডলারের মধ্য দিয়ে যেতে হবে।
• RangeRequestsPlugin - একটি Range হেডার সহ একটি অনুরোধ ক্যাশেড প্রতিক্রিয়া দ্বারা পূরণ করা সম্ভব করে তোলে। এটি প্রয়োজনীয় কারণ ব্রাউজারগুলি সাধারণত মিডিয়া কন্টেন্টের জন্য একটি Range হেডার ব্যবহার করে।
• addPlugins - আপনাকে প্রতিটি ওয়ার্কবক্স অনুরোধে ওয়ার্কবক্স প্লাগইন যোগ করার অনুমতি দেয়।
• precacheAndRoute - প্রিক্যাশ তালিকায় এন্ট্রি যোগ করে এবং সংশ্লিষ্ট ফেচ অনুরোধগুলি পরিচালনা করার জন্য একটি রুট তৈরি করে।
• __WB_MANIFEST - একটি স্থানধারক যা ওয়ার্কবক্স CLI (অথবা বিল্ড টুল প্লাগইন) প্রিক্যাশ ম্যানিফেস্ট দিয়ে প্রতিস্থাপন করে।

আপনার সার্ভিস ওয়ার্কারকে ওয়ার্কবক্স CLI অথবা আপনার পছন্দের বিল্ড টুলে পাস করুন এবং আপনার প্রিক্যাশ কীভাবে তৈরি করা উচিত তা কনফিগার করুন; নিচের মতো একটি workbox-config.js ফাইল CLI কে বলবে যে এটি আপনার সার্ভিস ওয়ার্কারকে কীভাবে রেন্ডার করবে:

module.exports = {
  globDirectory: '.',
  globPatterns: ['**/*.{html,mp4}'],
  maximumFileSizeToCacheInBytes: 5000000,
  swSrc: 'sw.js',
  swDest: 'sw.js',
};

• globDirectory - যে রুট ফোল্ডার থেকে প্রিক্যাশ ফাইল অনুসন্ধান শুরু করা হবে
• globPatterns - ফাইল প্যাটার্ন ( "globs" ) যা আগে থেকে ক্যাশে করা উচিত।
• maximumFileSizeToCacheInBytes - একটি ফাইলের প্রি-ক্যাশে আকারের সর্বোচ্চ সীমা, বাইটে।
• swSrc - আপনার পরিষেবা কর্মী তৈরি করতে ব্যবহৃত ফাইলের অবস্থান।
• swDest - জেনারেট করা সার্ভিস ওয়ার্কারের গন্তব্য (এটি সোর্স ফাইলের মতোই হতে পারে, তবে নিশ্চিত করুন যে প্রতিটি রানের জন্য self.__WB_MANIFEST উপস্থিত আছে)।

যখন বিল্ড প্রক্রিয়াটি চলে, তখন পরিষেবা কর্মীর একটি নতুন সংস্করণ তৈরি হয় এবং self.__WB_MANIFEST ফাইলের একটি তালিকা দিয়ে প্রতিস্থাপিত হয়, প্রতিটিতে তাদের পুনর্বিবেচনা বোঝাতে একটি হ্যাশ থাকে:

precacheAndRoute([
  {
    revision: '524ac4b453c83f76eb9caeec11854ca5',
    url: 'ny.mp4',
  },
]);

প্রতিবার বিল্ড প্রক্রিয়া চলাকালীন, এই তালিকাটি বর্তমান ফাইলগুলির সেট এবং তাদের বর্তমান সংস্করণ হ্যাশগুলি দিয়ে পুনর্লিখন করা হয়। এটি নিশ্চিত করে যে যখনই কোনও ফাইল যুক্ত করা, সরানো বা পরিবর্তন করা হবে, পরিষেবা কর্মী তার পরবর্তী ইনস্টলেশনে ক্যাশে আপডেট করবে।

অলস পদ্ধতি

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

ফাইল ক্যাশে করা হচ্ছে

Cache.open() ব্যবহার করে ক্যাশে তৈরি করা যেতে পারে, এবং তারপর Cache.add() অথবা Cache.addAll() ব্যবহার করে ফাইলগুলি ক্যাশে যোগ করা যেতে পারে। যদি আপনার অ্যাপটি ক্যাশে করার জন্য ভিডিওগুলির একটি JSON তালিকা পায়, তাহলে সেগুলি নিম্নরূপ একটি ভিডিও ক্যাশে যোগ করা যেতে পারে:

// Open video cache
const cache = await caches.open('video-cache');
// Fetch list of videos
const videos = await (await fetch('/video-list.json')).json();
// Add videos to cache
await cache.addAll(videos);

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

দ্রষ্টব্য: প্রয়োজনীয় ভিডিওটি সম্পূর্ণরূপে ক্যাশে না হওয়া পর্যন্ত আপনার প্লেব্যাক বন্ধ রাখা উচিত কারণ আপনার ব্যবহারকারীদের কাছে ভিডিওটি ডাউনলোড করার জন্য এবং আপনার ব্যবহারকারীর কাছে স্ট্রিম করার জন্য পর্যাপ্ত ব্যান্ডউইথ নাও থাকতে পারে।

ক্যাশেড ভিডিও ফাইল পরিবেশন করা হচ্ছে

একটি সার্ভিস ওয়ার্কার রানটাইম ক্যাশিং কৌশল , যেমন প্রথমে ক্যাশে, পূর্বে ক্যাশে করা ভিডিও ফাইলগুলি পরিবেশন করতে ব্যবহার করা যেতে পারে:

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { RangeRequestsPlugin } from 'workbox-range-requests';

registerRoute(
  ({ request }) => request.destination === 'video',
  new CacheFirst({
    cacheName: 'video-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200],
      }),
      new RangeRequestsPlugin(),
    ],
  }),
);

• import (s) - সংশ্লিষ্ট ওয়ার্কবক্স মডিউল থেকে প্রয়োজনীয় বাইন্ডিং লোড করে।
• registerRoute - প্রতিক্রিয়া প্রদানকারী ফাংশনগুলিতে (ক্যাশিং কৌশল এবং প্লাগইন) অনুরোধগুলিকে রুট করে।
• CacheFirst - ক্যাশিং কৌশল যা ক্যাশ থেকে অনুরোধ পূরণ করে, যদি উপলব্ধ থাকে, অন্যথায় এটি নেটওয়ার্ক থেকে নিয়ে আসে এবং ক্যাশ আপডেট করে।
• CacheableResponsePlugin - রেসপন্স ক্যাশেবল হওয়ার জন্য কোন হেডারগুলি উপস্থিত থাকা প্রয়োজন তা নির্দেশ করতে ব্যবহৃত হয়। ভিডিও স্ট্রিম করার সময় আংশিক কন্টেন্ট রেসপন্স (206) ক্যাশে না করার জন্য ভিডিও ক্যাশিং রুটের জন্য শুধুমাত্র 200টি স্ট্যাটাস অন্তর্ভুক্ত করতে ভুলবেন না।
• RangeRequestsPlugin - প্লাগইন যা একটি ক্যাশেড রেসপন্সের মাধ্যমে একটি Range হেডার সহ একটি অনুরোধ পূরণ করা সম্ভব করে তোলে। এটি প্রয়োজনীয় কারণ ব্রাউজারগুলি সাধারণত মিডিয়া কন্টেন্টের জন্য একটি Range হেডার ব্যবহার করে।

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