Video

💻Develop/Geographic, Map

[Gopro] 1. 고프로 영상에서 GPS 위치 추출하기

👋 개요 사내 기능 개발 중, 영상 재생과 동시에 Sync에 맞게 지도에 현재 재생 위치를 나타내달라는 요구사항이 있었다. 데이터 엔지니어 동료 분이 한 번 테스트를 거쳤고 제한적으로 Gopro 영상에서는 GPS 데이터를 추출할 수 있음을 확인해 주셨다. 관련 블로그의 글이 있어 해당 아티클을 읽고 위치를 추출해 보았다. https://www.trekview.org/blog/2022/gopro-telemetry-exporter-getting-started/ Getting started with GoPro Telemetry to parse GPMD A more comprehensive alternative to exiftool when working with GPMD. www.trekview.org 영어로..

💻Develop/React

iOS webm 미지원을 ffmpeg를 이용해 client단에서 around 하는 방법(feat. Web Assembly)

👋 개요 사내 광고소재 Video는 모종의 이유로 .webm 형식으로 되어있다. 문제는 iOS에서는 이 형식의 video를 지원하지 않는다는 것인데, MacOS, Android 등등에서 잘 돌아가던 녀석이 아이폰에서만 돌아가지 않았다. 여러 대안이 있지만(여러래봤자 당장 생각나는 건 두가지 뿐이지만) 다른 파트쪽에 손을 벌리지 않고 FE 자체적으로 이 이슈를 해결해보고싶었다. 그래서 Web Assembly를 이용해 ffmpeg를 브라우저에서 실행해 webm 파일을 mp4 파일로 인코딩 후 view에 띄우려고 한다. 🤔 과정 A to Z로 모든 부분을 구현하기엔 살짝 막막했으나 @ffmpeg/ffmpeg 라는 좋은 라이브러리가 이미 개발 되어있었고 이것을 사용했다. 튜토리얼과 문서를 참고해 아래의 코드를 ..

💻Develop/React

iOS 환경에서 Video Resource Load 실패하던 문제

🩹 증상 Failed to load resource: The operation couldn’t be completed. (WebKitBlobResource error 1.) ⭕️ 원인 첫 프레임을 썸네일로 사용하기 위해 src 주소를 `blob:${url}#t=0.001`처럼 주었고 해당 url로부터 데이터를 가져오지 못함 다른 환경에서는 잘 동작하나 iOS 환경에서는 blob URL과 함께 time Anchor를 사용할 경우 동작하지 않음. 결국 브라우저입장에서는 이상한 URL로 요청하던 것 🤔 문제 및 해결 과정 해당 경로에서 Parameter를 제거해 주었으나 재생 전까지 까만 화면으로 표시되며, Custom Player도 비활성화되어있다. Native Controller나 autoplay를 사용하..

미스터길
'Video' 태그의 글 목록