동영상 스트리밍 서비스 구축 (AWS s3/cloudFront, HLS, video.js)

WEB 2021. 4. 9. 04:46

동영상을 스트리밍 할 수 있는 방법론은 다양하다.
구글을 검색하고 정리하고 다시 찾고 시도하고 해왔지만 결론은 동영상을 HLS로 인코딩하고 그 파일을 AWS의 S3에 업로드하여 cloud front에 배포되고 Javascript를 이용해서 사용자의 웹브라우져에서 스트리밍 하는 것이다.

이제부터 설명하는 플랫폼들의 UI와 기능은 2020년 12월 10일 기준으로 작성되어 차후 버전이 업데이트들 되면 다르게 작업해야할 수 있다는 점 주의해야 한다.
자세한 설명은 생략하고 실제 진행 과정만 작성한다.
- AWS S3 : 파일 저장 공간이다.
- AWS CloudFront : CDN 이다.
- HLS : 스트리밍용 영상 파일이다. 애플이 만들었음.
- video.js : 애플기기 외에 플레이 안되는 기기들이 있어서 이 비디오 플레이어 프레임워크를 써야한다.

1. S3 구성하기 하고 영상 업로드 하기

  • 버킷 이름 입력, 모든 퍼블릭 액세스 차단 해제 (공개용 영상으로 할 예정이다) 하고 하단의 '버킷 만들기' 클릭

  • 버킷 목록에서 생성한 버킷으로 들어가서 '업로드'를 클릭한다.

  • 파일들을 선택하고 모든 사람 객체 '읽기'에 체크한다.
    (HLS 영상은 .ts 파일과 인덱스 파일인 .m3u 파일로 존재하며 이 부분 AWS에서 인코딩하거나 여러 인코더들로 변환하면 된다.
    다음 장에서 aws trans coder를 이용해서 변환하는 방법을 기술할 예정이다.)

  • 업로드 성공하면 위와 같은 모습으로 나오며 종료를 누른다.

2. CloudFront 구성하고 배포 설정하기

  • Web 의 'Get Started' 버튼을 누른다.
  • RTMP 는 2021년부터 배포를 지원하지 않는다. 그리고 HLS는 Web 방식이다.

  • Origin Domain Name : 셀렉트 박스이며 아까 S3에서 만든 버킷을 선택하면 된다.
  • Restrict Bucket Access : yes 선택
  • Origin Access Identity : Create a New Identity 선택
    (Restrict Bucket Access - yes 선택하면 보임)
  • Comment : 자동 입력된 값 그냥 두면 됨
    (Restrict Bucket Access - yes 선택하면 보임)
  • Grant Read Permissions on Bucket : Yes, Update Bucket Policy 선택
  • Cache and origin request settings : Use legacy cache settings 선택
  • Cache Based on Selected Request Headers : Whitelist 선택
    (Cache and origin request settings - Use legacy cache settings 선택하면 보임)
  • Whitelist Headers 왼쪽 박스에서
    'Access-Control-Request-Headers,
    Access-Control-Request-Method,
    Origin'
    을 선택하고 'Add >>' 를 눌러 우측 박스로 이동 시킨다.
  • 그 외에는 기본값으로 두고 맨 밑에 'Create Distribution' 을 누른다.

  • 정상적으로 생성되었다.
  • 다시 왼쪽의 메뉴의 'Distributions'을 눌러 이동하자

  • 이제 CDN으로 배포될 준비가 되었다.
  • Domain Name이라고 있는 곳의 주소를 기억했다가 나중에 영상 주소 넣을 때 사용한다. (ex, d2aqi1xc06ycq4.cloudfront.net)
  • 스크롤을 우측으로 더 밀어보자.

  • 아까 생성한 S3의 영상 파일들을 배포하고 있는 중이다.
  • 완료되면 'In Progress'가 'Deployed'라고 바뀐다.

3. 영상 재생 웹페이지 생성

이제 HLS 재생을 시킬 웹페이지를 만들 차례인데 다음과 같이 우선 정리한다.

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>lab.naminsik.com</title>

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />

<style>

body{

margin: 0;

padding: 0;

}

#video{

width: 100%;

height: 100vh;

}

</style>

</head>

<body>

<video id=video width=100% class="video-js" controls>

<source src="https://d2aqi1xc06ycq4.cloudfront.net/파일명.m3u8" type="application/x-mpegURL">

</video>

<script src="https://vjs.zencdn.net/7.8.2/video.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

<script>

var player = videojs('video');

// player.play();

</script>

</body>

</html>

  • html을 위 처럼 작성한다.
  • source src에만 아까 만든 cloudFront 페이지의 도메인 네임 + 파일명을 조합해서 영상 파일의 인덱스 파일인 m3u8을 수정해서 넣으면 된다.

우선 사파리로 해당 파일을 열어본다.

  • 정상적으로 재생되는 것을 확인 할 수 있다.

하지만 크롬에서는 재생이 되지 않고 아래처럼 console 에서 오류 로그를 확인할 수 있다.

  • S3와 cloudFront에 CORS 셋팅이 안되어 있어서 그렇다.

4. CORS 설정하기

  • S3로 돌아가서 만든 버킷으로 들어가서 '권한'탭을 선택 후 밑에 'CORS(Cross-origin 리소스 공유)' 를 찾아 '편집' 버튼을 누른다.

  • 텍스트 입력란에 아래 코드를 복붙한 뒤 '변경 사항 저장'을 누른다.

[

{

"AllowedHeaders": [

"*"

],

"AllowedMethods": [

"PUT",

"POST",

"GET"

],

"AllowedOrigins": [

"*"

],

"ExposeHeaders": [],

"MaxAgeSeconds": 3000

}

]

  • 그리고 다시 돌아온 버킷의 '권한'탭에서 '버킷 정책'을 보면 위 진행 과정 중에 Discribution 만들 때 " Comment : 자동 입력된 값 그냥 두면 됨 " 라고 했었기 때문에 자동으로 입력된 값이 보일 것이다.

  • 버킷 정책값이 없거나 바뀌었다고 생각하면 다시 수정하면 된다.
  • 일단 수정 과정을 진행해본다.

  • cloudFront 의 Origin access identity 로 이동한다.
    (https://console.aws.amazon.com/cloudfront/home?region=ap-northeast-2#oai:)
  • 아까 Discribution 만들 때 " Comment : 자동 입력된 값 그냥 두면 됨 " 라고 한 곳에 들어있던 자동 입력 Comment 값이 목록에 보일 것이다.
  • 그 Comment 의 Amazon S3 Canonical User ID 값을 복사한다.
  • 다시 S3 의 버킷으로 돌아가서 '권한'탭의 '버킷 정책'을 '편집'을 눌러 아래 내용으로 수정한다.

{

"Version": "2008-10-17",

"Id": "PolicyForCloudFrontPrivateContent",

"Statement": [

{

"Sid": "1",

"Effect": "Allow",

"Principal": {

"CanonicalUser": "바로 위에서 복사한 Amazon S3 Canonical User ID"

},

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::testuploadvod/*"

}

]

}

  • '변경 사항 저장'을 누르면 "CanonicalUser" 의 키와 값이 저장되고 나면 "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E16TH420ZUON0B" 이런 식으로 변경되어 반영되어 진다.

이제 cloudFront의 Distributions 으로 이동한다.

  • 체크 박스를 선택하고 'Distribution Settings' 를 누르거나 바로 Distribusion의 ID를 클릭해서 해당 Distribution 상세 페이지로 이동한다.

  • 상단의 'Behaviors' 탭을 클릭하고 체크박스로 선택 후 'Edit'를 눌러 수정 페이지로 진입한다.

  • Allowed HTTP Methods : GET, HEAD, OPTIONS
  • Cached HTTP Methods : GET, HEAD (Cached by default) OPTIONS 에 체크
  • 다 완료하였으면 우측 하단에 있는 'Yes, Edit' 을 눌러 완료한다.

  • 수정이 완료되면 다시 배포를 시작한다.
  • 배포가 완료되면 Status에 'In Progress'가 'Deployed'라고 바뀐다.

  • 다시 크롬에서 확인해보면 정상적으로 재생되는 것을 확인 할 수 있다.

 

출처 : lab.naminsik.com/3960

'WEB' 카테고리의 다른 글

.htaccess 특정 아이피만 허용  (0) 2021.04.08
[PHP] 접속 아이피 확인  (0) 2021.04.07
[apache] IP주소로 접속 시 차단 방법  (0) 2021.04.07
크로미움 Google API 키가 누락되었습니다.  (0) 2020.12.29
[자바스클비트] 크롬 콜솔창에서 자바스크립트 선언된 모든 변수보기  (0) 2020.08.11
Posted by 꼬장e
,

티스토리툴바