Dev/클론 코딩
-
[노마드코더] 줌 클론 코딩 - 9. 카메라 전환, 모바일 접속, Data Channel, WebRTC 정리Dev/클론 코딩 2023. 2. 20. 03:19
이전까지는 카메라 전환 후 상대 브라우저에 반영, 모바일 접속에 오류가 있었다. Sender - 카메라 전환 적용 카메라를 전환하면, getMedia 함수를 통해 새로운 stream을 만들게 된다. 그 stream의 변경 사항을 상대 브라우저 peer에게도 전달해야 적용이 된다. - 카메라를 전환했는데도 상대방에게 보내는 track은 바뀌지 않는다. 해당 track을 변화시키기 위해 먼저 kind:video의 sender를 찾아 변화할 sender를 찾고, 그 sender를 replaceTrack()을 통해 새롭게 stream이 변경된 Video Track을 매개변수로 넣어 상대 Peer에 해당 stream이 반영되도록 한다. - 상대 Peer에도 카메라가 잘 변경되었다! RTCRtpSender - We..
-
[노마드코더] 줌 클론 코딩 - 8. WebRTC 통신Dev/클론 코딩 2023. 2. 19. 22:02
WebRTC란? WebRTC API - Web API | MDN WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 developer.mozilla.org Web Real-Time Communication : 웹 기반 실시간 통신을 가능하게 해주는 기술. peer-to-peer 기존 web socket 통신은 한 서버에 많은 web socket들이 연결되어 있었고, 메시지를 보낼 때 서버로 보내진 후 서버가 해당 그 메시지를 모두에게 전달하는 방식이었다. WebRTC는 브라우저간 peer-to-peer 통신을 하여 영상 및 오디오, 텍스..
-
[노마드코더] 줌 클론 코딩 - 7. 비디오 캠, 마이크 음성Dev/클론 코딩 2023. 2. 15. 20:20
이전 채팅 구현을 모두 지우고 다시 새로 기능을 구현한다. User Video 영상 가져오기 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 Noom link(rel="stylesheet", href="https://unpkg.com/mvp.css") body header h1 Noom main div#myStream video#myFace(autoplay, playsinline, width="400", h..
-
[노마드코더] 줌 클론 코딩 - 6. 개설된 방, 사용자 수 띄우기Dev/클론 코딩 2023. 2. 15. 04:38
Adapter 란? Adapter | Socket.IO An Adapter is a server-side component which is responsible for broadcasting events to all or a subset of clients. socket.io web socket 프로젝트에서 클라이언트 트래픽이 늘어나게 된다면, 하나의 서버로는 부족하게 되고 여러 개의 서버로 나누어 처리하게 될 수 있다. 이러한 프로그램을 여러개의 서버로 나누어 운영하는 경우에 각 ServerA, ServerB에 연결된 클라이언트 간 통신이 불가하는 문제점이 생기게 된다. Adapter는 이러한 경우를 대처하기 위해 두 서버를 연결하여 데이터를 전송하는 기능을 한다. 따라서 이러한 경우에 Adapter는..
-
[노마드코더] 줌 클론 코딩 - 5. 채팅방, 닉네임 만들기Dev/클론 코딩 2023. 2. 15. 02:06
socket io를 이용하여 채팅방을 만들고 사용자 이동시 알림, 닉네임 설정, 메시지 전달을 만든다. 채팅방 만들기 서로 소통할 수 있는 socket의 각 그룹을 만들어 채팅방을 만들 수 있다. 또한 socket.io를 활용한다면 쉽게 구현 가능하다. socket.join(채팅방이름); // Room 생성(들어가기) socket.onAny((event, ...args)) // socket내 발생한 이벤트에 console.log을 하기 위함 socket.leave(채팅방이름); // 해당 Room 나가기 socket.to(채팅방이름); // 해당 Room에 메시지 보내기 join() 메소드를 통해 정말 쉽게 방을 만들 수 있다. onAny() socket 내 발생한 이벤트를 캐치하는 역할을 한다. 미들웨..
-
[노마드코더] 줌 클론 코딩 - 4. socket.io 프레임워크Dev/클론 코딩 2023. 2. 13. 03:21
Socket IO 란? Socket.IO Reliable Rest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatically try to reconnect. socket.io socket.io를 활용하면 프론트와 백엔드 간 실시간, 양방향, 이벤트 기반 통신을 쉽게 구현 가능하다. socket.io는 프레임워크로 web socket 만을 활용하는 것보다 탄력적으로 해당 통신 기능을 구현할 수 있다. socket IO는 web socket의 부가기능이 아니다. web socket은 ..
-
[노마드코더] 줌 클론 코딩 - 3. 채팅 기능 완성하기Dev/클론 코딩 2023. 2. 13. 00:37
앞서, 서버와 클라이언트 간 WebSocket을 통해 연결되었다. 이번에는 웹 소켓 연결을 통해 메시지를 주고받는 채팅 기능을 구현한다. HTML 수정 (home.pug) - input, send button을 추가 이벤트 처리를 위한 app.js 수정 - home.pug의 ul 내부의 form들을 messageList, messageForm으로 받아온다. - send 버튼의 이벤트 리스너를 만들어 handleSubmit()을 통해 이벤트를 처리한다. - input값을 받아와 socket.send()를 통해 해당 값을 백엔드 서버로 전송한다. - 전송하고 나면 input 값을 지운다. 채팅 기능 구현하기 클라이언트로 부터 백엔드 서버에 보내진 값을, 백엔드 서버는 연결된 클라이언트에 모든 클라이언트로 전..
-
[노마드코더] 줌 클론 코딩 - 2. 웹 소켓Dev/클론 코딩 2023. 1. 5. 02:41
HTTP vs WebSockets HTTP는 유저와 서버 사이에 아무런 연결이 없이 오직 요청에 따른 응답만 한다. (stateless) WebSocket은 유저가 서버에 처음 연결 요청 후 서버의 허가 또는 거절한다. 허가되면, 연결이 성립(establish)된다. 양방향 연결된 상태 (bi-directional connection) 연결 중에는 브라우저-서버 간 실시간 통신이 가능하다. ws : Node.js WebSocket library을 이용한 WebSocket 연결 구현 express 서버에 ws 기능 설치 기존 express 서버는 http를 사용한다. 따라서 express에 ws를 사용하기 위해서 다음과 같이 server.js를 수정한다. import http from "http"; // ..