줌클론코딩 검색 결과
10 개의 검색 결과가 있습니다.
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 9. 자잘한 오류 수정하기! (完)

이전 포스팅에서 막판에 발생한 오류들이 있었죠? 이번 포스팅에서는 그 오류들을 고쳐서 보다 완벽한 통신이 이루어지도록 만들어보겠습니다!! ※ 본 내용은 노마드코더 줌 클론코딩의 3.8~3.11 까지의 수업 내용을 담고 있습니다! 목차 0. Sender 내가 카메라를 바꿀 때 다른 브라우저에서도 그 내용이 반영이 되어야 한다고 말했었죠? 하지만 저번 포스팅까지의 내용에서는 그 부분이 반영이 되지 않았습니다. 이걸 바꾸기 위해서는 handleCameraChange부분을 다시 수정할 필요가 있습니다! 우리가 카메라를 바꾸게 되면, getMedia 함수를 통해 새로운 stream을 만들게 됩니다. 그 stream의 변경사항을 peer에게도 전달해야 카메라가 바뀌었다는 사실이 peer의 화면에서도 적용이 되겠죠?..

2021. 11. 1. 03:27
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 8. 사용자간 연결 완성하기!

이전 포스팅에서 연결의 맛보기를 보여줬다면, 이번 포스팅에서는 Peer-to-Peer 통신을 좀 더 맛깔나게 구현해보도록 하겠습니다! ※ 본 내용은 노마드코더 줌 클론코딩의 3.6~3.7 까지의 수업 내용을 담고 있습니다! 목차 0. answer 전송하기 본 내용은 이전 포스팅의 offer 전송하기와 연결됩니다! (너무 길어서 잘랐어요 ㅠ) 다시 다이어그램을 보겠습니다. 이전 포스팅에서 이미 방에 접속한 브라우저가 새로 접속한 브라우저에 offer를 날리는 부분까지 구현했었죠? 그렇다면 이제 새로 접속한 브라우저에서 offer를 처리하는 부분을 구현해야 합니다! 새롭게 접속한 브라우저에서 offer를 받으면, 그 offer는 Local이 아닌 Remote에 위치해야 합니다. 그렇기 때문에 offer는 m..

2021. 11. 1. 01:53
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 7. Welcome, WebRTC!

이전 포스팅에서 Zoom의 핵심 기능인 영상 및 음성 스트림 기능을 구현해보았습니다. 그렇다면 이제 서로간의 통신을 해봐야겠죠? ※ 본 내용은 노마드코더 줌 클론코딩의 3.3~3.5 까지의 수업 내용을 담고 있습니다! 목차 0. WebRTC 먼저 좋은 레퍼런스가 존재하기 때문에, 이 글을 읽기 전에 참조하시면 좋습니다. (반드시 읽어야 하는 것은 아닙니다 ㅋㅋㅋㅋ) WebRTC API - Web API | MDN WebRTC(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 developer.mozilla.org WebRTC An open fram..

2021. 11. 1. 00:29
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 6. 캠 영상과 음성을 사용해보자!

이전 내용을 통해 채팅 시스템을 구현하는 것에 대해 알아보았습니다. 이번에는 Zoom의 핵심 기능인 영상 및 음성 스트림 기능을 구현해보도록 하겠습니다! ※ 본 내용은 줌 클론코딩의 3.0~3.2 까지의 수업 내용을 담고 있습니다! 목차 0. 사용자로부터 영상받아 띄우기 시작하기 전에 채팅에 대한 내용을 싹 다 지우고 새롭게 시작합니다. // server.js import http from "http"; // 이미 기본 설치되어있음 import WebSocket from "ws"; // 기본설치! import express from "express"; // npm i express 설치 import { instrument } from "@socket.io/admin-ui"; import { Server ..

2021. 10. 31. 04:20
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 5. 방 이름과 유저 수를 띄워보자!

이번 챕터에서는 서버에 접근하면 개설된 방 이름을 띄울 수 있게 하고, 각 방에 접속했을 때 현재 방에 있는 사람의 수를 나타내는 부분을 구현해 보도록 하겠습니다. ※ 본 내용은 줌 클론코딩의 2.8~2.11 까지의 수업 내용을 담고 있습니다! 목차 0. 방 이름 띄우기 방 이름을 띄우기 전에 Socket.io의 adapter이라는 기능에 대해 알고 넘어갈 필요가 있습니다. 우리가 만드는 채팅 서버는 하나의 서버에서 돌아가지만, 사이즈가 커지게 되는 경우 하나의 서버로 돌리지 못하는 경우가 생길 수 있습니다. 이런 경우에는 특정 소켓은 A서버에서, 다른 소켓은 B 서버에서 돌리는 경우가 생길 수 있는데, 이렇게 되면 Server A에 연결된 클라이언트는 Server B에 연결된 클라이언트와 소통을 할 수..

2021. 10. 4. 05:19
# 학습 내용 정리/Zoom CloneCoding(JS)

[Zoom 클론코딩] 4. 방과 닉네임을 만들어보자!

이번 챕터에서는 socket.io를 이용해서 특정 채팅방 안에서 사용자가 왔다갔다 할 때마다 알림이 뜨고, 닉네임을 설정하고 메시지를 전달할 수 있도록 만들어보도록 하겠습니다! ※ 본 내용은 줌 클론코딩의 2.4~2.7 까지의 수업 내용을 담고 있습니다! 목차 0. 방 만들기 앞에서 방을 만들기 위한 다양한 준비를 했었는데요, socket.io를 이용하면 정말 쉽고 간단하게 방을 만들 수 있습니다!! 0.0. server.js 위 코드를 보시면, join 메서드 단 하나만으로 쉽게 방을 만든 모습을 보실 수 있습니다. ("welcome" 뭐시기 하는 부분은 아래에서 더 자세히 확인하실 수 있습니다!) 그 외에도 이번 단계에서 새롭게 사용한 socket.io 코드들을 차근차근 살펴보면 아래와 같습니다. j..

2021. 9. 13. 01:43