Electron डेस्कटॉप ऐप विकास · पाठ

स्क्रीन कैप्चर और मीडिया

स्क्रीन कैप्चर क्षमताओं और मीडिया उपकरणों तक पहुँचने तथा उन्हें अपने Electron डेस्कटॉप ऐप्लिकेशन में एकीकृत करने का अन्वेषण करें।

पाठ 3, कुल 4 में से11 चरण

स्क्रीन कैप्चर और मीडिया, CoddyKit पर Electron डेस्कटॉप ऐप विकास का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Electron डेस्कटॉप ऐप विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

कैमरा और स्क्रीन तक पहुँच

Electron आपके डेस्कटॉप ऐप को कैमरा, माइक्रोफ़ोन और यहाँ तक कि स्क्रीन कैप्चर जैसी नेटिव सुविधाओं का उपयोग करने देता है। इससे वीडियो कॉल, स्क्रीन रिकॉर्डिंग और बहुत कुछ करने की संभावनाएँ खुलती हैं!

हम उपलब्ध उपकरणों की सूची बनाना, लाइव कैमरा फ़ीड दिखाना और आपके डेस्कटॉप या विशिष्ट विंडो को कैप्चर करना सीखेंगे।

अपने उपकरणों की पहचान करना

कैमरा या माइक्रोफ़ोन का उपयोग करने से पहले, आप देख सकते हैं कि उपयोगकर्ता के सिस्टम पर क्या उपलब्ध है। navigator.mediaDevices.enumerateDevices() method सभी कनेक्टेड मीडिया इनपुट और आउटपुट उपकरणों की सूची देता है।

अपने उपकरण देखने के लिए यह कोड चलाएँ। उपकरणों तक पहुँच की अनुमति देनी पड़ सकती है।

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 450,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // Simplifies example for A1. Use preload scripts for security in real apps.
    }
  });

  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Media Devices</title>
    </head>
    <body>
        <h1>Available Media Devices</h1>
        <ul id="device-list"></ul>

        <script>
            async function getMediaDevices() {
                try {
                    const devices = await navigator.mediaDevices.enumerateDevices();
                    const list = document.getElementById('device-list');
                    if (devices.length === 0) {
                        list.innerHTML = '<li>No media devices found or permission denied.</li>';
                        return;
                    }
                    devices.forEach(device => {
                        const li = document.createElement('li');
                        li.textContent = `Kind: ${device.kind}, Label: ${device.label || 'Unknown'}`; 
                        list.appendChild(li);
                    });
                } catch (err) {
                    console.error('Error listing devices:', err);
                    document.getElementById('device-list').innerHTML = `<li>Error: ${err.message}</li>`;
                }
            }
            getMediaDevices();
        </script>
    </body>
    </html>
  `;
  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

कैमरा स्ट्रीम दिखाना

लाइव कैमरा फ़ीड दिखाने के लिए हम navigator.mediaDevices.getUserMedia() का उपयोग करते हैं। यह method किसी मीडिया इनपुट उपकरण (जैसे कैमरा) तक पहुँच का अनुरोध करता है और अनुमति मिलने पर एक MediaStream उपलब्ध कराता है।

इसके बाद इस स्ट्रीम को <video> element में दिखाया जा सकता है। इस उदाहरण को चलाकर देखें:

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 450,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // Simplifies example for A1. Use preload scripts for security in real apps.
    }
  });

  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Camera Stream</title>
    </head>
    <body>
        <h1>My Camera Feed</h1>
        <video id="camera-feed" autoplay style="width:100%; height:auto;"></video>
        <p id="status"></p>

        <script>
            async function startCamera() {
                const video = document.getElementById('camera-feed');
                const status = document.getElementById('status');
                try {
                    const stream = await navigator.mediaDevices.getUserMedia({
                        video: true // Request video access
                    });
                    video.srcObject = stream;
                    status.textContent = 'Camera feed active.';
                } catch (err) {
                    console.error('Error accessing camera:', err);
                    status.textContent = `Error: ${err.message}. Please grant camera permission.`;
                }
            }
            startCamera();
        </script>
    </body>
    </html>
  `;
  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

उपयोगकर्ता अनुमतियाँ और त्रुटियाँ

कैमरा और माइक्रोफ़ोन जैसे मीडिया उपकरणों तक पहुँचने के लिए उपयोगकर्ता की स्पष्ट अनुमति आवश्यक होती है। जब getUserMedia() को कॉल किया जाता है, तो ऑपरेटिंग सिस्टम आमतौर पर उपयोगकर्ता से सहमति माँगता है।

आपका ऐप्लिकेशन उन स्थितियों को संभालने के लिए हमेशा तैयार होना चाहिए, जब उपयोगकर्ता अनुमति दे या अस्वीकार कर दे।
getUserMedia() से आने वाली त्रुटियों (जैसे NotAllowedError) को पकड़ने से आप उपयोगकर्ता को अनुमति संबंधी समस्याओं के बारे में बता सकते हैं।

DesktopCapturer को समझना

Electron desktopCapturer मॉड्यूल उपलब्ध कराता है। यह एक शक्तिशाली उपकरण है, जो आपके ऐप को पूरी स्क्रीन, विशिष्ट विंडो या अलग-अलग डिस्प्ले से वीडियो और ऑडियो कैप्चर करने देता है।

स्क्रीन शेयरिंग, स्क्रीन रिकॉर्डिंग या उपयोगकर्ता के डेस्कटॉप पर चल रहे अन्य ऐप्लिकेशन के स्क्रीनशॉट लेने जैसी सुविधाएँ बनाने के लिए यह आवश्यक है।

स्क्रीन स्रोत प्राप्त करना

स्क्रीन या विंडो कैप्चर करने के लिए आपको पहले उपलब्ध स्रोतों की सूची प्राप्त करनी होगी। desktopCapturer.getSources() इन स्रोतों की सूची देता है, जिसमें उनकी ID, नाम और थंबनेल भी शामिल होते हैं।

यह method रेंडरर प्रक्रिया में उपलब्ध है (लेकिन सुरक्षा के लिए आमतौर पर इसे प्रीलोड स्क्रिप्ट के माध्यम से उपलब्ध कराया जाता है)। इस पाठ को सरल रखने के लिए हम इसे सीधे ऐक्सेस करेंगे।

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 450,
    webPreferences: {
      nodeIntegration: true, // Required for desktopCapturer
      contextIsolation: false // Simplifies example for A1. Use preload scripts for security in real apps.
    }
  });

  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Screen Sources</title>
    </head>
    <body>
        <h1>Available Screen Sources</h1>
        <ul id="source-list"></ul>

        <script>
            const { desktopCapturer } = require('electron'); // Access desktopCapturer

            async function getScreenSources() {
                const list = document.getElementById('source-list');
                try {
                    const sources = await desktopCapturer.getSources({
                        types: ['window', 'screen']
                    });

                    if (sources.length === 0) {
                        list.innerHTML = '<li>No screen or window sources found.</li>';
                        return;
                    }

                    sources.forEach(source => {
                        const li = document.createElement('li');
                        li.textContent = `ID: ${source.id}, Name: ${source.name}`; 
                        if (source.thumbnail) {
                            const img = document.createElement('img');
                            img.src = source.thumbnail.toDataURL();
                            img.style.maxWidth = '100px';
                            img.style.marginLeft = '10px';
                            li.appendChild(img);
                        }
                        list.appendChild(li);
                    });
                } catch (err) {
                    console.error('Error getting sources:', err);
                    list.innerHTML = `<li>Error: ${err.message}</li>`;
                }
            }
            getScreenSources();
        </script>
    </body>
    </html>
  `;
  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

स्क्रीन स्ट्रीम दिखाना

किसी स्रोत की ID प्राप्त करने के बाद (जैसे किसी विशिष्ट डिस्प्ले या विंडो से), आप फिर से navigator.mediaDevices.getUserMedia() का उपयोग कर सकते हैं। इस बार आप desktopCapturer स्रोत ID के साथ chromeMediaSource constraint पास करते हैं।

इससे चुनी गई स्क्रीन/विंडो कैप्चर होकर कैमरा फ़ीड की तरह <video> element में दिखाई देगी।

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 450,
    webPreferences: {
      nodeIntegration: true, // Required for desktopCapturer
      contextIsolation: false // Simplifies example for A1. Use preload scripts for security in real apps.
    }
  });

  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Screen Capture</title>
    </head>
    <body>
        <h1>Screen Capture Demo</h1>
        <button id="start-capture">Start Screen Capture</button>
        <video id="screen-feed" autoplay style="width:100%; height:auto;"></video>
        <p id="status"></p>

        <script>
            const { desktopCapturer } = require('electron');

            document.getElementById('start-capture').addEventListener('click', async () => {
                const video = document.getElementById('screen-feed');
                const status = document.getElementById('status');
                status.textContent = 'Searching for sources...';

                try {
                    const sources = await desktopCapturer.getSources({
                        types: ['screen'], // Only screens for simplicity
                        thumbnailSize: { width: 1, height: 1 } // No large thumbnails needed
                    });

                    if (sources.length === 0) {
                        status.textContent = 'No screen sources found.';
                        return;
                    }

                    // Take the first screen found
                    const screenSource = sources[0]; 
                    status.textContent = `Capturing: ${screenSource.name}`;

                    const stream = await navigator.mediaDevices.getUserMedia({
                        audio: false, // Can be true for audio
                        video: {
                            mandatory: {
                                chromeMediaSource: 'desktop',
                                chromeMediaSourceId: screenSource.id,
                                minWidth: 1280, minHeight: 720,
                                maxWidth: 1920, maxHeight: 1080
                            }
                        }
                    });
                    video.srcObject = stream;
                    status.textContent = 'Screen capture active.';

                } catch (err) {
                    console.error('Error capturing screen:', err);
                    status.textContent = `Error: ${err.message}.`;
                }
            });
        </script>
    </body>
    </html>
  `;
  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

मूल मीडिया रिकॉर्डिंग

कैमरा या स्क्रीन से MediaStream प्राप्त करने के बाद, आप ब्राउज़र के MediaRecorder API का उपयोग करके उसे रिकॉर्ड कर सकते हैं। इससे आप स्ट्रीम को वीडियो या ऑडियो फ़ाइल के रूप में सहेज सकते हैं।

MediaRecorder स्ट्रीम लेकर डेटा के छोटे-छोटे हिस्से एकत्र करता है, जिन्हें बाद में एक Blob (जैसे वीडियो फ़ाइल) में जोड़ा जा सकता है।

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 600,
    height: 450,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false // Simplifies example for A1. Use preload scripts for security in real apps.
    }
  });

  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Media Recorder</title>
    </head>
    <body>
        <h1>Simple Recorder</h1>
        <button id="start-cam">Start Camera</button>
        <button id="start-rec" disabled>Record</button>
        <button id="stop-rec" disabled>Stop</button>
        <video id="live-feed" autoplay muted style="width:100%; height:auto;"></video>
        <a id="download-link" style="display:none;">Download Recording</a>
        <p id="status"></p>

        <script>
            const startCamBtn = document.getElementById('start-cam');
            const startRecBtn = document.getElementById('start-rec');
            const stopRecBtn = document.getElementById('stop-rec');
            const downloadLink = document.getElementById('download-link');
            const liveFeed = document.getElementById('live-feed');
            const status = document.getElementById('status');

            let mediaRecorder;
            let recordedChunks = [];
            let currentStream;

            startCamBtn.addEventListener('click', async () => {
                try {
                    currentStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                    liveFeed.srcObject = currentStream;
                    startRecBtn.disabled = false;
                    startCamBtn.disabled = true;
                    status.textContent = 'Camera ready. Click Record.';
                } catch (err) {
                    status.textContent = `Error: ${err.message}`;
                    console.error('Error starting camera:', err);
                }
            });

            startRecBtn.addEventListener('click', () => {
                recordedChunks = [];
                mediaRecorder = new MediaRecorder(currentStream);
                mediaRecorder.ondataavailable = event => {
                    if (event.data.size > 0) {
                        recordedChunks.push(event.data);
                    }
                };
                mediaRecorder.onstop = () => {
                    const blob = new Blob(recordedChunks, { type: 'video/webm' });
                    const url = URL.createObjectURL(blob);
                    downloadLink.href = url;
                    downloadLink.download = 'electron-recording.webm';
                    downloadLink.style.display = 'block';
                    status.textContent = 'Recording stopped. Download available.';
                };
                mediaRecorder.start();
                startRecBtn.disabled = true;
                stopRecBtn.disabled = false;
                status.textContent = 'Recording...';
            });

            stopRecBtn.addEventListener('click', () => {
                mediaRecorder.stop();
                startRecBtn.disabled = false;
                stopRecBtn.disabled = true;
            });
        </script>
    </body>
    </html>
  `;
  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);
app.on('window-all-closed', () => app.quit());
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

सुरक्षा की सर्वोत्तम प्रक्रियाएँ

नेटिव मीडिया के साथ काम करते समय सुरक्षा को हमेशा प्राथमिकता दें। कैमरा, माइक्रोफ़ोन या स्क्रीन कैप्चर की अनुमति देना संवेदनशील हो सकता है।

समझदारी से अनुमतियाँ माँगें: अनुमतियाँ केवल तभी माँगें जब आपके ऐप की कार्यक्षमता के लिए वे बिल्कुल आवश्यक हों।
उपयोगकर्ताओं को बताएँ: स्पष्ट रूप से समझाएँ कि आपके ऐप को इन नेटिव सुविधाओं तक पहुँच की आवश्यकता क्यों है।
Context Isolation और प्रीलोड स्क्रिप्ट: वास्तविक ऐप्लिकेशन में contextIsolation: true का उपयोग करें और प्रीलोड स्क्रिप्ट के माध्यम से desktopCapturer को सुरक्षित रूप से उपलब्ध कराएँ। इससे रेंडरर में मौजूद दुर्भावनापूर्ण स्क्रिप्ट Node.js API को सीधे ऐक्सेस नहीं कर पाएँगी।

त्वरित जाँच: नेटिव मीडिया

Electron में नेटिव मीडिया और स्क्रीन कैप्चर तक पहुँच के संबंध में निम्नलिखित में से कौन-से कथन सही हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: नेटिव मीडिया

बहुत अच्छा! इस पाठ में हमने देखा कि Electron ऐप्लिकेशन नेटिव मीडिया सुविधाओं के साथ कैसे इंटरैक्ट कर सकते हैं:

उपलब्ध कैमरों और माइक्रोफ़ोन की सूची बनाने के लिए हमने navigator.mediaDevices.enumerateDevices() का उपयोग करना सीखा।
हमने navigator.mediaDevices.getUserMedia() से लाइव कैमरा फ़ीड प्राप्त की।
स्क्रीन या विंडो की सामग्री की सूची बनाने और उसे कैप्चर करने के लिए हमने desktopCapturer मॉड्यूल को जाना।
कैप्चर की गई मीडिया स्ट्रीम सहेजने के लिए हमने MediaRecorder के उपयोग का संक्षिप्त परिचय लिया।
अंत में, संवेदनशील नेटिव सुविधाओं को संभालते समय उपयोगकर्ता अनुमतियों और सुरक्षा की सर्वोत्तम प्रक्रियाओं के महत्व पर ज़ोर दिया।

ये उपकरण आपको शक्तिशाली मीडिया क्षमताओं वाले समृद्ध, इंटरैक्टिव डेस्कटॉप ऐप्लिकेशन बनाने में सक्षम बनाते हैं!

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 47

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “स्क्रीन कैप्चर और मीडिया” पाठ निःशुल्क है?

हाँ—“स्क्रीन कैप्चर और मीडिया” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Electron डेस्कटॉप ऐप विकास पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Electron डेस्कटॉप ऐप विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“स्क्रीन कैप्चर और मीडिया” में मैं क्या सीखूँगा?

स्क्रीन कैप्चर क्षमताओं और मीडिया उपकरणों तक पहुँचने तथा उन्हें अपने Electron डेस्कटॉप ऐप्लिकेशन में एकीकृत करने का अन्वेषण करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Electron डेस्कटॉप ऐप विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Electron डेस्कटॉप ऐप विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Electron डेस्कटॉप ऐप विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“स्क्रीन कैप्चर और मीडिया” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Electron डेस्कटॉप ऐप विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Electron डेस्कटॉप ऐप विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Electron डेस्कटॉप ऐप विकास पर वापस जाएँ