0Pricing
Real-Time Streaming Systems (WebRTC + Live Data) · Ders

Kullanıcı Medya Cihazlarına Erişim

Bir web tarayıcısında kullanıcının kamerasına ve mikrofonuna erişmek için `navigator.mediaDevices.getUserMedia()` işlevini nasıl kullanacağınızı keşfedin.

Kullanıcı Medya Cihazlarına Erişim, CoddyKit'te ücretsiz bir Real-Time Streaming Systems (WebRTC + Live Data) dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Real-Time Streaming Systems (WebRTC + Live Data) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Get User's Camera & Mic

Welcome! In this lesson, we'll learn how to access a user's camera and microphone directly from their web browser. This is the first step for any real-time video or audio application.

We'll use a powerful Web API called navigator.mediaDevices.getUserMedia().

Why getUserMedia?

getUserMedia() is a core WebRTC feature. It allows your web application to:

  • Capture audio from a microphone.
  • Capture video from a camera.
  • Access these streams as MediaStream objects.

These streams can then be displayed, recorded, or sent to other peers.

User Permissions are Key

Before your app can access any media devices, the browser must ask the user for permission. This is a crucial security and privacy feature.

  • A prompt will appear asking to "Allow" or "Block" camera/microphone access.
  • Your code only runs if the user grants permission.

Requesting Media with Constraints

getUserMedia() takes a single argument: a constraints object. This object tells the browser which media types you need and any specific requirements.

You can request:

  • audio: true for microphone access.
  • video: true for camera access.

Let's see a basic example.

Requesting Only Audio

Here's how to request only the user's microphone. If successful, the browser provides a MediaStream object containing the audio track.

We'll then log the success (or failure) of getting the stream. In a real app, you'd attach it to an <audio> element.

Live Audio Stream

Try running this example to access your microphone. Make sure your browser has permission!

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

Requesting Only Video

Similarly, we can request only the user's camera. The resulting MediaStream will contain a video track.

This stream can then be displayed in an <video> element, allowing you to see your live camera feed.

Live Video Stream

Run this example to try accessing your camera. Remember to grant camera access when prompted!

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

Dealing with Errors

getUserMedia() returns a Promise that can reject. It's crucial to handle these errors gracefully.

Common error types include:

  • NotAllowedError: User denied permission.
  • NotFoundError: No camera/mic found.
  • NotReadableError: Hardware error.

Always use a try...catch block as shown in the examples!

Quick Check: Constraints

You want to access both the user's microphone and camera. Which constraints object should you pass to getUserMedia()?

Recap: Accessing Media

Great job! You've learned how to use navigator.mediaDevices.getUserMedia() to access a user's camera and microphone.

  • It requires explicit user permission.
  • The constraints object specifies desired media types.
  • Always handle potential errors with try...catch.

Next, we'll learn how to manage these media tracks within a WebRTC peer connection.

Sıkça Sorulan Sorular

“Kullanıcı Medya Cihazlarına Erişim” dersi ücretsiz mi?

Evet — “Kullanıcı Medya Cihazlarına Erişim” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Real-Time Streaming Systems (WebRTC + Live Data) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Real-Time Streaming Systems (WebRTC + Live Data) kursu toplamda 4 dersten oluşur.

“Kullanıcı Medya Cihazlarına Erişim” dersinde ne öğreneceğim?

Bir web tarayıcısında kullanıcının kamerasına ve mikrofonuna erişmek için `navigator.mediaDevices.getUserMedia()` işlevini nasıl kullanacağınızı keşfedin. Real-Time Streaming Systems (WebRTC + Live Data) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Real-Time Streaming Systems (WebRTC + Live Data) öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Real-Time Streaming Systems (WebRTC + Live Data), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Kullanıcı Medya Cihazlarına Erişim” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Real-Time Streaming Systems (WebRTC + Live Data) dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Real-Time Streaming Systems (WebRTC + Live Data) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Kullanıcı Medya Cihazlarına Erişim
  2. Medya Parçalarını Ekleme ve Kaldırma
  3. Uzak Sesi ve Videoyu Görüntüleme
  4. Medya Kalitesini ve Kısıtlamaları Denetleme
← Real-Time Streaming Systems (WebRTC + Live Data) Sayfasına Dön