How to stream videos from amazon s3 with Airbroad Player

에어브로드 플레이어에서 Amazon S3와 CloudFront 사용하기

Introduction

에어브로드 플레이어는 Amazon S3(Simple Storage Service)에 저장된 비디오들도 스트리밍 할 수 있습니다. 해당 가이드는 에어브로드 플레이어에서 스트리밍 사용을 위해 S3 bucket과 CloudFront 셋팅 방법을 설명합니다.

S3 설정하기

1. Amazon S3 console 페이지에서 CORS configuration 페이지로 들어갑니다.

2. CORS Configuration에서 Access Control 관련 설정을 추가합니다. (아래 코드 참조)

아래 코드를 추가해 주시면 됩니다.

...
<CORSRule>
	<AllowedOrigin>http://your_domain</AllowedOrigin>
	<AllowedMethod>GET</AllowedMethod>
	<ExposeHeader>Date</ExposeHeader>
	<ExposeHeader>Content-Length</ExposeHeader>
	<ExposeHeader>Content-Range</ExposeHeader>
	<AllowedHeader>RANGE</AllowedHeader>
</CORSRule>
...

3. 스트리밍 하려는 비디오 파일들에 public read access 권한을 줍니다.

4. 파일 링크들을 복사하여 플레이어의 파라메터에 삽입합니다.

<script type="text/javascript" src="https://yourdomain/airbroad.js"></script>
<div id="airvideo" align="center">
<script type="text/javascript">
			var player = airbroad_player({
				"file": ["https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb.mp4", "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb_720p.mp4", "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb_360p.mp4"],
				"poster" : "https://s3.ap-northeast-2.amazonaws.com/airbroadbucket/bbb.jpg",
				"file_num" : 2,
				//"width": "100%",
				"height": 540,
				"controls" : "always",
				"autoplay" : false,
				"loop" : true,
				"auto" : true,
				"container" : "airvideo"
				//"start" : 120,
				//"end" : 160,
			});
            
</script></div>

CloudFront 연동하기

에어브로드 플레이어에서는 S3를 사용하여 직접 비디오 스트리밍을 할 수도 있지만 S3 + CloudFront 배포 설정을 통한 스트리밍도 가능합니다. CloudFront 생성 및 설정 방법은 아래와 같습니다.

1. CloudFront Console 에서 “Create Distribution”를 선택한 후,

첫번째 페이지에서는 Web 구역의 Get Started를 클릭합니다.

2. 두번째 페이지의 Origin Domain Name field에서 스트리밍 하려는 비디오 파일들이 들어있는 Amazon S3 bucket을 선택합니다.

3. Behavior 셋팅은 아래와 같이 바꿔줍니다.

a) Allowed HTTP Methods : “GET, HEAD, OPTIONS” 선택.
b) Cache Based on selected Request Headers : “Whitelist” 선택.
c) Whitelist Headers : “Origin” 추가.
d) “Create Distribution” 클릭 : 셋팅 후 배포가 완료되기 까지 5~10분 가량 소요됩니다.

4. CloudFront 도메인이 들어간 비디오 URL들을 플레이어 파라메터에 삽입합니다.

예를 들어, 만약 CloudFront 도메인이 airbroad1234.cloudfront.net이고 비디오 파일이 bbb.mp4라면, 비디오 URL은 아래와 같습니다:
https://airbroad1234.cloudfront.net/bbb.mp4

<script type="text/javascript" src="https://yourdomain/airbroad.js"></script>
<div id="airvideo" align="center">
<script type="text/javascript">
			var player = airbroad_player({
				"file": ["https://airbroad1234.cloudfront.net/bbb.mp4", "https://airbroad1234.cloudfront.net/bbb_720p.mp4", "https://airbroad1234.cloudfront.net/bbb_360p.mp4"],
				"poster" : "https://airbroad1234.cloudfront.net/abc.jpg",
				"file_num" : 2,
				//"width": "100%",
				"height": 540,
				"controls" : "always",
				"autoplay" : false,
				"loop" : true,
				"auto" : true,
				"container" : “airvideo”
				//"start" : 120,
				//"end" : 160,
			});
</script></div>