Eyeve Project

이번 프로젝트의 핵심인 WebRTC이다. 메인 기능이 화상 강의, 채팅이기 때문에 필수로 알아야하지만 처음 들어보고 접해보아서 여러번 찾아 보았지만 아직 개념이 확실하지 않다. 정리해두고 프로젝트 동안 계속해서 보자.간단히 말하면 별도의 설치나 플러그인 없이 실시간 소

이번 프로젝트가 줌과 비슷한 웹 어플리케이션을 만드는 프로젝트이다보니, WebSocket, WebRTC에 대한 지식이 필요하게 되었다. 스프링에선 WebSocket을 어떻게 구현하는지 찾아 보던 중, 정말 구현을 잘해 놓은 글을 보게 되었고 해당 코드를 따라 치며 이해

사실 회원가입/로그인은 4~5개월 전에 완성했지만 개강하고 학업이 바쁘고 하다보니 정리할 시간이 없었다... 그래서 종강 한 지금이라도 작성해본다..모든 코드는 직접 작성하려고 노력해서 깔끔한 코드가 아닐 수도 있다. 혹시 더 깔끔하고 효율적인 방식이 있다면 댓글로 작

React와 Spring boot를 합치는 과정에서 CORS 문제가 발생했고, 이를 아래처럼 메서드를 추가하여 해결했었다.하지만 세션 쪽에서 알 수 없는 CORS 문제가 발생 했었고, 한동안 어떤것이 문제인지 알 수 없어 방황 했었다. CORS 개념에서 이에 대한 해결

개발 로직을 작성하면서 조금 복잡 했던 것 중 하나가 방 관리 로직이다. 방 관리 로직은 정리하면 아래와 같다.여러개의 방이 존재한다.방에는 여러명의 사람들이 존재한다.한 사람은 다음과 같은 객체들을 가진다.User 엔티티WebSocket 객체WebRtcEndpoint

우선적으로 WebRTC 시그널링은 WebSocket으로 이루어진다. WebSocket으로 Json 형태의 메세지를 실시간으로 보내고 Json에 messageType이라는 Key 값을 통해 메세지를 구별해 messageType에 맞는 로직들을 처리하면 된다.따라서 방 참

이번에는 핵심인 방 생성/참가 및 WebRTC 시그널링을 서술해보려고 한다. 요구사항에서 최대 7명 정도의 인원이 N:M(다대다) 화상 회의를 진행해야 했으므로 여러 고민들이 많았다. 대표적인 방식인 P2P 방식은 소수의 인원이나 1대1 정도의 화상회의에만 적합해서 필

오늘은 화면 공유에 대해서 포스팅 하려고 한다. 줌이나 디스코드 등은 화면 공유를 할 시, 자신의 캠 화면이 화면 공유로 대체 된다. 하지만 Eyeve 프로젝트의 화면 공유는 화면 대체가 아닌 자신의 얼굴 화면과 공유 화면이 둘다 송출 되어야 했기 때문에 일반적인 로직

이번에는 시선 추적 데이터 처리에 대해 작성해 보려고 한다. 시선 추적은 기본적으로 프론트엔드 측에서 처리하고 서버 쪽에 데이터를 보낸다. 서버 쪽에서는 받은 데이터를 가공하여 대시보드 형태로 시각화 할 수 있게 알맞게 데이터를 보내면 된다.데이터 형식에 대한 논의와

이번에는 마지막으로 이모지, 피드백, 채팅 기록을 처리하는 방법에 대해 작성하려고 한다. 사실 이모지, 피드백, 채팅은 시선 추적보단 단순하다.우선적으로 다른 것들도 마찬 가지지만 이모지는 한명이 이모지를 누르면 다른 방에 있는 사람 전부에게 뿌려줘야 한다. 이 부분은