Real-Time Streaming Systems (WebRTC + Live Data) · 강의

사용자 미디어 장치에 접근하기

웹 브라우저에서 `navigator.mediaDevices.getUserMedia()`를 사용해 사용자의 카메라와 마이크에 접근하는 방법을 알아봅니다.

사용자 미디어 장치에 접근하기은(는) CoddyKit의 무료 Real-Time Streaming Systems (WebRTC + Live Data) 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 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 AI 튜터), CoddyKit PRO로 업그레이드하면 Real-Time Streaming Systems (WebRTC + Live Data) 강의 전체를 잠금 해제할 수 있습니다. Real-Time Streaming Systems (WebRTC + Live Data) 강의에는 총 4개의 강의가 포함되어 있습니다.

“사용자 미디어 장치에 접근하기”에서 뭘 배우나요?

웹 브라우저에서 `navigator.mediaDevices.getUserMedia()`를 사용해 사용자의 카메라와 마이크에 접근하는 방법을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Real-Time Streaming Systems (WebRTC + Live Data)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Real-Time Streaming Systems (WebRTC + Live Data)을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Real-Time Streaming Systems (WebRTC + Live Data)은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“사용자 미디어 장치에 접근하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Real-Time Streaming Systems (WebRTC + Live Data) 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Real-Time Streaming Systems (WebRTC + Live Data) 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Real-Time Streaming Systems (WebRTC + Live Data)(으)로 돌아가기