문의를 보내주셔서 감사합니다! 팀원이 곧 연락드리겠습니다.
예약을 보내주셔서 감사합니다! 저희 팀 멤버 중 한 분이 곧 연락드리겠습니다.
코스 개요
미디어 장치 처리
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 시간
회원 평가 (1)
기술적 교훈마다 여러 실습 문제가 포함되어 있어 개념을 확실히 이해할 수 있었습니다.
Andrei-Calin Bajea
코스 - OWASP Top 10 2025
기계 번역됨
