최종프로젝트

드디어 최종 프로젝트를 시작하게 됐고 사실 오늘은 하루종일 무엇을 할까에 대해서 고민하는 시간을 가졌다.화상회의를 통해서 회의를할 때 발표자료를 발표자가 일방적으로 제공하는대로 청취자는 이를 시청을 해야하다 보니 청취자는 본인이 원하는 발표자료를 따로 공유받지 않는 이

최종 프로젝트를 진행하면서 화상채팅을 사용하기 위해서 어떤 기술이 있을까 고민을 하던 중에 WebRTC라는 Peer to Peer 통신을 제공해주는 기술을 찾았다. 조금 어색하기도 하고 내용이 생소해서 사용하는데 애를 먹기는 했지만 전반적으로 내가 현재까지 이해한 내용

최종 프로젝트에서 화면을 공유하는 시스템을 만들기 위해서 WebRTC를 이용해서 P2P 통신을 도전했다.중간에 굉장히 핑퐁거리는 것이 많기 때문에 하면서 조금 많이 헷갈렸던 만큼 정리를 할려고 한다.일단, WebRTC의 PeerConnection을 할 수 있는 서버를

이번에는 여러 개의 화면을 동시에 공유할 수 있는 로직에 대해서 알아봤다.클라이언트 단에서 2개의 media stream 배열을 state로 관리를 한다.myVideos : MediaStream\[]otherVideos : MediaStream\[]해당 stream에

이제 멀티 화면까지는 공유를 완료했으니 여러 사용자들이 하나의 화면을 공유할 수 있는 로직을 작성해야 한다.이 부분에 대해서는 아직 제대로 구현을 하지 못한 상태라 나중에 추가적으로 수정을 할 것이다.

크게 4가지의 개념이 있다.workerrouterproducerconsumerworker는 하나의 cpu를 담당하여 백단에서 처리를 해주는 것을 의미하고 이 worker가 router를 만들고 router안에 producer와 consumer가 있다.각각의 transp

드디어... next-js와 mediasoup을 이용하여 화상회의를 구현할 수 있는 코드를 작성을 하였다.많이 돌고돌아 해결을 했는데 그 내용은 다음과 같다.코드가 굉장히 길고 핑퐁이 자주 일어나서 어떻게 설명해야 할지는 천천히 정리를 해나갈 생각이다...

최종 프로젝트 때 화상회의를 구현하기 위해서 mediasoup, nextjs, socketIO를 이용하여 화상회의를 구현을 완료하였다. 다른 팀원들에게 내 생각도 좀 정제해서 남길 겸 글로 세세하게 작성을 바로 시작해보겠다...mediasoup을 이용해서 n:m 화상회

이전글 : NextJS, Mediasoup, socketIO를 이용한 화상 회의 구현 1 (클라이언트 device, transport 세팅)버튼을 눌르면 media stream을 받아서 해당 media stream의 track의 값을 기준으로 produce메서드를 통해

이전 글에 이어서 한 클라이언트가 producer를 하면 다른 유저는 그 내용을 consume을 하기 위해서 producer가 새로 생겼다는 내용을 socket을 통해서 전달을 한다. 그럼 produce를 하지 않은 다른 클라이언트는 'new-producer'라는 이벤

mediasoup은 결국에 하나의 transport에 여러 proudcer를 넣을 수 있다. 그래서 하나의 화면을 공유하는 것이 아니라 여러 개의 화면을 공유할 수 있다.여러 개의 화면을 공유하기 위해서는 producer를 모을 수 있는 배열이 필요하고 mediasou

nextjs에서 제공하는 middleware를 사용하여 supabase의 인증 access token을 쿠키로 넘겨줘야 했는데 이 부분에서 굉장히 애를 많이 먹었다.결론적으로, 아래와 같은 내용들을 알게 됐다.middleware는 prefetch를 하게 되면 해당 페이

최종 프로젝트 중에서 설정 창 중 유저의 캠과 마이크 입력을 설정할 수 있는 설정창을 만들어야 했다. navigator.mediaDevices를 이용하여 사용할 수 있는 media device들에 대한 정보를 가져올 수 있다.그래서 그 정보들을 가져와서 사용자들에게 설

사용자가 총 4개까지의 화면을 공유할 수 있는데 현재 어떤 화면을 공유하고 있는지 대략적인 지표와 특정 비디오를 지울 수 있는 기능이 있다. 이를 css로 간단하게 표현을 했었는데 swiper 홈페이지에 카드 형식으로 돼있는 것이 있어서 저 기능을 쓰면 card eff

유저 테스트를 진행한 후에 많은 사람들이 화면 공유와 마이크 공유를 할 때 권한이 없어서 제대로 화상회의를 하지 못하는 점이 발견됐다.권한이 없는 것은 좋은데 권한을 요구한다는 아무런 메시지가 없어서 어떻게 권한을 요청해야하는지 유저들은 잘 몰랐다.코드를 찬찬히 살펴보

최종 프로젝트에서 metaverse에 들어가게 되면 비디오 화상 회의를 위해서 socket을 이용하여 서로 통신을 해야 한다. 그런데 이 부분에 있어서 랜더링 되는 문제로 예상을 하고 있는데 불필요한 socket들이 disconnect 되지 않은 상태로 쌓여 있는 현상

nextjs에서 next/font를 사용하여 자동으로 폰트를 최적화하고 외부 네트워크 요청을 없애 보안성과 성능을 향상시킬 수 있다.next/font는 빌트인 자동 셀프 호스팅 ( built-in automatic self-hosting)을 포함한다. 이 기능은 기본

최종 프로젝트 유저 피드백을 진행하면서 발생했던 문제점 중에 하나가 중복 접속으로 인해 메타버스 내에서 이미 들어온 유저가 한명 더 등장하고 그 유저가 나갔음에도 불구하고 해당 유저가 나가지 않은 것처럼 처리되서 지속적으로 참여한 것으로 나오는 문제가 발생했다.이 문제