코스 개요

Day 1 – 미디어 디바이스 처리

1. 브라우저 권한 관리: navigator.permissions

  • 하드웨어 접근:
    • 웹캠
    • 마이크
  • 선택적인 권한:
    • 지리 위치 정보
    • 알림
    • 클립보드 (읽기/쓰기)
  • 권한 쿼리와 상태
  • 제한 사항 및 브라우저 호환성
  • 실습 예시

2. 미디어 디바이스 읽기: navigator.mediaDevices

  • 디바이스 열거
  • 디바이스 변경 처리
  • 실습 예시

3. 브라우저 호환성

  • API 사용:
    • navigator.permissions.query()
    • navigator.mediaDevices.enumerateDevices()
    • getUserMedia()
  • Safari 대체 전략
  • 실습 예시

4. 미디어 디바이스 처리

  • 디바이스 초기화: getUserMedia(constraints)
  • 미디어 디바이스 제한 사항
  • 미디어 스트림 시작 및 중지
  • 디바이스 변경 처리
  • 실습 예시

5. MediaRecorder를 사용한 디바이스 녹음

  • 스트리밍 및 녹음 시작/중지
  • .webm 파일 다운로드
  • 실시간 웨이브폼 미리 보기
  • 실습 예시

선택 사항 추가 기능:

  • ScriptProcessorNode를 사용한 .wav 형식 저장
  • 오디오 FFT 스펙트럼 시각화
  • 데시벨 단위의 볼륨 막대
  • webkitSpeechRecognition을 사용한 음성 인식

Day 2 – 피어 연결

1. 신호 서버

  • 양방향 채널 옵션:
    • WebSocket
    • Socket.io
    • SignalR
  • 메시지 구조
  • 간소화된 WebRTC 클라이언트
  • 완전한 신호 흐름
  • 실습 예시

2. WebRTC를 통한 비디오 채팅

  • 아키텍처: Node.js + ws
  • WebRTC 클라이언트: RTCPeerConnection
  • 로컬 E2E 테스트
  • 실습 예시

선택 사항 추가 기능:

  • 통화 종료 (연결 닫기, 미디어 중지)
  • 그룹 통화 (다중 사용자 방)
  • 토큰 기반 간단한 인증

3. 화면 공유

  • getDisplayMedia() 사용
  • 아키텍처 및 옵션
  • 실습 예시

4. 세션 설명 프로토콜 (SDP)

  • 소개 및 내용
  • SDP 읽기 및 해석
  • 코덱:
    • 오디오 & 비디오
    • 협상 및 제어
    • 대체 전략
  • 실습 예시

5. getStats()를 통한 WebRTC 통계

  • 통계 유형
  • 통계 해석 방법
  • 실시간 비트율/지터 차트
  • 품질 적응 전략
  • 실습 예시

 

요건

이 과정은 비디오 채팅, 화면 공유 또는 오디오 스트리밍과 같은 브라우저 기반 실시간 통신 기능을 구축하는 프론트엔드 및 풀스택 개발자, 기술 아키텍트, 엔지니어를 위한 이상적인 과정입니다. 참가자들은 JavaScript와 웹 기술에 대한 작업 경험이 있어야 하며, 선택적으로 Node.js와 WebSocket 기반 통신 경험이 있습니다.
 14 시간

참가자 수


참가자당 가격

회원 평가 (5)

예정된 코스

관련 카테고리