Storage 이사하기
개발을 진행하다보면 파일을 처리할때 용량제한을 두어 일정크기 이상의 파일이 업로드 되지 못하게 막을 수 있다.
하지만, 이미지 파일이라면 괜찮겠지만, 영상 파일의 경우에는 달라진다.
영상을 올릴때 누가 용량을 생각하며 올리겠는가...
대안
그래서 S3 를 사용하는 도중 영상 파일의 비용이 너무 거대해지는것을 우려하여 다양한 CDN 서비스를 찾아나섰다.
그중 눈에띄는 서비스를 발견하게되었다. Cloudflare Stream
비용
AWS S3
Cloudflare Stream
두개의 요금제를 비교해도 무언가 다른게 보인다.
그것은 AWS는 Data Transfer의 용량에 대한 요금제 이고, CloudFlare는 영상의 시간에 대한 요금제 이다.
이게 무엇을 의미 하냐면, 화질이 좋은 비디오는 용량이 높아지고 가령 재생시간이 짧더라도 영상의 용량에 대한 과금을 발생시킨다.
픽셀 크기에 대한 용량
1080p의 1시간 분량의 영상을 업로드 한다고 한다면, AWS는 1.2 ~ 1.4GB 이라는 용량에 대한 과금을,
CloudFlare는 60분이 라는 길이에 대한 과금방식을 채택한 것이다.
이는 인터넷을 통한 "수신" 및 "송신" 되는 데이터를 기준으로 두는데, S3에 올리게 된다면 1.2 ~ 1.4GB가 한사람만 보게 되더라도 2배의 데이터 전송이 되는것이다. 이 데이터는 분명 단편적인 예시로만 들었기에 무작정 믿으면 안되지만, AWS의 Data Transfer에 대한 금액이 비싸다는것은 만연한 사실이다.
확장자
HLS (HTTP Live Streaming) 와 MPEG-DASH (Dynamic Adaptive Streaming over HTTP)
또한 CloudFlare를 선택한 이유는 HLS 의 지원이다. AWS도 HLS를 사용하여 비디오 재생을 하게 할수 있지만 이는 S3가 아닌 Kinesis Video Sterams 라는 서비스를 이용해야 한다. CloudFlare는 비디오를 업로드 하면 HSL와 MPEG-DASH를 동시에 지원해준다.
아직 IOS에서는 MPEG-DASH를 재생할 수 없어 IOS 는 HLS, Android는 MPEG-DASH 를 각각 보내줄수 있다.
AWS S3 에 업로드 한 영상과, CloudFlare Stream에 업로드한 2.7MB 6초 영상이 과연 재생하는데 있어서 시간 차이가 있을까? 에 대한 고민을 하고, 앱 개발자 분과 함께 테스트를 진행해보았다.
결과적으로 불과 6초짜리 영상을 재생하는데 있어 체감상 1초의 차이를 느낄만큼 큰 차이가 있다.
이로써 더 빠른 영상 전송속도를 빠르고 간편하게 구현할 수 있게되어 선택하게 되었다. 또한 썸네일을 영상의 시간을 지정하여 업로드 하면 지정한 시간의 썸네일을 자동으로 제공해준다. 얼마나 아름다운가? 너무 편해!
HSL의 wiki https://ko.wikipedia.org/wiki/HTTP_%EB%9D%BC%EC%9D%B4%EB%B8%8C_%EC%8A%A4%ED%8A%B8%EB%A6%AC%EB%B0%8D
MPEG-DASH https://www.cloudflare.com/ko-kr/learning/video/what-is-mpeg-dash/
CloudFlare에 대한 생각을 안하고있던 나에게 먼저 사용해본 개발자분이 좋다고 설명해줬을때 뭐가 좋지? 에 대한 생각이 정리되었다.
구현
먼저 API 문서를 보자 https://api.cloudflare.com/#stream-videos-properties
사용한 API 는 200MB 이하의 단일 파일을 업로드 하는 API를 사용했다. 200MB 이상의 이상의 고용량 파일을 전송할 경우 TUS protocol을 사용해야 한다고 한다. 하지만, 이번에는 TUS protocol (Open Protocol for Resumable File Uploads) 을 사용하지 않았기때문에 설명은 생략 하겠다.
파일을 업로드할 때 Request 의 예시 이다.
Header 에 인증 이메일과 인증 키 를 넣어 Content-Type은 'multipart-form/data' 를 사용한다.
우선 Postman에서 해당 방법을 테스트 해보았다.
Response
업로드가 성공적으로 된다면 위의 예시와 같은 Response 를 수신한다.
코드로 테스트 하기위해 Axios를 사용하기로 한다.
const formData = new FormData();
formData.append('file', command.file.buffer, { filename: command.file.originalname });
this.http
.post(this.FULL_PATH, formData, {
'Content-Type': 'multipart/form-data',
'X-Auth-Email': this.AUTH_EMAIL,
'X-Auth-Key': this.AUTH_KEY,
},
})
.subscribe(value => { console.log(value.data) });
드디어 CloudFlare Stream에 영상이 업로드 되었다.
업로드를 테스트 하며 사용했던 귀여운 강아지 영상 한번씩 보고 힐링 하세요
