Sanntidsstrømmesystemer (WebRTC + sanntidsdata) · leksjon

Tilgang til brukerens medieenheter

Oppdag hvordan De kan bruke `navigator.mediaDevices.getUserMedia()` for å få tilgang til brukerens kamera og mikrofon i en nettleser.

Leksjon 1 av 411 trinn

Tilgang til brukerens medieenheter er en gratis leksjon i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sanntidsstrømmesystemer (WebRTC + sanntidsdata), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Hent brukerens kamera og mikrofon

Velkommen! I denne leksjonen skal du lære hvordan du får tilgang til brukerens kamera og mikrofon direkte fra nettleseren. Dette er det første steget for alle sanntidsapplikasjoner for video eller lyd.

Vi skal bruke et kraftig Web API som heter navigator.mediaDevices.getUserMedia().

Hvorfor getUserMedia?

getUserMedia() er en sentral WebRTC-funksjon. Den lar webapplikasjonen din:

Fange opp lyd fra en mikrofon.
Fange opp video fra et kamera.
Få tilgang til disse strømmene som MediaStream-objekter.

Disse strømmene kan deretter vises, tas opp eller sendes til andre noder.

Brukertillatelser er avgjørende

Før appen din kan få tilgang til medieenheter, må nettleseren be brukeren om tillatelse. Dette er en viktig sikkerhets- og personvernfunksjon.

Det vises en melding der brukeren blir bedt om å «Allow» eller «Block» tilgang til kameraet eller mikrofonen.
Koden din kjører bare hvis brukeren gir tillatelse.

Be om medier med begrensninger

getUserMedia() tar ett argument: et constraints-objekt. Dette objektet forteller nettleseren hvilke medietyper du trenger, og eventuelle spesifikke krav.

Du kan be om:

audio: true for tilgang til mikrofonen.
video: true for tilgang til kameraet.

La oss se på et grunnleggende eksempel.

Be bare om lyd

Slik ber du bare om tilgang til brukerens mikrofon. Hvis det lykkes, gir nettleseren deg et MediaStream-objekt som inneholder lydsporet.

Deretter logger vi om det lyktes eller mislyktes å hente strømmen. I en ekte app ville du knyttet den til et <audio>-element.

Direkte lydstrøm

Prøv å kjøre dette eksempelet for å få tilgang til mikrofonen. Kontroller at nettleseren har tillatelse!

async function getAudio() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
    console.log('Audio stream obtained successfully!');
    // In a browser, you'd typically attach this to an <audio> element:
    // const audioEl = document.getElementById('localAudio');
    // if (audioEl) audioEl.srcObject = stream;
  } catch (err) {
    console.error('Error accessing audio:', err.name, err.message);
    alert('Failed to get audio. Check permissions! Error: ' + err.name);
  }
}

getAudio();

Be bare om video

På samme måte kan vi bare be om tilgang til brukerens kamera. Den resulterende MediaStream-strømmen vil inneholde et videospår.

Denne strømmen kan deretter vises i et <video>-element, slik at du kan se kamerabildet i sanntid.

Direkte videostrøm

Kjør dette eksempelet for å prøve å få tilgang til kameraet. Husk å gi tilgang til kameraet når du blir spurt!

async function getVideo() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
    console.log('Video stream obtained successfully!');
    // In a browser, you'd typically attach this to a <video> element:
    // const videoEl = document.getElementById('localVideo');
    // if (videoEl) {
    //   videoEl.srcObject = stream;
    //   videoEl.play();
    // }
  } catch (err) {
    console.error('Error accessing video:', err.name, err.message);
    alert('Failed to get video. Check permissions! Error: ' + err.name);
  }
}

getVideo();

Håndtere feil

getUserMedia() returnerer et Promise som kan avvises. Det er viktig å håndtere disse feilene på en god måte.

Vanlige feiltyper omfatter:

NotAllowedError: Brukeren avslo tillatelsen.
NotFoundError: Fant ikke noe kamera eller noen mikrofon.
NotReadableError: Maskinvarefeil.

Bruk alltid en try...catch-blokk, slik eksemplene viser!

Rask kontroll: Begrensninger

Du vil ha tilgang til både brukerens mikrofon og kamera. Hvilket constraints-objekt skal du sende til getUserMedia()?

Besvar den i den interaktive leksjonen

Oppsummering: Tilgang til medier

Godt jobbet! Du har lært hvordan du bruker navigator.mediaDevices.getUserMedia() for å få tilgang til brukerens kamera og mikrofon.

Det krever uttrykkelig tillatelse fra brukeren.
constraints-objektet angir de ønskede medietypene.
Håndter alltid mulige feil med try...catch.

Deretter skal du lære hvordan du håndterer disse mediesporene i en WebRTC-node-til-node-tilkobling.

Gratis å komme i gang

Lær deg Sanntidsstrømmesystemer (WebRTC + sanntidsdata) med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tilgang til brukerens medieenheter» gratis?

Ja – hele teksten i «Tilgang til brukerens medieenheter» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sanntidsstrømmesystemer (WebRTC + sanntidsdata) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tilgang til brukerens medieenheter»?

Oppdag hvordan De kan bruke `navigator.mediaDevices.getUserMedia()` for å få tilgang til brukerens kamera og mikrofon i en nettleser. Du øver på Sanntidsstrømmesystemer (WebRTC + sanntidsdata) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sanntidsstrømmesystemer (WebRTC + sanntidsdata)?

Ingen tidligere erfaring er nødvendig. Sanntidsstrømmesystemer (WebRTC + sanntidsdata) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Tilgang til brukerens medieenheter»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-leksjonen?

Ja. Alle Sanntidsstrømmesystemer (WebRTC + sanntidsdata)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sanntidsstrømmesystemer (WebRTC + sanntidsdata)