코스 개요

미디어 장치 처리

1. navigator.permissions를 사용한 브라우저 권한

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

2. navigator.mediaDevices를 사용한 미디어 장치 읽기

  • 장치 열거
  • 장치 변경 처리

3. 크로스-브라우저 호환성

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

4. 미디어 장치 처리

  • 장치 초기화: getUserMedia(constraints)
  • 미디어 장치 제약 조건
  • 미디어 스트림 시작 및 중지
  • 장치 변경 처리

5. MediaRecorder를 사용한 장치 녹화

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

선택적 추가 기능:

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

피어 연결

1. 시그널링 서버

  • 양방향 채널 옵션:
    • WebSocket
    • Socket.io
    • SignalR
  • 메시지 구조
  • 간단한 WebRTC 클라이언트
  • 전체 시그널링 흐름

2. WebRTC를 통한 비디오 채팅

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

선택적 기능:

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

3. 화면 공유

  • getDisplayMedia()의 사용
  • 아키텍처 및 옵션

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

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

5. WebRTC 통계 (getStats())

  • 통계 유형
  • 통계 해석 방법
  • 실시간 비트레이트/지터 차트
  • 품질 조정 전략

6. 모든 주제는

  • 실습 사례

요건

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

 14 시간

참가자 수


참가자당 가격

회원 평가 (5)

예정된 코스

관련 카테고리