AI-WebRTC 동시 성능 테스트 환경 구축"
AI-WebRTC 동시 모니터링 환경 구축 & 트러블슈팅
- 핵심 문제 해결: 단일 웹캠 쟁탈전 (AI vs WebRTC) 상황: 로컬 개발 환경에서 WebRTC(프론트)와 AI(파이썬)가 하나의 물리 웹캠에 동시에 접근하려고 하여, 한 쪽이 반드시 죽는 문제 발생. 해결법: 가상 카메라 (Virtual Camera) 전략
Frontend: 실제 카메라 권한을 요청하지 않고, HTML Canvas에 “AI Testing Mode”라는 텍스트와 시계가 돌아가는 애니메이션을 그려서 MediaStream으로 변환해 송출. 기술: canvas.captureStream(30), Room.localParticipant.publishTrack() AI: Frontend가 카메라를 놔줬으므로, 물리 웹캠(cv2.VideoCapture(0))을 독점 사용하여 얼굴 데이터 분석 가능. 결과: 컴퓨터 한 대로 화상 통화 기능과 AI 분석 기능을 동시에 테스트하는 쾌적한 환경 구축 성공.
- Backend 연동: 토큰 발급의 이원화 (Dual Strategy) 상황: 개발 중 백엔드 서버가 꺼져있을 때도 프론트엔드 UI/WebRTC 테스트는 가능해야 함. 해결법: 우선순위 기반 토큰 확보
Try Backend: /api/sessions/enter/{roomId}로 API 요청을 보내 실제 JWT 토큰 획득 시도. Fallback to Local: 실패(서버 꺼짐, 500 에러 등) 시, 프론트엔드 내부의 LocalTokenGenerator가 개발용 더미 토큰을 즉석에서 생성. -> 효과: “백엔드 개발 중”에도 프론트엔드/AI 팀은 멈추지 않고 개발 가능.
- Git & Build 대환장 파티 수습기 🛠️ (1) node_modules 감옥 탈출 문제: 프로젝트 최상위에
.gitignore 가 없어서, FE/node_modules 내 라이브러리 파일 수만 개가 Git 스테이징에 잡혀 경고 폭탄 발생. 해결: 최상위 루트에 .gitignore 생성 (node_modules, .env 제외). git rm -r –cached . 명령어로 이미 잘못 잡힌 인덱스(장바구니)를 싹 비우고 다시 담음. (2) 백엔드 코드 강제 병합 (-X theirs) 문제: 내 로컬 코드가 오래되어 로그인 등 기능이 안 됨. 백엔드 최신 코드를 받고 싶은데 충돌이 무서움. 해결: git pull origin fe -X theirs “충돌 나면 무조건 저쪽(Remote) 코드가 맞아!” 라고 선언하며 병합. WebRTC 관련 로직(RoomManager.ts)만 git checkout –ours로 살려서, 최신 백엔드 + 내 프론트 기능을 합침. (3) Lombok이 쏘아올린 MAX_USER 문제: 백엔드 빌드(bootRun) 시 Cannot find symbol log, builder() 등 에러 100개 발생. 원인: StudySessionService.java에 MAX_USER 상수가 두 번 선언되는 문법 오류가 있었음. -> 컴파일러가 파싱하다 죽어서 Lombok 어노테이션 처리도 덩달아 실패. 해결: 중복 변수 삭제 -> clean build -> 정상 작동.
- 최종 로컬 실행 워크플로우 하나의 프로젝트 폴더에서 터미널 3개로 “AI 화상 스터디 플랫폼” 완전체 구동:
Backend: ./gradlew bootRun (8081 포트 서버) Frontend: pnpm dev (3032 포트 웹) AI: python run.py (웹캠 분석 & CSV 로그)