인공지능 기반 카메라 감지 프로젝트: 백그라운드 동작 이슈 해결기

현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.

이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다.

하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.

---

문제 상황 1: requestAnimationFrame의 한계

 

💡 추론

브라우저 탭이 백그라운드로 전환되면 requestAnimationFrame이 멈출 것 같다.

 

실제로 다음과 같이 작성한 코드에서 문제가 발생했다:

window.requestAnimationFrame(() => this.predictWebcam());

 

공식 문서에 따르면:

"requestAnimationFrame()은 배터리 수명과 성능 향상을 위해 대부분의 브라우저에서 백그라운드 탭이나 숨겨진 iframe에서는 실행이 중단된다."

🔗 MDN 문서 - requestAnimationFrame

따라서 백그라운드 상태에선 해당 코드가 동작하지 않는 것이 맞았다.

 

🔄 대안: setTimeout 사용

Cursor AI는 setTimeout 사용을 제안했지만, 실제로 적용해보니 깜빡임 분석은 진행되지만 정확도가 급격히 떨어지는 현상이 발생했다.

---

문제 상황 2: 백그라운드에서 자원 할당 감소

 

💡 추론

백그라운드에선 웹 자원 할당량이 줄어들어 setTimeout도 느려질 것이다.

 

이를 검증하기 위해 performance.now()를 이용해 함수 호출 간격을 측정했다.

실제로 백그라운드 진입 시, 간격이 현저히 느려지는 현상이 확인되었다.

 

 

공식 문서에 따르면:

"Firefox와 Chrome 모두 비활성 탭에는 최소 1초의 지연 시간을 강제한다."

🔗 MDN 문서 - setTimeout

---

해결책: Web Worker 도입

 

✅ Web Worker란?

• 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술

이번 프로젝트에서는 DedicatedWorkerGlobalScope를 사용했고, DOM 조작이 필요 없었기 때문에 적절했다.

 

❗️문제 발생

Web Worker는 window/document에 접근할 수 없기 때문에, 카메라 비디오 데이터를 worker에게 반복적으로 보내야 하는 구조가 필요했다.

하지만 여기서 다시 requestAnimationFrame 또는 setTimeout을 사용해야 했고, 이 방식은 탭 비활성화 시 다시 동작하지 않는 문제로 이어졌다.

---

새로운 아이디어: Worker 주도 방식으로 전환

 

💡 최종 추론

1. Worker에서 카메라 정보를 요청하고
2. 메인 스레드가 해당 정보를 전달하며
3. Worker는 분석을 수행하고
4. 분석 결과를 메인 스레드로 전달하면
5. 메인 스레드는 이 결과를 사용자에게 전달한다.

 

✅ 결과

이 구조를 구현한 뒤, 브라우저가 백그라운드 상태여도 안정적으로 감지 및 분석이 동작함을 확인함.

물론, Worker에서도 다른 시스템의 자원이 할당이 많이 되는 경우, 카메라 정보 요청이 느려질 수 있다.

---

🧾 결론

• 브라우저 탭이 비활성화되면 requestAnimationFrame과 setTimeout은 제한된다.
• Web Worker는 백그라운드에서도 연산이 가능하지만, 카메라 데이터 전달은 메인에서 수행해야 한다.
• Worker가 주도하는 데이터 요청 및 분석 구조로 변경함으로써 문제를 해결했다.
• 현재 시스템은 백그라운드에서도 문제없이 동작 중이다.