PricingLoginStart free
Utveckling av skrivbordsappar med Electron · Lektion

Skärminspelning och media

Utforska hur Ni får åtkomst till funktioner för skärminspelning och medieenheter samt integrerar dem i Era Electron-skrivbordsapplikationer.

Lektion 3 av 411 steg

Skärminspelning och media är en gratis lektion i Utveckling av skrivbordsappar med Electron på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av skrivbordsappar med Electron, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Åtkomst till kamera och skärm

Med Electron kan er skrivbordsapp använda nativa funktioner som kameror, mikrofoner och till och med skärminspelning. Det öppnar möjligheter för videosamtal, skärminspelning och mycket mer!

Vi utforskar hur man listar tillgängliga enheter, visar direkta kamerabilder och spelar in skrivbordet eller specifika fönster.

Upptäcka era enheter

Innan ni använder en kamera eller mikrofon kan ni ta reda på vad som är tillgängligt i användarens system. Metoden navigator.mediaDevices.enumerateDevices() tillhandahåller en lista över alla anslutna enheter för medieinmatning och medieutmatning.

Kör den här koden för att se era enheter. Ni kan behöva ge behörighet att komma åt enheterna.

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();
});

Visa en kamerastream

För att visa en direktsänd kamerabild använder vi navigator.mediaDevices.getUserMedia(). Metoden begär åtkomst till en medieinmatningsenhet (till exempel en kamera) och tillhandahåller, om åtkomst beviljas, en MediaStream.

Den här streamen kan sedan visas i ett <video>-element. Prova att köra det här exemplet:

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();
});

Användarbehörigheter och fel

Åtkomst till medieenheter som kameror och mikrofoner kräver uttryckligt tillstånd från användaren. När getUserMedia() anropas frågar operativsystemet vanligtvis användaren om samtycke.

  • Applikationen bör alltid kunna hantera fall där användaren beviljar eller nekar behörighet.
  • Genom att fånga fel från getUserMedia() (t.ex. NotAllowedError) kan ni informera användaren om behörighetsproblem.

Förstå DesktopCapturer

Electron tillhandahåller modulen desktopCapturer, ett kraftfullt verktyg som låter er spela in video och ljud från hela skärmen, specifika fönster eller enskilda bildskärmar.

Detta är viktigt när ni bygger funktioner som skärmdelning, skärminspelning eller till och med skärmbilder av andra program som körs på användarens skrivbord.

Hämta skärmkällor

För att spela in en skärm eller ett fönster behöver ni först hämta en lista över tillgängliga källor. desktopCapturer.getSources() tillhandahåller dessa, inklusive deras ID:n, namn och till och med miniatyrbilder.

Metoden är tillgänglig i renderingsprocessen (men exponeras vanligtvis via ett preload-skript av säkerhetsskäl). För enkelhetens skull använder vi den direkt i den här lektionen.

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();
});

Visa en skärmstream

När ni har ett käll-ID (t.ex. från en specifik bildskärm eller ett fönster) kan ni använda navigator.mediaDevices.getUserMedia() igen. Den här gången skickar ni med en begränsning med chromeMediaSource och käll-ID:t från desktopCapturer.

Detta spelar in den valda skärmen eller det valda fönstret och visar det i ett <video>-element, på samma sätt som en kamerabild.

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();
});

Grundläggande medieinspelning

När ni har fått en MediaStream (från en kamera eller skärm) kan ni spela in den med webbläsarens MediaRecorder-API. På så sätt kan ni spara streamen som en video- eller ljudfil.

MediaRecorder tar emot streamen och samlar in datablock som sedan kan kombineras till ett Blob-objekt (t.ex. en videofil).

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();
});

Bästa säkerhetspraxis

När ni arbetar med nativa mediefunktioner bör ni alltid prioritera säkerheten. Åtkomst till kameror, mikrofoner eller skärminspelning kan vara känslig.

  • Begär behörigheter med eftertanke: Be bara om behörigheter när de verkligen behövs för appens funktioner.
  • Informera användarna: Förklara tydligt varför appen behöver åtkomst till dessa nativa funktioner.
  • Kontextisolering och preload-skript: I riktiga applikationer bör ni använda contextIsolation: true och exponera desktopCapturer på ett säkert sätt via ett preload-skript. Det hindrar skadliga skript i renderingsprocessen från att komma åt Node.js-API:er direkt.

Snabbtest: nativa medier

Vilka av följande påståenden stämmer när det gäller åtkomst till nativa medier och skärminspelning i Electron?

Besvara frågan i den interaktiva lektionen

Sammanfattning: nativa medier

Bra jobbat! I den här lektionen utforskade vi hur Electron-applikationer kan interagera med nativa mediefunktioner:

  • Vi lärde oss att använda navigator.mediaDevices.enumerateDevices() för att lista tillgängliga kameror och mikrofoner.
  • Vi hämtade direkta kamerabilder med navigator.mediaDevices.getUserMedia().
  • Vi upptäckte modulen desktopCapturer för att lista och spela in innehåll från skärmar eller fönster.
  • Vi berörde kort hur MediaRecorder kan användas för att spara inspelade mediestreamar.
  • Slutligen betonade vi vikten av användarbehörigheter och god säkerhetspraxis vid hantering av känsliga nativa funktioner.

Med dessa verktyg kan ni bygga innehållsrika och interaktiva skrivbordsapplikationer med kraftfulla mediefunktioner!

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
12
Lektioner
47
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Skärminspelning och media” gratis?

Ja – hela texten till ”Skärminspelning och media” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av skrivbordsappar med Electron, kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skärminspelning och media”?

Utforska hur Ni får åtkomst till funktioner för skärminspelning och medieenheter samt integrerar dem i Era Electron-skrivbordsapplikationer. Ni övar på Utveckling av skrivbordsappar med Electron med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Utveckling av skrivbordsappar med Electron?

Du behöver inga förkunskaper. Utbildningen i Utveckling av skrivbordsappar med Electron på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Skärminspelning och media”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Utveckling av skrivbordsappar med Electron-lektionen?

Ja. Varje Utveckling av skrivbordsappar med Electron-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Arbeta med inbyggda moduler
  2. Aktivitetsfältsappar och märken
  3. Skärminspelning och media
  4. Övervakning av strömförsörjning och hårdvara
← Tillbaka till Utveckling av skrivbordsappar med Electron