Develop60 Zoom 만들기 14. WebRTC (2) 3. p2p 연결 생성하기 3-1) icecandidate 이해하기 offer 와 answer이 끝날 때, p2p연결의 양쪽에서는 icecandidate 이벤트를 실행할 것임. 여기서ice는 internet connectivity establishment를 의미하며 '인터넷 연결 생성'을 의미한다. icecandidate는 통신할 때 필요한 프로토콜과 라우팅 정보인데, 연결이 이루어지고 나면 이를 이용해 서로 데이터 교환을 시도할 수 있다. WebRTC연결이 처음 시작되면 일반적으로 icecandidate가 각 peer에서 여러개 만들어진다. 우리는 그중 하나를 연결에 이용하면 됨. 3-2) 이벤트 핸들러 함수 정의하기 //offer 받는 쪽. socket.on("offer", async(offer) =.. 2023. 9. 9. 2. Model 이해하기 (어드민 페이지 적용_Django.restAPI) MTV패턴의 M부분, 즉 MODEL ( 관리자 데이터페이지) 에 대해서 알아보자. 1. 어드민 페이지 접속 먼저 Migration 에러부터 수정하고 들어가자. 터미널에 다음 명령어 입력. → python manage.py migration 그 다음 파이썬 서버를 run 한 이후에 → python manage.py runserver (이전글에서 적었듯이 django 세팅 후 myvenv 가상환경 실행한 다음, 서버를 켜야 잘 동작한다,) 장고 선언 주소인 127.0.0.1:8000/admin/을 접속하면 다음의 화면을 확인할 수 있다. Django에서는 기본적으로 관리자 페이지를 이렇게 제공해준다. myweb의 url.py에 가면 다음의 코드를 확인할 수 있다. 어드민페이지까지 제공해주다니 참으로 편리하지.. 2023. 9. 7. Django.restAPI (with python/) _DRF 프로젝트 세팅 목표 : 파이썬 + Django를 이용하여 restful한 api를 만들어보고 나만의 todo app 개발 ( +@ DRF개념을 이해하고 응용해보자. ) 운영체제 : windows64bit 파이썬 버전 : 3.11.5 ( 최소 3.8.0 이상) Django 버전 : 3.2.10 DRF 버전 : 3.13.1 개발 도구 : VS CODE(무료) 가상환경도구 : virtualenv 사전지식 : MTV패턴에 대한 이해 파이썬 장고는 MTV패턴을 따른다. M : MODEL T : TEMPLATE V : VIEW 모델은 앱의 데이터 관련 부분을 다루고 ( 백단 ) 템플릿은 고객에게 직접적으로 보이는 화면 ( 프론트단 ) 뷰는 모델의 데이터를 템플릿에 전달하고, 템플릿에서 발생하는 이벤트를 처리하는 파트다. MVC .. 2023. 9. 6. Zoom만들기 13. WebRTC WebRTC는 web real-time communication을 뜻한다. WebRTC는 네가지 스텝을 통해 동작한다. Signalling Connecting Securing Communicationing 그리고 peer-to-peer로 데이터를 교환할 수 있게 해준다. 1. 그럼 peer-to-peer이 뭔데? 인터넷에 연결된 다수의 개별 사용자들이 중개 기관을 거치지 않고 데이터를 직접 주고받는다는 뜻이다. ※ socket.io로 만든 채팅 앱은 peer-to-peer가 아님. 왜냐하면 하나의 서버에 웹소켓이 여러개 이어져 있어서 서버가 중개 기관 역할을 했기 때문... 언제나 서버를 이용할 필요도 없다. 실시간 소통 속도도 빠르다. 서버를 유지하는데 드는 여러가지 비용도 줄일 수 있다. 다만 그렇다.. 2023. 9. 5. Zoom 만들기 12. 비디오와 오디오 제어하기 영상, 소리와 같은 미디어를 스트림으로 받아오는 작업을 해봤는데, 우리가 생성한 스트림 안에 있는 트랙(Track)이라는 것을 사용하면 비디오와 오디오를 따로 제어할 수 있음. 1. 트랙 살펴보기 스트림에서 트랙이란 스트림을 구성하는 미디어 요소 하나하나를 구분하는 일종의 단위이다. → 각 트랙은 배열로 표현되는데, 배열을 구성하는 객체에는 kind라는 키가 있고 여기에 트랙의 종류가 표시돼. ex) MediaStreamTrack {kind: 'audio'} / MediaStreamTrack {kind: 'video'} 2. 비디오와 오디오 제어하기 두 버튼의 핸들러 함수로 가서 버튼을 각각 클릭할 때마다 enable의 값이 변경되도록 변경. const socket = io(); const myFace .. 2023. 9. 5. Zoom 만들기 .11 카메라 불러오기 목표 사용자로부터 영상을 가져와 화면에 보여주기 마이크 음소거나 카메라 켜고 끄는 기능을 제어하는 버튼을 구현 카메라 여러개인 경우를 대비하여 사용하던 카메라를 바꿀 수 있게 할 것임. 1. 영상 출력 요소 추가하기 myFace라는 부를 영상을 만들어야함. home.pug를 다음과 같이 수정 doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title Zoom //MVP.css는 우리가 태그에 class나 id같은 특성을 추가하지 않아.. 2023. 9. 4. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
