2021 AUSG Big Chat - AWS IVS 로 Live Streaming 웹 앱 만들기

AWS IVS 로 Live Streaming 웹 앱 만들기
AUSG 4기 김은수
1
20201 AUSG 빅챗
AWS IVS(Interactive Video Service)

2
발표자를 소개합니다.
김은수 AUSG 4기
• 부경대학교 글로벌자율전공학부
• Mathpresso Inc. Web Developer
• https://github.com/eunsukimme
AWS IVS 로 라이브 스트리밍 웹 앱 만들기
20201 AUSG 빅챗

3
라이브 스트리밍(Live Streaming) 개념 소개
AWS IVS 소개
AWS IVS 실습
부록
20201 AUSG 빅챗

4
20201 AUSG 빅챗

5
라이브 스트리밍?
인터넷(네트워크)를 바탕으로 사용자들에게
비디오, 오디오 등의 멀티미디어를 실시간으로 제공하는 기술
스트리밍 워크플로우
원본 영상 → 라이브 인코더 → 미디어 서버 → 패키징
→ 전송 서버(CDN) → 동영상 플레이어(시청자)
20201 AUSG 빅챗

6
라이브 스트리밍 워크플로우
20201 AUSG 빅챗

7
1. 라이브 인코더
인코더는 영상을 인코딩(Encoding)합니다. 인코딩은 원본 영상을 압축하는
프로세스를 말하며, 여기에 적용되는 압축 방식을 코덱이라고 합니다.
비디오 코덱과 오디오 코덱이 별도로 존재합니다.
20201 AUSG 빅챗

8
2. 인코딩된 데이터를 미디어 서버로 전달
인코딩된 데이터를 스트리밍 프로토콜(RTMP, HLS, MPEG-DASH 등)로 미디어 서버로
전송합니다.
일반적으로 스트리밍 프로토콜은 upstream 은 RTMP, downstream 은 HLS을 사용합
니다(IVS에서도 동일)
20201 AUSG 빅챗

9
3. 미디어 서버
미디어 서버에선 트랜스 코딩(Transcoding)과 트랜스 먹싱(Transmuxing) 작업이 이뤄집니다.
트랜스 코딩은 영상을 여러가지 화질 및 비트레이트로 변환하는 것을 말합니다.
트랜스 먹싱은 트랜스 코딩된 영상을 다시 다른 포맷으로 변경하는 것을 말합니다(ex. RTMP -> HLS)
20201 AUSG 빅챗

10
4. 패키징
트랜스 코딩과 트랜스 먹싱이 완료된 미디어를 배포하기 전, DRM을 적용할 수 있습니다.
또 DVR을 적용하면 라이브 스트리밍 시청자가 언제든지 타임라인을 돌려 이전 영상을 볼 수 있습니다.
Tip: AWS MediaPackage 는 JIT(Just-In-Time) package 란 기능을 제공하여 downstream 을 사용자 디바이스에서 요구하는 프로토콜로
내려줄 수 있습니다.
20201 AUSG 빅챗

11
5. 전송 서버(CDN)로 배포
미디어를 CDN에 배포함으로써 latency 를 줄이고 대규모 트래픽을 안정적으로 운
용할 수 있습니다.
또한 CDN에 배포하면 캐싱이 되서 네트워크 자원 소모가 적습니다.
20201 AUSG 빅챗

12
출처: https://www.youtube.com/watch?v=X0XYfZsO9fg&t=343s
20201 AUSG 빅챗

13
AWS IVS(Interactive Video Service) 소개
20201 AUSG 빅챗

14
AWS IVS(Interactive Video Service) 소개
2020년 7월 15일 정식 릴리즈
트랜스코딩, 트랜스먹싱, CDN 배포 등 라이브 스트리밍에 필요한 모든 과정이 통합된 서비스
Fun Fact: 아마존이 2014년 Twitch 를 인수한 이유가 바로 IVS 때문이었음
(관련 뉴스: https://www.mk.co.kr/news/business/view/2014/08/1133595/)
사진 출처: https://aws.amazon.com/ko/ivs/?nc1=h_ls
20201 AUSG 빅챗

15
AWS IVS 만의 특징?
인터랙티브 요소
AWS IVS 는 Timed Metadata 를 활용해 스트림에
메타데이터를 포함할 수 있다
즉 라이브 시청자에게 퀴즈, 투표, 광고 등을
보여줄 수 있다
Quiz Example: https://codepen.io/amazon-ivs/full/XWmjEKN
20201 AUSG 빅챗

16
AWS IVS 용어 정리
Channel
IVS에서 채널은 라이브 스트리밍에 관련된 정보를 포함하는 설정
Ingest Server
RTMPS 프로토콜로 스트림을 수신하는 미디어 서버
Stream Key
채널로 스트림을 전달하는데 필요한 키. 채널을 생성하면 자동으로
만들어진다. 비밀키로 취급해야 한다
Playback URL
특정 채널의 스트림을 재생할 수 있는 endpoint
IVS 대시보드: https://docs.aws.amazon.com/ivs/latest/userguide/getting-started-create-channel.html
20201 AUSG 빅챗

17
AWS IVS(Interactive Video Service) 실습
20201 AUSG 빅챗

18
AWS IVS 실습 - 준비
Requirements
1. AWS 계정 및 IVS에 접근 가능한 IAM policy
2. 스트리밍 도구 ex. OBS(Open Broadcaster Software)
IAM policy OBS
20201 AUSG 빅챗

19
AWS IVS 실습 – 채널 생성
20201 AUSG 빅챗

20
20201 AUSG 빅챗

21
20201 AUSG 빅챗

22
AWS IVS 실습 – 스트림 생성
20201 AUSG 빅챗

23
20201 AUSG 빅챗

24
20201 AUSG 빅챗

25
20201 AUSG 빅챗

26
AWS IVS 실습 – 테스트(AWS 콘솔)
20201 AUSG 빅챗

27
AWS IVS 실습 – 테스트(Safari 브라우저)
20201 AUSG 빅챗

28
AWS IVS 실습2 – Timed Metadata
Requirements
1. AWS CLI & credential 설정
20201 AUSG 빅챗

29
AWS IVS 실습2 – Timed Metadata
20201 AUSG 빅챗

30
AWS IVS 실습3 – Web Player SDK
20201 AUSG 빅챗
AWS IVS Player SDK
스트리밍 영상을 AWS 콘솔이 아닌 웹 페이지에서 볼 수 있도록 구현하기 위해 IVS는 Player SDK를 제공
Player SDK는 IVS 스트림을 재생할 수 있게 제작된 SDK로, 크로스 플랫폼 지원과 IVS에 최적화되어 있다
웹에서 구현하는 세 가지 방법: HTML5 <video> vs Video.js vs JWPlayer
웹에서 IVS Player SDK를 연동하는 방법은 HTML5 <video> 태그를 활용하는 것과 Video.js 라이브러리를 활용하
는 것, JWPlayer 를 활용하는 것 총 세 가지 방법이 존재한다
Video.js, JWPlayer 를 활용하면 플러그인 적용 및 이벤트, 에러 핸들링이 가능하다
여기서는 Video.js 로 연동하는 방법으로 실습

31
20201 AUSG 빅챗
Requirements
1. React or Next.js 프로젝트 기본 세팅
2. IVS Player SDK, Video.js 등 필요한 npm package 추가
여기서는 Next.js 를 활용하여 실습

32
20201 AUSG 빅챗
Home.tsx

33
20201 AUSG 빅챗
IVSPlayer.tsx (1/3)

34
20201 AUSG 빅챗
IVSPlayer.tsx (2/3)

35
20201 AUSG 빅챗
IVSPlayer.tsx (3/3)

36
AWS IVS 실습3 – 테스트
20201 AUSG 빅챗

37
AWS IVS 실습4 – IVS Player 이벤트 핸들링
20201 AUSG 빅챗
IVSPlayer.tsx (4/5)

38
AWS IVS 실습4 – IVS Player 이벤트 핸들링
20201 AUSG 빅챗
IVSPlayer.tsx (5/5)

39
AWS IVS 실습4 – 테스트
20201 AUSG 빅챗

40
AWS IVS 실습 - 결과 정리
실습 결과
- 라이브 스트리밍을 간단하게 구현할 수 있다
- Timed Metadata를 활용하면 인터랙티브 요소를 쉽게 추가할 수 있다
IVS 추가 기능들
- IVS Player SDK 를 활용하면 웹 뿐만 아니라, 앱(Android, iOS)에서도 라이브 스트리밍을 재생할 수 있음
- 인증(Authorization)을 제공해서 private channel 생성이 가능하며 인가받은 사용자만 스트림을 시청할 수 있음
20201 AUSG 빅챗
실습 자료
- Github: https://github.com/eunsukimme/next-ivs-videojs-example
- Demo: https://next-ivs-videojs-example.vercel.app/publicVideo

41
부록(Service Quotas, Pricing, etc.)
20201 AUSG 빅챗

42
AWS IVS Service Quotas (2021년 3월 기준)
API call
AWS IVS REST API 사용량이 정해져 있음. 기준에 따라 다양하므로 아래 Documentation 참고
https://docs.aws.amazon.com/ivs/latest/userguide/service-quotas.html#quotas-call-rate
Recourses
리소스 기본값 설명
Channel 5000 리전 당 생성 가능한 channel 수
Playback authorization key pair 3 리전 당 생성 가능한 authorization key 수
Stream Key 1 채널 당 생성 가능한 stream key 수
Contribution and Playback
최대 동시 시청자 수 – 15000명
최대 동시 라이브 채널 수 – 100개
최대 화질 - 1080p
20201 AUSG 빅챗

43
AWS IVS Pricing
https://ivs.rocks/calculator
20201 AUSG 빅챗

44
AWS IVS Demos
https://ivs.rocks/examples
20201 AUSG 빅챗

45
Q & A
20201 AUSG 빅챗

감사합니다
46
AWS IVS 로 Live Streaming 웹 앱 만들기
20201 AUSG 빅챗

2021 AUSG Big Chat - AWS IVS 로 Live Streaming 웹 앱 만들기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2021 AUSG Big Chat - AWS IVS 로 Live Streaming 웹 앱 만들기

Similar to 2021 AUSG Big Chat - AWS IVS 로 Live Streaming 웹 앱 만들기 (20)

More from Eunsu Kim

More from Eunsu Kim (6)

2021 AUSG Big Chat - AWS IVS 로 Live Streaming 웹 앱 만들기