[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 코드를 분리하는 과정을 거쳤다. 

 

이 과정에서 잘 모르고 있던 '호이스팅', 'TDZ'의 개념을 알게 되었다. 

https://developer.mozilla.org/ko/docs/Glossary/Hoisting
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
https://ui.toast.com/weekly-pick/ko_20191014

 

4. 화면 전환 애니메이션 추가

화면 전환시 깜빡이는 문제가 있어, Fade 효과를 추가했다. 그래도 깜빡여서 확인해보니 배경색이 달라서 그런 거더라. 

 

https://blog.ourcade.co/posts/2020/phaser-3-fade-out-scene-transition/

 

5. 카메라, 마이크, 스피커 변경 코드 추가

기존에 개발해뒀던 UI 코드와 MediaStream을 연결했다. 카메라, 마이크, 스피커를 변경할 수 있다. 

 

카메라, 마이크는 비슷한 인터페이스(getVideoTrack, getAudioTrack)을 가지고 있는데 스피커는 좀 다르다. 

 

변경 예제 참고(스피커)
https://github.com/webrtc/samples/blob/gh-pages/src/content/devices/input-output/js/main.js
https://webrtc.github.io/samples/src/content/devices/input-output/

 

6. 마이크 테스트 추가

어떤 갓갓 개발자가 미리 개발해놓은 코드를 공유해서 쉽게 추가했다. 

영상셀에서 음성을 인식하여 border 처리를 하는데 사용했다. 

 

변경 예제 참고(마이크 테스트)

https://stackoverflow.com/questions/33322681/checking-microphone-volume-in-javascript

---

내일은 미디어 스프 멀티 작업을 진행할 예정이다. 소스는 있는데 또 연동할 생각을 하니 약간 막막하긴 하다.

근데 또 지금까지 잘 만들었으니 큰 문제는 없을 거라 생각하지만.. ㅎㅎ;;

 

 미디어 수프 멀티 연동 작업
 - 룸에 입장시 영상뷰 활성화
 - 마이크 on/off 처리 적용(타 유저에게 보여지는 부분)
 - 방 퇴장시 연결 끊기