REACT

[Node.js] 모바일에서만 영상 깨지는 이슈 파악 및 해결

user-anonymous 2025. 3. 2. 16:51
728x90

Node.js로 구성된 환경에서 나는 영상을 가져오는 기능을 담당하는 api를 개발했다.
정말 그냥 http://localhost/file/test.mp4하면 아래처럼 영상을 보여주는 api다.. 

근데 정말 신기하게 모니터에선 잘 나오는데 꼭 모바일에서만 해당 같은 url을 열면 깨진 영상이 나왔다 (00:00~00:00)으로 아예 영상을 못불러왔다. 대체 왜그럴까? 

왜 데스크톱에선 잘 불러오는데? 왜 모바일에서만???!!? 

정말 이런 생각으로 약 2시간동안 서칭했다. 먼저 내가 계속 붙잡고 있던 api를 curl 날려본 결과

 

- Content-Type 
- Accept-Ranges
- Content-Length 

 
이렇게 되어있는데, 모바일(Chrome, Safari..등) 영상이 안나왔다. 그래서 다른 서버에 올라간 영상을 테스트로 해봤다.
왜냐면, 내가 만든 동영상 파일 보여주는 api가 깨진다면 분명 다른 api도 모바일에서 깨져야했기 때문!
그런데!
http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4
http면서 해당 위 url을 모바일에서 여니까 너무 영상이 잘 나오는 것이었다ㅎ
 
그래서 당장 curl 요청을 날려봤다

열어보니 뭔가 내가 개발한 api의 응답값보다  항목이 많다. x-goog 항목은 저 영상 url이 googleApi를 통해 가져오므로 관련된 항목같았다. 그러므로 prefix goog는 패스! 이렇게 비교해보니

Cache-Control : 캐시 메커니즘을 지정하기 위해 사용되는 헤더
ex:) Cache-Control : public, max-age=3600 : 초 단위로 캐시가 유효한 시간 제공
Expires
Last-Modified
ETag : Entity-Tag의 약자, 리소스를 식별하는 식별자
Date

항목이 내가 개발한 것과 달랐다..
 
 

728x90
반응형