RESOURCES

소개

시작하기 전에

 

오늘은 어제에 이어Amazon Interactive Video Service (Amazon IVS) Timed Metadata 기능을 구축하고 사용하는 방법을 배울 수 있는 시리즈의 2편입니다. 이 튜토리얼을 완료하려면 이 시리즈의 1 부 단계를 완료 후 진행해야 합니다. 이 부분의 AWS CloudFormation 템플릿이 해당 단계에서 수행된 작업을 대체하므로 1부 (웹 페이지 플레이어 설정)의 세 번째 단계는 건너뛸 수 있습니다. Amazon IVS 채널과 Python 스크립트는 필수이며 이 자습서의 절반에서는 다루지 않습니다.

 

이 연습에서는 뷰어에게 완전한 대화형 환경을 제공하는 Amazon IVS 라이브 스트림의 전체 작업 데모를 작성합니다. 이 연습은 기술 개발자가 기능이 어떻게 작동하는지 배울 수 있는 간단한 데모로 설계되었습니다. Amazon IVS와 ​​같은 기본 서비스는 확장성이 뛰어나고 안전하지만 이 데모의 디자인은 프로덕션용이 아닙니다.

 

프로덕션 워크 플로우를 위한 스타터 키트를 찾고 있다면 Amazon IVS 스트리밍 설정에 대한 이 블로그 게시물을 확인하세요. Timed Metadata 기능이 작동하는 방식을 배우기 위해 샌드 박스를 만들고 싶다면 이 블로그 게시물 시리즈가 적합합니다. 1부에서는 시간 제한 메타 데이터 기능에 초점을 맞추고 2부에서는 완전한 대화형 환경을 만드는 데 필요한 기본 인프라를 살펴봅니다.

 

필요한 도구

• Linux / Unix 환경 (Apple OS X를 사용하여 이 데모를 만들었습니다.)
• Python 3.x
• boto3 모듈

 

시작하기

이 시리즈의 1부에서는 사용자에게 질문을 전달하는 방법을 자세히 설명하지만 답변을 수집하는 방법은 설명하지 않습니다. 2부에서는 결과를 보기 위해 1부에서 수정된 버전의 웹 페이지로 해당 응답을 수집하는 백엔드를 생성합니다.

플레이어 웹 페이지에서 동일한 인터페이스에 데이터를 표시하도록 선택한 것을 발견할 것입니다. 다른 뷰를 만들고 싶을 수도 있지만 이 예제는 간단하게 유지하고 싶습니다. 이러한 결과를 얻기 위해 단일 Amazon API Gateway 엔드 포인트와 AWS Lambda 함수를 사용하여 제공된 URL 경로에 따라 동작을 변경했습니다. 이를 수행하는 여러 Lambda 함수와 API Gateway 엔드 포인트를 쉽게 가질 수 있습니다. 이 예제에서는 단일 Lambda 함수를 유지하여 AWS CloudFormation 템플릿을 간결하고 따르기 쉽게 유지합니다. 웹 페이지 인터페이스는 jQuery를 사용하여 API Gateway 엔드 포인트 및 부트 스트랩과 통신하여 인터페이스를 깔끔하게 유지합니다.

 

 

솔루션 개요

 

 

 

연습

1 단계. 파트 1 단계 완료

이 시리즈의 이전 블로그 게시물에 있는 단계를 완료하지 않은 경우 이 자습서를 진행하기 전에 완료하세요. 이 연습 부분에는 player.html 파일이 필요하지 않습니다. 해당 파일의 다른 버전은 CloudFormation 템플릿 배포 중에 API Gateway URL 및 Amazon IVS 재생 URL로 자동 구성됩니다.

이전 블로그 게시물에서 이어질 세 가지 사항은 다음과 같습니다.

1. Amazon IVS 채널 재생 URL
2. Python 파일 – 여기에서 Python 스크립트를 다시 다운로드 할 수 있습니다.
3. facts.txt 텍스트 파일 – 여기에서 텍스트 문서를 다시 다운로드하거나 직접 만들 수 있습니다.

 

2 단계. AWS CloudFormation 템플릿

AWS CloudFormation 템플릿 실행을 시작하고 그동안 이 게시물을 반환하여 이 템플릿이 생성하는 모든 내용을 읽어보세요.

US-EAST-1에서 시작합니다.

 

CloudFormation 콘솔에서 다음 단계를 따르세요.

1. “N. Virginia”(일명 us-east-1) 리전 확인
2. 다음 클릭
3. Amazon IVS 채널 재생 URL을 PlaybackUrl에 붙여넣기
4. 다음 클릭
5. “스택 옵션 구성” 변경 필요 없음
6. 다음 클릭
7.  PlaybackUrl검토: 스택 세부 사항을 지정
8. 하단으로 스크롤하여 페이지 하단의 확인란 확인 후 기능 섹션을 읽고 확인
9. 스택 생성 클릭

 

3 단계. AWS CloudFormation 템플릿 완료까지 대기

템플릿이 완료될 때까지 기다리는 동안 내부에서 실행될 내용을 살펴보겠습니다. 시간이 부족하면 이 설명을 건너뛰고 4 단계를 진행하셔도 됩니다.

 

이전에 Python 스크립트에서 Amazon IVS REST API로 Timed Metadata를 보냈습니다. 여기서 video.js HTML5 플레이어에는 Timed Metadata 이벤트를 기다리는 “PlayerEvent” 리스너가 있습니다. Timed Metadata 이벤트가 발생했을 때 jQuery를 사용하여 Python 스크립트가 보낸 페이로드에서 동적 HTML을 생성했습니다. 1부에서 수행한 작업 외에도 이 CloudFormation 템플릿은 Amazon DynamoDB 데이터베이스, API Gateway REST API, Lambda 함수 및 Amazon Simple Storage Service (Amazon S3) 버킷을 생성하고 Amazon CloudFront를 사용하여 Amazon IVS 채널과의 대화형 경험을 구축합니다.

 

다음으로 각 서비스를 구성한 이유에 대해 자세히 설명하겠습니다. 개인적으로 이 데모를 만드는 과정에서 많은 것을 배웠으며, 여러분들도 많이 배워가실 수 있으면 좋겠습니다.

 

Amazon DynamoDB 데이터베이스
저는 “primary partition key”(poll_id )와 “primary sort key”( requestor_id ) 및 timestamp_created 의 “partition key”( requestor_id ) 및 “sort key”가 있는 Global Secondary Index를 사용하여 DynamoDB 데이터베이스를 구성했습니다 . poll_id (주 파티션 키) 설문 조사 질문에 대해 식별된 고유한 ID입니다.

 

다음으로, 설문 조사 질문에 응답하는 요청자의 고유 식별자로 requestor_id (기본 정렬 키)를 사용하고 있습니다. 이 조합을 사용하면 특정 질문에 대한 모든 답변을 쉽게 검색할 수 있습니다.

 

또한 특정 requestor_id에 대한 poll_id 를 얻을 수 있기를 원했습니다. 이것이 GSI (Global Secondary Index)가 작동하는 곳입니다. DynamoDB GSI를 사용하면 서로 다른 키 및 정렬 조합으로 복제된 테이블을 쉽게 생성할 수 있습니다. 이를 통해 데이터베이스에 넣는 방식과 다른 방식으로 데이터를 가져올 수 있습니다. 과거에 SQL 쿼리를 사용한 적이 있는 사람들은 NoSQL 데이터베이스가 데이터베이스의 어떤 열도 쿼리할 수 ​​없다는 것을 발견했을 것입니다. DynamoDB의 GSI를 사용하면 매우 빠른 쿼리 속도로 사용할 키와 정렬을 계획하여 유사한 결과를 얻을 수 있습니다. 올바른 DynamoDB 파티션 키 선택은 환경에 가장 적합한 키를 선택하고 정렬하는 데 사용할 수 있는 다른 예제에 대한 훌륭한 블로그 게시물입니다.

 

Amazon API Gateway REST API
CORS (Cross-Origin Resource Sharing)가 활성화된 Lambda 프록시 통합을 사용하여 API Gateway를 REST API로 구성했습니다. HTML 호스트가 API Gateway와 통신하려면 CORS가 필요합니다. 웹 페이지가 원격 리소스에 액세스하려고 하면 먼저 OPTION 명령을 전송하여 API 게이트웨이가 웹 페이지가 호스팅되는 특정 위치와 통신할 수 있는지 확인합니다. 모든 오리진이 이 API 게이트웨이 위치에 액세스 할 수 있도록 허용하고 있지만 구성에서 여전히 필요합니다. 그렇지 않으면 웹 브라우저에서 요청이 거부됩니다. 이것은 웹 페이지 통신을 보호할 때 매우 중요한 개념이지만 이러한 모든 서비스를 통합하는 방법을 배우려고 할 때는 부족할 수 있습니다.

 

CORS에 대한 자세한 정보는 이 문서에서 확인할 수 있습니다. 궁극적으로 “ANY” 메서드는 Lambda 함수를 가리키고 “OPTIONS” 메서드는 모든 CORS 정보가 포함된 응답 헤더가 있는 “Mock” 요청을 가리킵니다.

 

참고: 이 API Gateway 엔드 포인트에 대한 보안을 포함하지 않았습니다. 향후 프로덕션에서 엔드 포인트를 사용하려는 경우 이 문서를 참조하여 보안 기능을 추가하세요.

 

AWS Lambda 함수
Lambda 프록시 통합을 사용하고 있기 때문에 Lambda 함수는 API 게이트웨이에서 “event”변수의 정보를 수신합니다. 여기에는 웹 페이지가 보낼 JSON 페이로드와 같은 데이터와 프록시 기능을 사용하기 때문에 경로 문자열이 포함됩니다. 이를 통해 우리가 사용할 모든 호출에 단일 Lambda 함수를 사용할 수 있습니다.

1. / requestor-put경로는 웹페이지에서 보내지는 정보를 받아 전송 전 DynamoDB에 맞는 형식으로 포맷합니다.
2. / requestor-get 경로는requestor_id를 기본 키로 받아 특정 요청자들이 응답한 모든 목록을 얻기 위해 GSI를 사용합니다.
3. / poll-get 경로는 poll_id를 기본 키로 받아 반환 특정 조사에 주어진 답을 포함하는 모든 항목의 목록을 반환합니다.

 

Amazon S3 버킷
S3 버킷은 player.html을 저장하고 Amazon IVS 재생 URL 및 API 게이트웨이 URL의 구성이 있는 .json 파일을 모두 포함하여 생성됩니다. 이전 블로그 게시물에서는 파일을 수동으로 편집하여 Amazon IVS 재생 URL을 추가했습니다. CloudFormation 템플릿이 이 작업을 수행했습니다.

 

Amazon CloudFront 배포
CloudFront 배포는 S3 버킷과 클라이언트 사이에 배치되도록 생성됩니다. S3 버킷에서 직접 파일을 호스팅할 수 있지만 버킷 앞에 CloudFront 배포를 배치하는 것이 좋습니다. 이는 S3 버킷에 대한 직접 액세스를 허용하지 않음으로써 보안 계층을 추가합니다.

 

HTML 파일
이전 블로그와 이 블로그의 player.html 파일을 비교하면 자바 스크립트 코드에서 훨씬 더 많은 기능을 확인할 수 있습니다. CloudFormation 사용자 지정 리소스는 API Gateway 구성 및 Amazon IVS Playback URL에서 URL을 가져와 sample.json 파일에 저장했습니다. player.html은 이 정보를 사용하여 인터페이스의 모든 상호 작용을 유도합니다. 추가 자바 스크립트 함수는 웹 페이지가 웹 페이지 및 Lambda 함수의 다양한 기능과 대화하는 데 도움이 됩니다.

 

이제 CloudFormation 템플릿이 준비가 완료되었습니다. 웹 페이지 사용 단계로 넘어가볼까요?

 

 

4 단계. 데모 사용

Amazon IVS 콘솔에서 Amazon IVS 채널 상태가 “라이브”인지 확인합니다. 또한 metadata.py 스크립트가 실행 중이고 HTTPStatusCode 204 제공  여부 확인하세요.

1. 상태가 CREATE_COMPLETE로 변경되었는지 확인
2. 출력으로 이동
3. 웹 사이트 의 CloudFront URL클릭

 

 

이전 블로그 게시물의 인터페이스와 마찬가지로 각 “조사 질문”이 왼쪽 상단에 나타납니다. 이번에는 답변 버튼을 클릭하면 웹 페이지에서 답변을 API Gateway REST API URL로 보냅니다. 그러면 Lambda 함수가 호출되고 DynamoDB 데이터베이스에 답변이 저장됩니다. 또한 웹 페이지는 다른 클라이언트와 사용자가 제출한 결과를 API Gateway REST API에 자동으로 요청합니다. 동일한 페이지의 추가 창 또는 탭을 열 수 있으며 각각 고유한 requestor_id가 있습니다. 여러 질문에 대답하면 해당 사용자의 질문 기록도 볼 수 있습니다.

 

이 player.html의 모든 창이나 탭에는 실시간 스트림에서 정확히 같은 순간에 “조사 질문”이 나타납니다. 지연 시간이 짧기 때문에 모든 Amazon IVS 스트림이 동기화되는 것이 일반적입니다. 그러나 플레이어 인스턴스가 네트워크 정체로 인해 지연되는 경우 프레임 정확도와 함께 “Poll Questions”가 나타납니다. 즉, ‘시간이 지정된 메타 데이터’페이로드를 삽입하면 실시간 스트림과 관련하여 빠르거나 늦지 않습니다. 시간 메타 데이터 기능이 없으면 메타 데이터와 비디오로 정확한 프레임을 만드는 것이 쉽지 않습니다. 페이로드가 비디오 콘텐츠와 동기화되어 있는지 확인할 수 있습니다. 이는 청중에게 질문을 하거나 사용자 플레이어 외부에서 풍부한 경험을 제공하기 위해 관련 정보를 제공하는 데 유용합니다.

 

이제 이 데모에서 얻은 지식을 활용하여 기존 라이브 스트림 환경에서 익숙하지 않은 방식으로 고객과 소통하는 풍부한 기능의 대화형 환경을 만들 수 있습니다.

 

 

정리

향후 요금이 발생하지 않도록 이 가이드에서 사용된 리소스는 삭제하세요.

1. Amazon IVS 수집으로의 스트리밍을 중지
2. Amazon IVS 콘솔에서 채널을 선택 후 삭제 버튼 클릭
3. AWS CloudFormation 콘솔에서 이 배포를 선택 후 삭제 버튼 클릭