인지선별검사 배포 시 SharedArrayBuffer is not defined 에러 - Githubissues

salmonco / Brain-Vitamin-Frontend-Patient

Brain Vitamin: Mobile app-based home care service for mild cognitive impairment

0 stars 0 forks source link

인지선별검사 배포 시 SharedArrayBuffer is not defined 에러 #26

Closed salmonco closed 11 months ago

salmonco commented 1 year ago

ffmpeg를 활용할 때, 로컬에서는 정상적으로 작동하는데, 배포시에는 SharedArrayBuffer가 정의되지 않는다는 에러 발생

salmonco commented 1 year ago

배포 환경에서도 음성 파일을 제대로 저장하기

프론트에서 음성 파일 webm -> mp3 변환을 위해 ffmpeg 라이브러리 사용
ffmpeg는 SharedArrayBuffer 사용
SharedArrayBuffer는 교차 출처가 격리된 페이지(cross-origin isolation)에서만 사용 가능
교차 출처 격리를 위해 서버 헤더에 Cross-Origin-Embedder-Policy과 Cross-Origin-Opener-Policy를 추가해야 함 -> cloudFront에서 커스텀 응답 헤더 설정으로 가능
Cross-Origin-Opener-Policy 헤더는 origin의 url이 untrustworthy (http)하면 무시됨 -> 따라서 프론트 url을 https로 바꿔야 함
https -> http 로의 요청을 보안 이슈로 인해 막혀 있음 -> 서버도 https로 변경해야 함

이에, 프론트단에서 AWS S3에 올린 정적 컨텐츠를 CloudFront CDN에 태워줌으로써

http -> https로 바꾸고
cross-origin isolation 커스텀 응답 헤더 설정했음

salmonco commented 11 months ago

파일을 다루는 대신, 스트리밍을 다뤄서 바로 음성을 인식하여 텍스트로 변환하도록 수정
ffmpeg 대신 web speech api 사용