Доступ к медиадустройствам пользователя
Узнайте, как использовать `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
MediaStreamobjects.
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: truefor microphone access.video: truefor 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
constraintsobject 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) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Доступ к медиадустройствам пользователя
- Добавление и удаление медиадорожек
- Отображение удалённых аудио и видео
- Управление качеством медиа и ограничениями