[나만무] mediapipe 에러 해결

https://github.com/google/mediapipe/issues/3796

TypeError: hands.Hands is not a constructor · Issue #3796 · google/mediapipe

https://github.com/google/mediapipe/issues/3949

TypeError: holistic.Holistic is not a constructor on tauri · Issue #3949 · google/mediapipe

 

npm run dev로 dev 모드에서는 import {Hands} from "@mediapipe/hands"해도 전혀 문제가 없었는데, 이상하게 npm run build로 프로덕션으로 빌드한 후에는 "Hands is not a constructor" 에러가 발생한다. Google mediapipe 공식 레포의 이슈를 살펴보니 여러 사람들에게서 발생한 문제였고, 현재는 @mediapipe/hands 말고 @mediapipe/tasks-vision 라이브러리의 사용을 권장하더라.

 

그러나 @mediapipe/tasks-vision도 문제가 많았는데.. 설치를 했는데도 리액트에서 tasks-vision을 모듈로서 인식을 못했다. 작동은 되는데 모듈 인식을 못한다.. 더 큰 문제는 tasks-vision이 출시된 지 얼마 안된 라이브러리이다 보니 관련 자료나 사용 예제가 거의 없어서 어떻게 사용해야 할지도 모르겠다는 것이다.

 

Solution

npm 말고 cdn으로 import하니까 잘 작동했다는 사람의 후기를 보고 적용해보았다. 전역 변수 window를 설정하는 것이 머리 아팠지만 결국 성공적으로 문제를 해결했다.

 

다음 코드를 index.html의 헤드에 삽입한다.