Tech/WebRTC
![[WebRTC 02] 화면 공유(화면 녹화) 및 미디어 제어](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuhLmI%2FbtrapFleDiB%2FovQ4fQMd3h9OReEgO7j8GK%2Fimg.png)
[WebRTC 02] 화면 공유(화면 녹화) 및 미디어 제어
개요 웹캠화면이 아닌 화면 녹화(화면 공유)를 하려면 어떻게 해야할까? 그리고 일정 수준 이상의 비디오 품질로 비디오를 스트림 하고자 하는 경우 어떻게 처리해야 할까? 이번 챕터에서는 화면 공유와 비디오 제약에 대해서 다루어볼 것입니다! Step1. 비디오 제약 미디어 장치에 액세스 할 때 가능한 한 자세한 제약 조건을 제공하는 것이 좋습니다. 간단한 제약으로 기본 카메라와 마이크를 열 수 있지만 응용 프로그램에 가장 적합한 미디어 스트림과는 거리가 먼 미디어 스트림을 제공 할 수 있습니다. 특정 제약 조건은 MediaTrackConstraint 개체에 정의되어 있습니다. 하나는 오디오 용이고 다른 하나는 비디오 용입니다. 이 객체의 속성은 ConstraintLong , ConstraintBoolean ..
![[WebRTC 01] 사전작업, HTML에 비디오 스트림 표시하기, 웹캠 HTML에 표현 <video>](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9EtuT%2FbtrapFFqDl3%2FtPqBZba1lkoJcVPfx72pGk%2Fimg.png)
[WebRTC 01] 사전작업, HTML에 비디오 스트림 표시하기, 웹캠 HTML에 표현 <video>
개요 저는 HTML 화면에 비디오를 띄우는 방법 조차 몰랐기때문에, WebRTC에서 P2P 연결을 하기 이전에 비디오 스트림을 HTML 화면에 뿌리는 것부터 알아봤습니다 로컬 비디오 스트림을 html에 보이게 하는것은 JS로 구현이 가능하다. 여기 에서 미디어 스트림과 관련된 매서드들을 확인할 수 있습니다. 튜토리얼은 WebRTC 공식 가이드에 따라서 진행했으며, 중복된 코드가 있어서 일부 코드를 수정했습다. Step1. HTML video 태그 html에서 작성할 내용은 아주 간단합니다.video 태그만 있으면 된다. JS에서 이 태그를 잡아서 비디오 스트림을 뿌려줄 것이기때문! select는 카메라 및 오디오가 여러개여서 선택이 가능한 경우를 위해 두었습니다. Step 2. 사용(접근) 가능한 미디어..
![[WebRTC 00] WebRTC란? 개념 | 동작방식 | STUN & TURN | ICE | 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcmlOH%2FbtraqRMkyfN%2FBQBVPQvzkRlNLfkpb8J9K1%2Fimg.png)
[WebRTC 00] WebRTC란? 개념 | 동작방식 | STUN & TURN | ICE | 설명
WebRTC란? WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 JavaScript API입니다. 피어간에 전송되는 비디오, 음성 및 일반 데이터를 지원하므로 개발자는 강력한 음성 및 비디오 통신 솔루션을 구축할 수 있습니다. Android 및 iOS 애플리케이션과 같은 기본 클라이언트의 경우 동일한 기능을 제공하는 라이브러리를 사용할 수 있으며, WebRTC 프로젝트는 오픈 소스 이며 Apple, Google, Microsoft 및 Mozilla 등이 지원합니다. 요약하자면 webRTC는 데이터를 P2P로 실시간 전송이 가능한 JavaScript API 입니다. 전체적인 흐름과 개념은 여기를 클릭하면 영상으로 이해..