वेब पर वीडियो स्टोरेज मैनेज करना

वीडियो को मैनेज करना मुश्किल होता है. स्ट्रीमिंग में बहुत ज़्यादा बैंडविड्थ लगता है और कैश मेमोरी में सेव करना आसान नहीं होता. जब वीडियो लूप में चलते हैं, तो ये समस्याएं और बढ़ जाती हैं. जैसे, किऑस्क डिसप्ले में. उदाहरण के लिए, अगर किसी कंपनी के पास ऐसे सैकड़ों डिवाइस हैं जिन पर हर दिन, पूरे दिन 30 वीडियो बार-बार चलाए जाते हैं, तो इससे कंपनी के नेटवर्क पर काफ़ी असर पड़ सकता है. वीडियो को स्ट्रीम करने के बजाय, कैश मेमोरी से दिखाने पर, आपको डाउनलोड करने का शुल्क सिर्फ़ एक बार देना होता है. साथ ही, वीडियो को तेज़ी से चलाया जा सकता है और उन्हें ऑफ़लाइन देखने के लिए उपलब्ध कराया जा सकता है. इसके लिए, ब्राउज़र की स्टोरेज क्षमताओं का फ़ायदा लिया जा सकता है. वीडियो फ़ाइलों को सेव करने के लिए, Cache storage API और IndexedDB सबसे सही हैं. ये दोनों ही अच्छे विकल्प हैं. हालांकि, हम Cache storage API पर फ़ोकस करेंगे, क्योंकि इसे लोकप्रिय service worker लाइब्रेरी Workbox के साथ इंटिग्रेट किया जा सकता है.

सर्विस वर्कर से वीडियो को कैश मेमोरी में सेव करना

वीडियो जैसी बड़ी ऐसेट को डाउनलोड और कैश मेमोरी में सेव करने में ज़्यादा समय लग सकता है और प्रोसेसर पर भी ज़्यादा असर पड़ सकता है. इसलिए, आपको इसे मुख्य थ्रेड से अलग बैकग्राउंड में करना चाहिए. सर्विस वर्कर, कैश मेमोरी से जुड़े टास्क को ऑफ़लोड करने के लिए खास तौर पर काम आते हैं. ये पेज और नेटवर्क के बीच प्रॉक्सी के तौर पर काम करते हैं. इससे अनुरोधों को इंटरसेप्ट किया जा सकता है और नेटवर्क के जवाब पर अतिरिक्त लॉजिक लागू किया जा सकता है. उदाहरण के लिए, कैशिंग की रणनीति.

कैशिंग की कई रणनीतियां होती हैं. हर रणनीति को अलग-अलग इस्तेमाल के उदाहरणों में मदद करने के लिए डिज़ाइन किया गया है. उदाहरण के लिए, अगर कैश मेमोरी में कोई फ़ाइल मौजूद है, तो उसे दिखाने के लिए या अगर वह मौजूद नहीं है, तो नेटवर्क से फ़ाइल दिखाने के लिए, यह कोड लिखा जा सकता है.

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

अलग-अलग ऐसेट टाइप या उन यूआरएल के लिए इसे मैनेज करना मुश्किल हो सकता है जिनके लिए अलग-अलग कैश मेमोरी की रणनीतियों की ज़रूरत होती है. साथ ही, इसमें बार-बार गड़बड़ियां हो सकती हैं. Workbox, टूल का एक सेट उपलब्ध कराता है. इसमें राउटिंग हेल्पर और कैशिंग की रणनीतियां शामिल हैं. इनकी मदद से, सर्विस वर्कर कोड को ज़्यादा जानकारी देने वाले और दोबारा इस्तेमाल किए जा सकने वाले तरीके से लिखा जा सकता है.

पिछली रणनीति को कैश फ़र्स्ट कहा जाता है. Workbox का इस्तेमाल करके, इसी चीज़ को लिखने के लिए आपको यह शामिल करना होगा:

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

Workbox, कैशिंग की अन्य रणनीतियों और सर्विस वर्कर के सामान्य कामों के लिए, इसी तरह की रेसिपी उपलब्ध कराता है. इनमें Webpack और Rollup जैसे बिल्ड टूल के साथ इंटिग्रेशन भी शामिल है.

Workbox सेट अप करने के बाद, आपको यह चुनना होगा कि वीडियो को कब कैश मेमोरी में सेव करना है. यहां दो तरीके हैं: पेज लोड होने पर तुरंत या वीडियो का अनुरोध किए जाने पर.

तुरंत जांच करने का तरीका

प्रीकैशिंग एक ऐसी तकनीक है जिसमें सर्विस वर्कर इंस्टॉल करने के दौरान, फ़ाइलों को कैश मेमोरी में सेव किया जाता है. इससे सर्विस वर्कर के चालू होते ही, ये फ़ाइलें उपलब्ध हो जाती हैं. Workbox, उन फ़ाइलों के लिए प्रीकैशिंग को अपने-आप सेट अप कर सकता है जिन्हें वह बिल्ड प्रोसेस के दौरान ऐक्सेस कर सकता है.

फ़ाइलों को पहले से कैश मेमोरी में सेव करने के लिए, अपने सर्विस वर्कर में इस Workbox कोड का इस्तेमाल किया जा सकता है:

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

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

• import(s) - Load the bindings required from the corresponding Workbox modules. फ़िलहाल, सर्विस वर्कर में ESModules का इस्तेमाल हर जगह नहीं किया जा सकता. इसलिए, Workbox की मदद से बनाए गए सर्विस वर्कर को बंडलर से पास करना होगा, ताकि वह प्रोडक्शन में काम कर सके.
• RangeRequestsPlugin - इसकी मदद से, Range हेडर वाले अनुरोध को कैश किए गए रिस्पॉन्स से पूरा किया जा सकता है. यह ज़रूरी है, क्योंकि ब्राउज़र आम तौर पर मीडिया कॉन्टेंट के लिए Range हेडर का इस्तेमाल करते हैं.
• addPlugins - इसकी मदद से, Workbox के हर अनुरोध में Workbox प्लगिन जोड़े जा सकते हैं.
• precacheAndRoute - यह प्रीकैश सूची में एंट्री जोड़ता है और फ़ेच के अनुरोधों को मैनेज करने के लिए एक रूट बनाता है.
• __WB_MANIFEST - यह एक प्लेसहोल्डर है. इसे Workbox CLI या बिल्ड टूल प्लगिन, प्रीकैश मेनिफ़ेस्ट से बदल देता है.

अपने सर्विस वर्कर को Workbox CLI या अपनी पसंद के बिल्ड टूल में पास करें. साथ ही, कॉन्फ़िगर करें कि आपका प्रीकैश कैसे जनरेट होना चाहिए. workbox-config.js फ़ाइल,CLI को बताएगी कि उसे आपके सर्विस वर्कर को कैसे रेंडर करना चाहिए. जैसे:

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

• globDirectory - वह रूट फ़ोल्डर जहां से प्रीकैश फ़ाइलों को खोजना शुरू करना है
• globPatterns - फ़ाइल के ऐसे पैटर्न (“ग्लोब”) जिन्हें पहले से कैश मेमोरी में सेव किया जाना चाहिए.
• 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) - यह Workbox मॉड्यूल से ज़रूरी बाइंडिंग लोड करता है.
• registerRoute - यह अनुरोधों को उन फ़ंक्शन (कैशिंग की रणनीतियां और प्लगिन) पर भेजता है जो जवाब देते हैं.
• CacheFirst - यह कैश मेमोरी में सेव करने की ऐसी रणनीति है जो कैश मेमोरी से अनुरोध पूरा करती है. अगर कैश मेमोरी में अनुरोध पूरा करने के लिए ज़रूरी डेटा मौजूद नहीं है, तो यह नेटवर्क से डेटा फ़ेच करती है और कैश मेमोरी को अपडेट करती है.
• CacheableResponsePlugin - इसका इस्तेमाल यह बताने के लिए किया जाता है कि रिस्पॉन्स को कैश मेमोरी में सेव करने के लिए, कौनसे हेडर मौजूद होने चाहिए. वीडियो को कैश मेमोरी में सेव करने के लिए, सिर्फ़ 200 स्टेटस शामिल करें. इससे वीडियो स्ट्रीम करते समय, कॉन्टेंट के कुछ हिस्से (206) को कैश मेमोरी में सेव होने से रोका जा सकेगा.
• RangeRequestsPlugin - यह एक प्लगिन है. इसकी मदद से, Range हेडर वाले अनुरोध को कैश मेमोरी में सेव किए गए रिस्पॉन्स से पूरा किया जा सकता है. यह ज़रूरी है, क्योंकि ब्राउज़र आम तौर पर मीडिया कॉन्टेंट के लिए Range हेडर का इस्तेमाल करते हैं.

ज़्यादा स्ट्रीमिंग करने वाले ऐप्लिकेशन के लिए, वीडियो लोड होने की प्रोसेस को ऑप्टिमाइज़ करना एक अहम काम है. ब्राउज़र के Cache storage API और Workbox का इस्तेमाल करके, इस मुश्किल काम को मैनेज किया जा सकता है. इससे उपयोगकर्ताओं का बैंडविथ बचाया जा सकता है, सर्वर का लोड कम किया जा सकता है, वीडियो को तेज़ी से चलाया जा सकता है, और वीडियो को ऑफ़लाइन होने पर भी चलाया जा सकता है.