Tuesday, November 19, 2024

JavaScript Closure in Hindi

जब कोई जावास्क्रिप्ट सीखना शुरू करता है, तो उसके लिए क्लोजर (Closure) का कॉन्सेप्ट थोड़ा कठिन लग सकता है। इसका सबसे बड़ा कारण यह है कि अधिकांश प्रोग्रामर उन भाषाओं से आते हैं, जिनमें फंक्शनल प्रोग्रामिंग की अवधारणा कम या बिलकुल नहीं होती। उदाहरण के लिए, यदि कोई C, C#, या C++ से आता है, तो उसने आमतौर पर ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP) या प्रोसिजरल ओरिएंटेड प्रोग्रामिंग (POP) के आधार पर प्रोग्रामिंग सीखी होती है।

ऐसी प्रोग्रामिंग भाषाओं में फंक्शन को एक ऑब्जेक्ट की तरह उपयोग नहीं किया जाता। जावास्क्रिप्ट सिखाने वाले के लिए यह स्पष्ट करना जरूरी है कि जावास्क्रिप्ट में फंक्शन भी एक प्रकार का ऑब्जेक्ट होता है। यह फंक्शनल प्रोग्रामिंग की विशेषता के कारण संभव है, जिसे समझना हर जावास्क्रिप्ट प्रोग्रामर के लिए आवश्यक है।

क्लोजर की अवधारणा

जावास्क्रिप्ट में, आप किसी फंक्शन के भीतर दूसरे फंक्शन को पैरामीटर के रूप में पास कर सकते हैं और यहां तक कि एक फंक्शन के भीतर दूसरे फंक्शन को रिटर्न भी कर सकते हैं। इसका अर्थ यह है कि एक फंक्शन, किसी दूसरे फंक्शन को रिटर्न कर सकता है।

जब कोई फंक्शन किसी दूसरे फंक्शन को रिटर्न करता है, तो इनर फंक्शन (inner function) वह होता है जिसे आउटर फंक्शन (outer function) रिटर्न करता है। जब आउटर फंक्शन को कॉल किया जाता है, तो वह इनर फंक्शन का ऑब्जेक्ट रिटर्न करता है।

लेकिन यहां ध्यान देने वाली बात यह है कि रिटर्न किया गया इनर फंक्शन, हिप मेमोरी में स्टोर रहता है। जावास्क्रिप्ट का गैरेज कलेक्टर (Garbage Collector) इस फंक्शन को तब तक डीलोकेट (deallocate) नहीं करता, जब तक इसका उपयोग प्रोग्राम में हो रहा हो।

क्लोजर का व्यवहार

क्लोजर को समझने के लिए यह जानना आवश्यक है कि कोई भी फंक्शन अपने स्कोप में मौजूद डेटा को उपयोग कर सकता है। जावास्क्रिप्ट में, कोई भी इनर फंक्शन अपने आउटर फंक्शन के डेटा को एक्सेस कर सकता है। इसे हम ऐसे कह सकते हैं कि "एनक्लोजिंग फंक्शन" और "एनक्लोज्ड फंक्शन" के बीच एक संबंध होता है, जहां इनर फंक्शन, आउटर फंक्शन के डेटा को उपयोग करता है।

दूसरे शब्दों में, आउटर फंक्शन के डेटा को इनर फंक्शन द्वारा इस्तेमाल किया जा सकता है। क्लोजर के मामले में, जब आउटर फंक्शन इनर फंक्शन को रिटर्न करता है, तो इनर फंक्शन जिन वेरिएबल्स को पॉइंट करता है, वे सभी डेटा क्लोजर में स्टोर रहते हैं।

उदाहरण से क्लोजर को समझते हैं 

उदाहरण 1: आउटर और इनर फंक्शन

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log(`Outer Variable: ${outerVariable}`);
        console.log(`Inner Variable: ${innerVariable}`);
    };
}

// आउटर फंक्शन को कॉल करें और एक क्लोजर प्राप्त करें
const newFunction = outerFunction('Hello');
// इनर फंक्शन को कॉल करें
newFunction('World');

आउटपुट:
Outer Variable: Hello  
Inner Variable: World  

यहां, innerFunction में outerVariable का उपयोग किया गया है, जो outerFunction के स्कोप में था। लेकिन outerFunction को कॉल करने के बाद भी outerVariable को गैरेज कलेक्टर द्वारा डीलोकेट नहीं किया गया, क्योंकि इनर फंक्शन उसे उपयोग कर रहा था। यही क्लोजर की ताकत है।

उदाहरण 2: डेटा एन्कैप्सुलेशन (Data Encapsulation)

function counter() {
    let count = 0; // यह वेरिएबल क्लोजर में रहेगा
    return function() {
        count++;
        return count;
    };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(increment()); // 3

यह उदाहरण दिखाता है कि कैसे count वेरिएबल को बाहर से एक्सेस किए बिना, increment फंक्शन के जरिए नियंत्रित किया जा सकता है। यह डेटा एन्कैप्सुलेशन का एक उत्कृष्ट उदाहरण है।

क्लोजर के उपयोग

  1. डेटा एन्कैप्सुलेशन: क्लोजर का उपयोग प्राइवेट डेटा को संरक्षित करने के लिए किया जा सकता है।
  2. मेमोरी मैनेजमेंट: उपयोग में न आने वाले वेरिएबल्स को हटाने से मेमोरी की बचत होती है।
  3. कस्टम इटररेटर्स और इवेंट हैंडलर्स: जटिल लॉजिक को संभालने के लिए क्लोजर का उपयोग किया जाता है।
  4. मेमोइज़ेशन (Memoization): किसी फंक्शन के परिणामों को स्टोर करके बार-बार की गणना से बचा जा सकता है।

निष्कर्ष

क्लोजर जावास्क्रिप्ट की एक शक्तिशाली अवधारणा है, जो इसे अन्य भाषाओं से अलग बनाती है। इसका उपयोग जटिल प्रोग्रामिंग समस्याओं को हल करने में किया जा सकता है। हालांकि शुरुआत में इसे समझना मुश्किल लग सकता है, लेकिन एक बार समझने के बाद यह आपकी प्रोग्रामिंग क्षमताओं को बहुत अधिक बढ़ा देता है।

Sunday, November 17, 2024

JavaScript Extract metadata of an audio or video file

To extract metadata from audio or video files in JavaScript, you can use several libraries and methods, depending on the type of metadata you need (e.g., duration, bitrate, codec, etc.). Below are some of the common ways to extract metadata in both the browser and Node.js environments.

1. Extracting Metadata in the Browser

In the browser, you can use the HTMLMediaElement interface, which is part of the <audio> and <video> HTML tags, to extract basic metadata like duration, width, height, and more.
Example: Extracting metadata from an audio or video file in the browser
<input type="file" id="fileInput" />
<script>
  document.getElementById("fileInput").addEventListener("change", function(event) {
    const file = event.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);

      const mediaElement = document.createElement(file.type.startsWith('audio') ? 'audio' : 'video');
      mediaElement.src = url;

      mediaElement.addEventListener("loadedmetadata", function() {
        // For video files, extract width and height
        const duration = mediaElement.duration;  // Duration in seconds
        const width = mediaElement.videoWidth;
        const height = mediaElement.videoHeight;

        console.log("Duration:", duration);
        console.log("Width:", width);
        console.log("Height:", height);

        if (file.type.startsWith('audio')) {
          // If it's an audio file, extract additional properties like duration
          console.log("Audio Duration:", duration);
        }

        // Clean up the object URL
        URL.revokeObjectURL(url);
      });
    }
  });
</script>
Explanation:
  1. loadedmetadata: This event is fired once the metadata (like duration, dimensions for video, and duration for audio) is loaded.
  2. mediaElement.duration: The total length of the media (audio or video) in seconds.
  3. mediaElement.videoWidth and mediaElement.videoHeight: These properties are for video files to get the resolution.
  4. file.type.startsWith('audio'): Used to determine if the file is audio or video based on its MIME type.

2. Using ffmpeg.js for Advanced Metadata Extraction

If you need more detailed metadata, like codec information, bitrate, or more complex details, you can use ffmpeg.js, which is a JavaScript port of FFmpeg and provides comprehensive media processing capabilities.
Example: Extracting metadata with ffmpeg.js
You can use ffmpeg.js to get detailed metadata, including codec, format, bitrate, and more.
<input type="file" id="fileInput" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ffmpeg.js/0.10.0/ffmpeg.min.js"></script>
<script>
  document.getElementById("fileInput").addEventListener("change", function(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = function() {
        const arrayBuffer = reader.result;
        const ffmpeg = createFFmpeg({ log: true });

        ffmpeg.load().then(() => {
          // Write the input file into ffmpeg.js virtual filesystem
          ffmpeg.FS("writeFile", file.name, new Uint8Array(arrayBuffer));

          // Run ffprobe to get detailed metadata
          ffmpeg.run("-i", file.name).then(() => {
            const metadata = ffmpeg.FS("readFile", file.name + ".ffprobe.json");
            const metadataStr = new TextDecoder().decode(metadata);
            const metadataJson = JSON.parse(metadataStr);

            // Display or process the metadata
            console.log("Metadata:", metadataJson);
          });
        });
      };
      reader.readAsArrayBuffer(file);
    }
  });
</script>
Explanation:
ffmpeg.js allows you to access detailed metadata (e.g., codec, bitrate, etc.) using FFmpeg commands, like -i, which can retrieve information about the file.
You can use ffprobe with ffmpeg.js to extract detailed metadata (using commands like -i for input info). In this example, we assume the ffprobe output is returned as a JSON object, which you can then parse and process.

3. Using the audio-metadata Library (Node.js)

If you're working in a Node.js environment, you can use a package like audio-metadata to extract metadata from audio files.
Installation: npm install audio-metadata
Example: Extracting Audio Metadata with audio-metadata
const fs = require("fs");
const path = require("path");
const { parseFile } = require("audio-metadata");

const filePath = path.join(__dirname, "example.mp3");

fs.readFile(filePath, (err, buffer) => {
  if (err) {
    console.error("Error reading file:", err);
    return;
  }

  const metadata = parseFile(buffer);

  // Display metadata
  console.log("Metadata:", metadata);
});
Explanation:
audio-metadata is used to read the metadata of audio files in Node.js.
The parseFile function reads the audio file and returns metadata, which can include bitrate, duration, sample rate, channels, etc.

4. Using mediainfo.js for Detailed Media Info (Node.js and Browser)

mediainfo.js is a wrapper for MediaInfo, a tool for extracting metadata from media files. This tool can give very detailed information about both audio and video files, including codec, bitrate, resolution, and more.
Installation: npm install mediainfo.js
Example: Extracting Metadata with mediainfo.js
const fs = require('fs');
const MediaInfo = require('mediainfo.js');

MediaInfo({ format: 'object' }).then(function (MediaInfo) {
  const filePath = 'example.mp4';
  fs.readFile(filePath, (err, buffer) => {
    if (err) throw err;
    
    MediaInfo.parseData(buffer).then(data => {
      console.log('File Metadata:', data);
    });
  });
});
Explanation:
mediainfo.js can parse a wide range of media files and provide detailed metadata.
It works both in Node.js and the browser, but may require specific handling for browser environments due to file reading limitations.

Conclusion

  1. Basic Metadata: You can use the built-in HTMLMediaElement in the browser to extract basic metadata such as duration, width, and height.
  2. Advanced Metadata: For more detailed metadata (e.g., codec, bitrate), you can use ffmpeg.js, mediainfo.js, or audio-metadata in Node.js.
  3. Browser Support: ffmpeg.js and mediainfo.js can also be used in the browser for more complex metadata extraction, though they may require larger file handling and more processing time.
These methods will allow you to extract and process metadata for audio and video files effectively in JavaScript.

Hot Topics