프로그래밍/Portfolio Log30 [Portfolio Log] WebRTC 기반 포폴 기록 10 (메타프루츠) 자잘한 이슈가 왜이리 많이 나오는지. 기어코 주말을 반납하고 말았다. 주말에는 좀 쉬어야 하는데 또 개발만 해버렸구나. 이제 정말 이 프로젝트를 마무리 지으면 좋겠다. 이번에 추가한 작업은 마이크/카메라 상태에 따른 UI 갱신과 트랙 변경 오류이다. replaceTrack을 처리하는 부분에서 약간의 딜레이를 주지 않으면 정상적으로 동작하지 않는 이슈가 있었다. 또한 자신의 트랙을 바꾸는 상황에서 음성 인식 리스너를 날리고 다시 처리해줬다. 스트림을 받는 쪽에서는 바꾼 트랙을 기준으로 음성 인식 처리를 잘하더라. 배경음악을 추가하고, 포탈, 버튼 클릭시 효과음이 나오도록 추가했다. 아마존 프리티어를 활용하여 1GB짜리 램을 가진 EC2에 배포를 해봤다. 생각보다 잘 돌아가더라. Putty 사용법 및 EC2.. 2023. 10. 16. [Portfolio Log] WebRTC 기반 포폴 기록 9 (메타프루츠) 미디어 수프 멀티 연동 작업을 진행했다. 룸 입장시 영상을 추가하고 퇴장시 영상을 삭제하도록 처리한다. 원래 비디오 트랙만 가져다가 개발하고 있었는데, 나중에 오디오 트랙도 추가하니까 produce 이벤트가 2번 오면서 뷰가 2개씩 생성되는 이슈가 있었다. 중간에 socketId 값을 넘겨서 socket 단위로 뷰를 생성하는 코드를 작성했다. 방 퇴장 시에도 자신이 가진 consumers 정보를 삭제하지 않는 이슈가 있어 수정했다. 앞으로 남은 작업 - 마이크/카메라 상태에 따른 UI 갱신 - 트랙 변경 오류 수정 2023. 10. 14. [Portfolio Log] WebRTC 기반 포폴 기록 8 (가제: 메타프루츠) 1. 포트폴리오 가제 설정 'meta'와 'fruits'의 합성어인 메타프루츠가 될 것 같다. 2. 웹팩 적용 Mediasoup 설치에서 웹팩이나 browserify를 쓰라는 이야기가 있어서 웹팩을 적용했다. 처음 해보는 거라 서버 파일 실행 안 시키고 클라js 파일로 돌리고 있고... Dom Element 접근 안 되는 이슈가 있기는 했는데 결국 고치긴 했다. (footer에서 index.js 참조) https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event 윈도우의 onload를 사용하는 방법도 있다. 3. 코드 분리 과정 기존 index.js에 모여 있던 Socket 코드, UI 코드를 분리하는 과정을 거쳤다. 이 과정에서 잘 모르고 있던.. 2023. 10. 11. [Portfolio Log] WebRTC 기반 포폴 기록 7 1. 포탈 동기화 로직 추가 이전에 있었던 장면에서 플레이어를 없애라는 요청을 다른 플레이어에게 보내고 자신은 새로운 정보를 받는다. 그리고 넘어가는 장면에 존재하던 플레이어에게 새로운 유저 정보를 넘겨주면 된다. 기존에 broadcast로 처리하고 있던 부분을 room 개념을 추가하여 작업했다. 2. 이름 변경 및 캐릭터 변경 로그(채팅) 삭제 설계적으로 특이점을 하나 발견했다. 예를 들어 전체 채팅방에 A라는 유저가 캐릭터를 바꿨다는 로그가 계속 뜨는게 맞는건가? 다른 맵에 있는 사람도 그 정보를 받아서 뭔지도 모르는 A라는 유저가 캐릭터를 변경했다는 정보를 받아야 하는가? 다른 사람이 궁금한 정보인가? ㄴㄴ 다른 사람이 알아야 하는 핵심적인 정보인가? ㄴㄴ 다른 맵에 있는 사람이 누군가 캐릭터 설정.. 2023. 10. 8. [Portfolio Log] WebRTC 기반 포폴 기록 6 플레이어 이동, 애니메이션, 좌우 Flip 처리 적용 토스트 메시지, 채팅, 캐릭터 변경 동기화 적용 내일 작업은 장면 전환시 룸 내부에 존재하는 플레이어의 정보를 처리하는 로직 미디어 수프 연동 작업, 마이크/카메라 ON/OFF 처리, 장치 설정 다이얼로그... 2023. 10. 8. [Portfolio Log] WebRTC 기반 포폴 기록 5 플레이어의 영상을 출력할 video뷰와 장치설정 Dialog를 작업했다. div 내부에 비디오 태그로 처리되어 있다. 카메라, 마이크 상태는 텍스트를 활용하여 표시할 것이다. 장치설정은 메뉴를 클릭하여 자신이 원하는 장치를 선택하도록 할 것이다. 마이크 테스트 버튼을 누르면 테스트를 진행할 수 있다. 내일은 멀티플레이 기능을 작업하려고 한다. 이번 주말 내로 개발이 마무리 되었으면 참 좋겠다. 2023. 10. 7. [Portfolio Log] WebRTC 기반 포폴 기록 4 오늘은 캐릭터 변경 기능, 닉네임 변경, 마이크/카메라 버튼 처리를 추가했다. HTML에서 Dialog 태그도 처음 써봤는데 그냥 적당히 괜찮은 것 같다. HTML, CSS, JS로 개발을 하니까 dom에서 요소를 찾아와서 처리하는데, 안드로이드의 findViewById가 생각이 나더라. 내일은 장치 설정 UI와 영상 UI를 개발할 것이다. 그 이후에는 멀티플레이 기능을 추가하면 되겠지. 끝. 2023. 10. 5. [Portfolio Log] WebRTC 기반 포폴 기록 3 오늘은 채팅 UI를 작업했다. 간단하게 닫는 버튼과 좌측 하단에 열기 버튼을 두었다. 기존에는 메시지 처리만 있었는데 다른 작품을 참고하다보니 하나씩 늘어났다. https://github.com/kevinshen56714/SkyOffice?ref=reactjsexample.com 내가 만들길 원하는 작품과 매우 유사한 형태인데, 이쪽에서 입력한 메시지에 따라 Toast를 출력해주길래 나도 추가했다. 다음으로 하단 컨트롤러를 추가했는데, CSS쪽에 position 속성을 사용하여 개발하니까 금방 하더라. 참고로 아이콘을 추가한 것이 아니라 그냥 이모지를 출력해서 버튼처럼 사용하고 있다. 왼쪽에 사과 버튼을 눌러서 캐릭터(과일 친구들) 변경이 가능하도록 할 거고, 마이크/카메라는 on/off, 설정은 따로 .. 2023. 10. 4. [Portfolio Log] WebRTC 기반 포폴 기록 2 타일맵 충돌체, z-index 수정, 카메라 추가, 장면 전환 작업을 추가했다. 워낙 Phaser 자체가 쉽게 잘 되어 있어서 개발하는데 크게 막히는 부분은 없는 듯 하다. 어떤 기능이 필요한데 싶으면 이미 함수로 지원을 해주고 있어서 가져다가 쓰면 된다. 1~3번까지 1일이면 된다고 생각했는데, 실제로는 matter plugin에서 오브젝트를 생성하여 충돌 처리를 하는 부분이나 장면 전환 부분에서 생각보다 시간을 많이 썼다. 맵 찍는 것도 꽤 걸렸고... 1. 타일맵 충돌체 개선 2. 타일맵 z-index 값 조정 3. 집 내부에 들어갔을 때 사용할 Scene 구현(문 오브젝트랑 상호작용) 다음은 멀티플레이 관련 기능들을 작업할 예정이다. 채팅 UI, 캐릭터 선택 UI, 소켓 처리 등을 작업하지 않을까.. 2023. 10. 3. [Portfolio Log] WebRTC 기반 포폴 기록 1 최근에 미디어수프를 이용하여 1:N 화상통화까지 구현했고 디테일한 부분(장치 설정, 하단 컨트롤러)은 나중에 작업하려고 한다. 테스트가 필요한 부분까지는 충분히 작업했다고 본다. 다음으로 Phaser를 이용하여 Tilemap 기반의 게임을 개발하는 부분을 작업하고 있다. 순수 javascript 기반으로 게임을 개발하지 않는 이유는 다음과 같다. 1. 게임 프레임워크를 개발하는 시간이 들지 않는다. 게임 하나를 만드는 과정에서 사용자의 입력, 애니메이션 처리, 충돌, 렌더링 같은 다양하게 신경써야 할 요소들이 한 두 가지가 아니다. 근데 이미 만들어둔 게임 프레임워크가 있다면, 빠른 개발을 위해서 충분히 쓸만 하다고 판단했다. 2. 내 기준에서 게임 프레임워크 구현이 포트폴리오의 가치가 있는가? 게임 프.. 2023. 9. 28. 이전 1 2 3 다음
