Real-Time Streaming Systems (WebRTC + Live Data) · درس

الوصول إلى أجهزة وسائط المستخدم

تعرّف إلى كيفية استخدام `navigator.mediaDevices.getUserMedia()` للوصول إلى كاميرا المستخدم وميكروفونه في متصفح الويب.

الوصول إلى أجهزة وسائط المستخدم درس مجاني في Real-Time Streaming Systems (WebRTC + Live Data) على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Real-Time Streaming Systems (WebRTC + Live Data)، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Real-Time Streaming Systems (WebRTC + Live Data) 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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.

الأسئلة الشائعة

هل درس «الوصول إلى أجهزة وسائط المستخدم» مجاني؟

نعم — نص درس «الوصول إلى أجهزة وسائط المستخدم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Real-Time Streaming Systems (WebRTC + Live Data)، انتقل إلى CoddyKit PRO. تتضمن دورة Real-Time Streaming Systems (WebRTC + Live Data) 4 دروس في المجموع.

ماذا ستتعلم في «الوصول إلى أجهزة وسائط المستخدم»؟

تعرّف إلى كيفية استخدام `navigator.mediaDevices.getUserMedia()` للوصول إلى كاميرا المستخدم وميكروفونه في متصفح الويب. تتمرن على Real-Time Streaming Systems (WebRTC + Live Data) مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Real-Time Streaming Systems (WebRTC + Live Data)؟

لا تُشترط خبرة سابقة. Real-Time Streaming Systems (WebRTC + Live Data) على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الوصول إلى أجهزة وسائط المستخدم»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Real-Time Streaming Systems (WebRTC + Live Data) هذا؟

نعم. كل درس في Real-Time Streaming Systems (WebRTC + Live Data) يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Real-Time Streaming Systems (WebRTC + Live Data)