본문 바로가기

Web/Web API2

[WebRTC API] WebRTC 초보자 가이드 WebRTC 간단 소개 브라우저에서 오디오, 비디오와 같은 미디어 장치를 포착하여 타 브라우저에 스트림 할 수 있을 뿐만 아니라 데이터 통신도 지원하는 기술이다. 별도의 중개 서버 없이 peer to peer 데이터 공유와 화상 회의를 가능하게 한다. 상호 연관된 API와 프로토콜로 구성되어 작동한다. WebRTC API * WebRTC API에는 3가지 주요 구성 요소가 있으며 고유한 역할을 한다. 1. MediaStream (GetUserMedia) MediaStream API는 JavaScript 를 사용하여 카메라 및 마이크 장치에 접근 및 제어를 할 수 있는 방법을 제공한다. 2. RTCPeerConnection 참가자들이 중개 서버 없이 peer와 직접 연결을 생성할 수 있는 방법을 제공한다... 2021. 3. 30.
[Drag and Drop API] 드래그 엔 드롭 기능 개발 기록 자바스크립트 드래그 엔 드롭 이벤트를 다루어 볼 수 있는 좋은 기회가 찾아 왔다. 실제 회사 서비스에 도입 하기 전, 테스트 겸 해당 기능을 갖춘 UI를 퀵퀵퀵(?) 하게 만들어 보고 싶었지만 난 "신입 개발자야" 티를 내듯 별것 아닌 기능에 생각보다 많은 고민과 시간을 투자했다. 어쨋든, 혼자서 구현해본 이 작은 기능이 내부적으로 어떻게 돌아가게 만들었는지 공유하고 싶어졌다. 로직 해당 기능의 로직을 포인트로 간단하게 적어보자면 1. 자바스크립트가 load 되면 selector를 이용해 id가 app인 HTML 요소를 App이라는 함수의 인자로 넘겨 해당 함수 scope 에서 사용할 수 있게 만든다. 2. 넘겨 받은 인자를 부모로 기본 UI를 렌더링 하고 드래그 엔 드롭 이벤트를 바인드 시켜준다. 3... 2021. 1. 31.