| sitelink1 | https://webrtc.org/ |
|---|---|
| sitelink2 | https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API |
| sitelink3 | |
| sitelink4 | |
| extra_vars5 | |
| extra_vars6 |
1. Web RTC 란
Web RTC 기술은 면접, 강의 듣기 등 여러 사람이 온라인 미팅을 하기 위해서 이용하는 Google Meets나 Zoom 등 온라인 화상 회의 앱에서 이용됩니다.
Web RTC에 대해 설명하기에는 아직 큰 인사이트를 얻지 못해 간략하게 설명하자면
사용자 간 네트워크로 연결하고, 사용자의 미디어에 연결하여 실시간 스트리밍을 진행하는 것이 Web RTC의 핵심입니다.
2. MediaDevices
웹 표준 Media API인 MediaDevices를 이용하여 미디어 앱을 구현해보고자 합니다.
- enumberateDevices(): 시스템에 있는 가용한 미디어 입출력 장치 정보 목록 반환합니다.
- getSupportedConstraints(): 현재 사용자 기기나 브라우저가 인식하는 제한 가능한 속성들을 객체로 반환합니다.
- getDisplayMedia(): 공유 또는 녹음 목적으로 캡쳐할 디스플레이 혹은 그 일부를 선택하라는 메시지를 사용자에게 표시하고, 인가되면 MediaStream을 반환합니다.
- getUserMedia(): 프롬프트를 통해 사용자의 허가를 받아 시스템의 카메라 및 마이크를 켜고 비디오 트랙 및 오디오 트랙이 포함된 입력을 제공합니다.
3. References
- 간단한 미디어 애플리케이션 만들기 (feat. MediaDevices, MediaRecorder) - 사진 촬영, 화면 공유, 화면 녹화 using React, Typescript
- 1:1 실시간 미디어 스트리밍 구현 (바닐라 JS + Node.js)
