(Spring Boot Web Chatting) ChatForYou - 마이크/스피커 장비 선택 기능 개발 & 나만의 캐치마인드 게임 개발 시작

1. 시작하면서

벌써 24년의 1월이 지나가고 있네요ㅠㅠ 정말 한게 없는데 이렇게 빨리 지나는걸 보면 새삼 뭔가 잘못되었다고 느껴져요ㅋㅋㅋ

또 한편으로는 분명 다같이 똑같은 24시간을 살아가고 있는데 어떤 사람은 일도하고 플젝도하고 공부도하고 한다는 걸 들으면 '이야 저런 사람이 정말 성공하는 사람이구나' 라는 것도 느껴지고 말이죠.

1월에는 제 사이트를 (강제로)애용 하는 친구들이 계속 이야기했던 마이크/스피커 장비 선택 기능을 추가했습니다. 사실 항상 모여서 게임하는 친구들이 있는데 저 기능이 부족해서 4명이 모두 모일때는 결국 디코에서 해서 굉장히 아쉬운 마음이 있었습니다ㅠㅠ "꼭 내가 만든 것에 모여서 다 같이 게임한다" 라는 목표로 어찌어찌 기능을 넣을 수 있었고, 저번주 토욜에 기능 테스트도 완료했습니다.

동시에 UI 도 좀 더 깔끔하게 개선했습니다. 마이크/스피커 선택이 들어가면서 전체적인 UI 를 조절했고, 나름 버튼 대신 아이콘으로 좀 더 깔끔하게 시각화했습니다.

마지막으로 드디어 나만의 캐치마인드 개발을 시작했습니다. 이제부터 정말 본격적인 개발이 될 것 같아요. 이것까지만 개발하고 나면 제가 처음에 목표로 했던 1차 개발이 완전히 끝날 것이라고 생각됩니다. 이 담은 회원가입이랑 이것저것이 들어갈 예정이구요.

물론 중간중간에 이거 재미있어 보이는데?? 하면 그것부터 들어갈꺼라...ㅋㅋㅋㅋ

2. 마이크/스피커 장비 선택 기능 개발

마이크/스피커 장비 선택 추가! UI 개선!

드디어 마이크와 스피커 장비 선택 기능이 추가되었습니다. 사실 장비 선택하는 것에 대한 좋은 자료가 있어서 해당 부분을 많이 참고했습니다. 특히 저 선택하는 UI 를 너무 잘 만드신 분이 계서서 그분의 코드를 많이 많이 참고했습니다.

사실 이전에 화상 채팅 시 화면 공유하는 기능을 했었기 때문에 그와 비슷한 장비 선택이 코드상 많이 어려운 것은 아니었습니다. 코드를 보자마자 느낀건데 궤가 많이 비슷하다고 느꼈거든요.

먼저 스피커의 경우 stream 을 변경하고 하는 것이 아니라 audio.srcObject 의 sinkId 쪽 deviceId 만 바꾸면 되다보니 크게 어려운 부분은 없었던 것 같습니다.

두번째로 입력 장비 부분은 출력 장비와는 다르게 내가 상대에게 보내는 입력 audio stream 을 변경하는 부분을 개발해야했습니다. 이전에 화면 공유를 처리하면서 했던 것처럼 이번에는 선택된 새로운 장비로 audio stream 을 새로 만들어서 peerConnection 의 sender 쪽의 audioTrack 을 변경하는 쪽으로 개발했습니다.

사실 가장 어려웠던 부분은 오히려 장비를 가져오는 이벤트의 시점이었습니다. 너무 이른 시점에 장비를 가져오면 어떤 장비도 가져올 수 없었고, 너무 늦게 가져오면 장비를 가져오고 선택하는 부분에서 에러가 발생하더라구요. 결국 '타이밍' 을 어떻게 조절할까하다가 자신의 화면을 peerConnection 을 통해서 Offer 를 보낸 후 장비 목록을 가져와서 세팅하는 방법을 선택했습니다.

 

코드적인 부분은 다음 포스팅에 적도록 하겠습니다. 최근에는 재미있는 게임도 많고 넣고 싶은 기능도 점점 많아지고해서 조금 더 정리하고 쓰고싶어서요ㅋㅋㅋ

3. 나만의 캐치마인드!

사실 지금까지 개발하는 동안 이게 정말 될까? 라는 마음이었어요. 솔직히 한편으로는 결국 이거 못하겠네 라는 생각도 들었구요. 하지만 결국, 돌고 돌아서 겨우 시작점에 도착했습니다. 진짜 정말 감격스러워요.

물론 이번에 개발한 것은 정말정말 간단한 초안입니다. 아주 단순히 canvas 에 그림을 그리고 그것을 다른 사람의 화면에도 똑같이 그려주는 정도입니다. 그래도 사실 이게 캐치마인드의 기본 중 기본이기 때문에 개발을 위한 베이스를 만들어졌다고 생각됩니다.

캐치마인드의 기본!!

물론 아직 할 것들은 많습니다. 게임 시작 이벤트와 종료 이벤트,  점수 계산, 그림을 그리기 위한 주제 선정, 그림 그리는 동안 다른 사용자의 lock 등 정말 많습니다만, 그래도 지금까지도 쉬운 것들은 아니었기에 끝까지 가보겠습니다!

 

Reference

- MediaDevices 공식 문서

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/enumerateDevices

MediaDevices.enumerateDevices() - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

HTMLMediaElement: setSinkId() method - Web APIs | MDN

 

- 장비 변경 코드 및 css 참고

https://velog.io/@071yoon/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EC%98%A4%EB%94%94%EC%98%A4-%EC%9E%85%EC%B6%9C%EB%A0%A5-%EC%A0%9C%EC%96%B4%ED%95%98%EA%B8%B0

브라우저에서 오디오 입출력 제어하기

 

- MediaStream 에서의 Track 교체

https://stackoverflow.com/questions/39744329/webrtc-how-to-identify-the-source-ids-device-ids-for-a-mediastreamtracks

WebRTC - How to identify the source IDs (device IDs) for a MediaStream(Tracks)