다중 라이브 스트리밍 채널을 Amazon IVS의 썸네일기반 멀티뷰로 모니터링하기

저지연 라이브 스트리밍 방송은 쇼핑, 게임, 스포츠 등 다양한 분야에서 활용이 가능합니다. Amazon IVS (Amazon Interactive Video Service)는 저지연 대화형 라이브 스트리밍을 지원하는 서비스로 브로드캐스팅을 위한 쉬운 설정과 인제스트부터 플레이어까지 End-to-End 서비스를 제공하고 있기때문에 미디어 비즈니스를 필요로 하는 고객에게 다양한 형태로 활용되고 있습니다. 또한 Amazon IVS는 Amzon CloudWatch에서 미디어에 대한 다양한 모니터링 지표를 제공하고 있어서 라이브 스트리밍 품질 분석을 용이하게 할 수 있습니다.

이 게시글은 Amazon IVS에서 제공하는 1초 간격으로 생성된 썸네일(Thumbnail)을 S3에 자동 레코딩(auto-record-to-S3) 기능을 통해 라이브 스트리밍 멀티뷰 모니터링을 비용효율적으로 구성할 수 있는 방법을 소개합니다.

솔루션 개요

라이브 스트리밍의 영상 모니터링을 위해서는 라이브 스트리밍 인코더에 추가로 모니터링을 위한 온디맨드 스트리밍 서버 또는 스트리밍 솔루션을 연동해서 모니터링을 구현할 수 있습니다. 그러나 이러한 방법은 높은 비용이 발생할 수 있습니다. Amazon IVS는 기존 S3에 자동 레코딩에 1초 간격으로 라이브 스트리밍의 썸네일 저장 기능이 새롭게 추가되었습니다. 이 기능을 사용하여 기존 영상보다는 프레임이 적지만 1초에 1프레임을 구현하여 영상 모니터링을 구현할 수 있습니다. Amazon IVS의 S3에 자동 레코딩을 사용하면 채널의 라이브 스트리밍이 레코딩되고 객체 기반 스토리지인 Amazon S3 버킷에는 메타데이터 파일, HLS(HTTP Live Streaming)와 썸네일이 저장됩니다. 썸네일의 해상도는 SD, HD, FHD, 입력 스트림과 같은 해상도 또는 SD보다 더 낮은 해상도를 선택할 수 있습니다. 썸네일의 저장 선택은 연속적으로 저장하기, 최근 썸네일만 저장하기, 연속적인 것과 최근 썸네일 둘 다 저장하기도 가능합니다.

Amazon IVS의 S3에 자동 레코딩 기능을 통해 Amazon S3에 저장된 썸네일을 활용하여 멀티뷰로 모니터링하는 아키텍처는 API 매니지드 서비스인 Amazon API Gateway에서 지원하는 WebSocket을 통해 클라이언트 접속을 관리하고 클라이언트의 세션 정보는 완전관리형 NoSQL인 Amazon DynamoDB에 저장하여 연결 상태를 유지할 수 있습니다. 그리고 Amazon S3 이벤트 알림을 통해 트리거로 호출된 서버리스 컴퓨팅 서비스인 Amazon Lambda는 WebSocket에 연결되어 있는 클라이언트로 썸네일의 정보를 미리 서명된 URL로 안전하게 전송합니다. 사용자는 실시간으로 라이브 스트리밍 영상을 멀티뷰로 모니터링을 할 수 있고 영상 레이아웃도 변경할 수 있습니다. 작은 사이즈의 썸네일을 사용하여 별도의 스트리밍 솔루션 사용 없이 낮은 비트레이트를 사용하기 때문에 비용 절감을 할 수 있습니다.

아키텍처 소개

영상 송출을 위해 공개형 브로드캐스트 오픈소스인 OBS Studio을 이용합니다. OBS Studio는 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어로 윈도우, 맥 혹은 리눅스 환경에서 빠르고 쉽게 방송할 수 있습니다. Amazon IVS도 IVS Broadcast SDK와 IVS Player SDK 로 여러 플랫폼의 애플리케이션 구축을 위한 Web, iOS, Android을 제공하고 있습니다. 이번 게시글에서는 OBS 구성으로만 설정하였습니다. 아키텍처 흐름은 영상 녹화 파일을 OBS를 통해 다중 RTMP 프로토콜로 Amazon IVS 채널에 송출합니다. 클라이언트는 브라우저를 통해 Amazon API Gateway의 WebSocket으로 연결을 합니다. AWS Lambda를 통해 각 Amazon IVS 채널의 S3에 저장된 썸네일 정보를 안전하게 미리 서명된 URL로 이미 연결된 클라이언트에 전송을 할 수 있고 브라우저에서 멀티뷰로 모니터링을 구성합니다.

Amazon IVS의 S3에 자동 레코딩으로 생성된 썸네일 기반으로 Amazon API Gateway의 WebSocket을 통해 멀티뷰로 모니터링

사전 준비 사항

AWS 계정
OBS Studio

단계별 요약

단계 1 : Amazon DynamoDB 생성하기
단계 2 : Connect, Disconnect를 위한 IAM 역할 및 AWS Lambda 함수 생성하기
단계 3 : Amazon API Gateway 생성하기
단계 4 : Amazon IVS 채널 및 레코딩 구성 생성하기
단계 5 : Amazon IVS의 자동 레코딩된 썸네일 정보를 클라이언트 전송을 위한 IAM 역할 및 AWS Lambda 함수 생성하기
단계 6 : Amazon IVS 영상 송출을 위한 OBS Studio 설치하기
단계 7 : OBS Studio 설정 및 Amazon IVS 연동하기
단계 8 : 영상 모니터링 멀티뷰어 구성하기
단계 9 : 동작 확인

단계 1 : Amazon DynamoDB 생성하기

WebSocket 클라이언트 세션 정보를 읽고 쓰기 위해서 NoSQL 서비스인 Amazon DynamoDB를 구성합니다.

1. Amazon DynamoDB로 이동합니다.
2. 테이블 메뉴에서 ‘테이블 생성‘ 버튼을 클릭합니다.
3. 테이블 이름은 ‘WebSocketClients‘로 입력합니다.
4. 파티션 키는 ‘ConnectionId‘을 입력하고 ‘자료형‘은 문자열로 선택합니다.
5. ‘테이블 생성‘ 버튼을 클릭합니다.

단계 2 : Connect, Disconnect를 위한 IAM 역할 및 AWS Lambda 함수 생성하기

비디오 영상을 Amazon IVS에 전송하기 위해 OBS Studio를 설치하고 OBS의 Media Source를 소스로 사용합니다.

1. Connect 함수 권한 설정을 위해 IAM 역할에서 ‘역할 만들기‘를 클릭합니다.
2. ‘AWS 서비스‘는 Lambda를 선택하고 ‘다음‘을 클릭합니다.
3. ‘권한 정책‘은 ‘AWSLambdaBasicExecutionRole‘을 추가하고 ‘다음‘을 클릭합니다.
4. ‘역할 이름‘은 ‘IVSMonitoringConnectServiceRole‘ 입력하고 ‘역할 생성‘ 버튼을 클릭합니다.
5. ‘IVSMonitoringConnectServiceRole‘ 클릭하고 ‘권한 정책‘에서 ‘권한 추가‘를 확장해서 ‘인라인 정책 생성‘을 클릭합니다.
6. ‘권한 지정‘의 ‘JSON‘ 탭에서 아래 JSON 코드를 입력하고 Amazon DynamoDB Resource에서 자신의 AWS 계정 아이디로 변경합니다. 그리고 ‘다음‘을 클릭합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "dynamodb:PutItem"
            ],
            "Resource": [
                "arn:aws:dynamodb:ap-northeast-2:AWS계정아이디:table/WebSocketClients"
            ],
            "Effect": "Allow"
        }
    ]
}

7. ‘정책 이름‘에서 ‘IVSMonitoringConnectServiceRoleDefaultPolicy‘을 입력하고 ‘정책 생성‘을 클릭합니다.
8. Connect 함수 생성하기 위해 AWS Lambda 콘솔로 이동하여, ‘함수 생성‘을 클릭합니다.
9. ‘함수 이름‘은 Connect로 입력하고 런타임은 ‘Python 3.11‘로 선택합니다. ‘기존 역할‘에서 ‘IVSMonitoringConnectServiceRole’을 선택합니다. 그리고 ‘함수 생성‘ 버튼을 클릭합니다.
10. 코드는 아래 코드를 입력하고 ‘Deploy‘ 버튼을 클릭합니다.

import boto3
import json
import os

dynamodb = boto3.client('dynamodb')
dynamodb_table_name = 'WebSocketClients'

def lambda_handler(event, context):
  connection_id = event['requestContext']['connectionId']
  save_client_id(connection_id)
  
  return {
      "statusCode": 200,
      "body": "WebSocket client ID saved."
  }

def save_client_id(client_id):
  try:
      dynamodb.put_item(
          TableName=dynamodb_table_name,
          Item={
              'ConnectionId': {'S': client_id}
          }
      )
  except Exception as e:
                  print(f"Error saving WebSocket client ID: {str(e)}")

11. Disconnect 함수도 Connect 함수 생성과정을 반복합니다.
12. Disconnect 함수 권한 설정을 위해 IAM 역할에서 ‘역할 만들기‘를 클릭합니다.
13. ‘AWS 서비스‘는 Lambda를 선택하고 ‘다음‘을 클릭합니다.
14. ‘권한 정책‘은 ‘AWSLambdaBasicExecutionRole‘을 추가하고 ‘다음‘을 클릭합니다.
15. ‘IAM 역할 이름‘을 ‘IVSMonitoringDisconnectServicRole‘로 생성합니다.
16. ‘권한 정책‘의 ‘인라인 정책 생성‘도 아래 코드로 입력하고, Amazon DynamoDB Resource에서 자신의 AWS 계정 아이디로 변경합니다.
17. ‘정책 이름‘은 ‘IVSMonitoringDisconnectServiceRoleDefaultPolicy‘을 입력합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "dynamodb:DeleteItem"
            ],
            "Resource": [
                "arn:aws:dynamodb:ap-northeast-2:AWS계정아이디:table/WebSocketClients"
            ],
            "Effect": "Allow"
        }
    ]
}

18. Disconnect 함수 생성하기 위해 AWS Lambda 콘솔로 이동하여, ‘함수 생성‘을 클릭합니다.
19. 함수 이름은 ‘Disconnect‘로 입력하고, ‘기존 역할‘에서 ‘IVSMonitoringDisconnectServiceRole‘을 선택합니다. 그리고 ‘함수 생성‘ 버튼을 클릭합니다.
20. 코드는 아래 코드를 입력하고 ‘Deploy‘ 버튼을 클릭합니다.

import boto3
import json
import os

dynamodb = boto3.client('dynamodb')
dynamodb_table_name = 'WebSocketClients'

def lambda_handler(event, context):
  connection_id = event['requestContext']['connectionId']
  delete_client_id(connection_id)
  
  return {
      "statusCode": 200,
      "body": "WebSocket client ID deleted."
  }

def delete_client_id(client_id):
  try:
      dynamodb.delete_item(
          TableName=dynamodb_table_name,
          Key={'ConnectionId': {'S': client_id}}
      )
  except Exception as e:
      print(f"Error deleting WebSocket client ID: {str(e)}")

단계 3 : Amazon API Gateway 생성하기

클라이언트 세션 정보 관리 및 썸네일 정보를 전송하기 위한 WebSocket 기반 Amazon API Gateway를 생성합니다.

1. Amazon API Gateway 이동하여 ‘API 생성‘ 클릭합니다. WebSocket API ‘구축‘ 버튼을 클릭합니다.
2. ‘API 이름‘은 ‘IVS-Monitoring-WebSocket‘을 입력하고 ‘라우팅 선택 표현식‘은 request.body.action을 입력합니다. 그리고 ‘다음‘을 클릭합니다.

3. ‘경로 추가‘의 ‘미리 정의된 경로‘에서 경로 $connect 추가, 경로 $disconnect 추가를 클릭합니다. 그리고 ‘다음‘을 클릭합니다.

4. ‘통합 연결‘에서 ‘$connect에 대한 통합 유형‘에서 ‘Lambda‘를 선택하고 기존에 생성된 ‘Connect‘를 입력합니다.
5. ‘$disconnect에 대한 통합 유형‘도 Lambda‘를 선택하고 ‘Disconnect‘ 함수를 선택합니다. 그리고 ‘다음‘을 클릭합니다.

6. ‘스테이지 추가‘에서 ‘스테이지‘는 production을 입력하고 ‘다음‘을 클릭합니다.

7. 마지막으로 ‘생성 및 배포‘를 클릭합니다.
8. Stages 메뉴에서 ‘WebSocket URL‘과 ‘연결 URL‘를 메모합니다.

단계 4 : Amazon IVS 채널 및 레코딩 구성 생성하기

라이브 스트림 썸네일 저장 구성을 위해 Amazon IVS 채널 생성과 자동 레코딩 구성을 합니다.

1. Amazon IVS 채널로 이동 후에 ‘채널 생성‘을 클릭합니다. ‘채널 이름‘을 ‘IVSMonitoringChannel01‘로 입력을 합니다.
2. ‘스트림 기록 및 저장‘에서 ‘자동 레코딩 활성화‘를 킵니다.

3. ‘레코딩 구성 생성‘을 클릭하고 팝업이 나타나면 ‘레코딩 구성 이름‘을 ‘recording-configuration-demo01‘로 입력합니다.
4. ‘레코딩 구성‘에서 ‘사용자 지정 구성‘을 선택하고 비디오는 기록하지 않기 때문에 ‘변환 없음‘을 선택합니다.
5. ‘대상 썸네일 간격(초)‘을 ‘1초‘로 변경합니다. ‘대상 썸네일 해상도‘는 ‘SD(480p)‘으로 선택합니다.
6. Amazon S3 버킷을 생성하기 위해 버킷 이름을 입력합니다.
7. 레코딩 구성 생성이 완료되면 자동으로 레코딩 구성이 선택이 되고, ‘채널 생성‘을 클릭하면 ‘스트림 구성 정보‘가 보입니다.
8. OBS 연동하기 위해 ‘스트림 키‘와 ‘수집 서버‘ 정보를 메모를 합니다.
9. 여러 개의 Amazon IVS 채널 구성을 위해 단계 4의 과정을 반복합니다. 블로그에서는 10개의 채널을 생성했습니다.

단계 5 : Amazon IVS의 자동 레코딩된 썸네일 정보를 클라이언트 전송을 위한 IAM 역할 및 AWS Lambda 함수 생성하기

Amazon IVS의 자동 레코딩으로 S3 저장된 썸네일을 WebSocket을 통해 클라이언트 전송을 위한 IAM 역할을 만들고 AWS Lambda 함수를 생성합니다.

1. IAM 역할에서 ‘역할 만들기‘를 클릭합니다.
2. ‘AWS 서비스‘는 Lambda를 선택하고 ‘다음‘을 클릭합니다.
3. ‘권한 정책‘은 ‘AWSLambdaBasicExecutionRole‘을 추가하고 ‘다음‘을 클릭합니다.
4. ‘역할 이름‘은 ‘IVSMonitoringSendImageInfoRole‘ 입력하고 ‘역할 생성‘ 버튼을 클릭합니다.
5. 생성된 ‘IVSMonitoringSendImageInfoRole‘을 클릭하고 ‘권한 정책‘에서 ‘권한 추가‘를 확장해서 ‘인라인 정책 생성‘을 클릭합니다.

6. ‘권한 지정‘에서 ‘JSON‘ 탭에서 아래 JSON 코드를 입력하고 Amazon S3 Resource에 IVS 채널의 S3 버킷명으로 변경하고, DynamoDB 테이블과 API Gateway ARN을 여러분의 환경에 맞게 변경합니다. 그리고 ‘다음‘을 클릭합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "dynamodb:GetItem",
                "dynamodb:Scan"
            ],
            "Resource": [
                "arn:aws:dynamodb:ap-northeast-2:AWS어카운트아이디:table/WebSocketClients"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                                "arn:aws:s3:::1번째IVS채널버킷명/*",
                                "arn:aws:s3:::2번째IVS채널버킷명/*",
                                "arn:aws:s3:::3번째IVS채널버킷명/*",
                                "arn:aws:s3:::4번째IVS채널버킷명/*",
                                "arn:aws:s3:::5번째IVS채널버킷명/*",
                                "arn:aws:s3:::6번째IVS채널버킷명/*",
                                "arn:aws:s3:::7번째IVS채널버킷명/*",
                                "arn:aws:s3:::8번째IVS채널버킷명/*",
                                "arn:aws:s3:::9번째IVS채널버킷명/*",
                                "arn:aws:s3:::10번째IVS채널버킷명/*"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "execute-api:Invoke",
                "execute-api:ManageConnections"
            ],
            "Resource": [
                "arn:aws:execute-api:ap-northeast-2:<AWS Account ID>:<API Gateway ID>/production/POST/@connections/*"
            ],
            "Effect": "Allow"
        }
    ]
}

7. ‘정책 이름‘은 ‘IVSMonitoringSendImageInfoServiceRoleDefaultPolicy‘을 입력합니다. 그리고 ‘정책 생성‘을 클릭합니다.

8. 클라이언트에 썸네일 정보 전송을 위한 함수를 생성하기 위해 AWS Lambda 콘솔에서 ‘함수 생성‘을 클릭합니다.
9. ‘함수 이름‘은 ‘IVSSendImageInfo01‘로 입력하고 ‘런타임‘은 Python 3.11로 선택합니다.
10. ‘기존 역할‘에서 ‘IVSMonitoringSendImageInfoRole‘을 선택합니다. 그리고 ‘함수 생성‘ 버튼을 클릭합니다.

11. 코드는 아래 코드를 입력하고 메모했던 Amazon API Gateway의 ‘연결 URL‘ 정보를 ‘endpoint_url‘ 값에 입력합니다.
12. IVSSendImageInfo01의 Lambda 함수를 생성하고 채널 수에 비례해서 Lambda 생성 합니다. 클라이언트에 채널 별로 전달되는 변수인 ‘message‘에서 ‘action‘ 변수 값은 Amazon IVS 채널에 맞게 변경합니다. 그리고 ‘Deploy‘ 버튼을 클릭합니다.

import boto3
import json
import logging
import os
from botocore.exceptions import ClientError

logger = logging.getLogger()
logger.setLevel(logging.INFO)

dynamodb = boto3.client('dynamodb')
s3_client = boto3.client('s3')
api_gateway = boto3.client('apigatewaymanagementapi', endpoint_url = 'hppts://<API Gateway ID>.execute-api.ap-northeast-2.amazonaws.com/production')
dynamodb_table_name = 'WebSocketClients'

def lambda_handler(event, context):
  s3_event = event['Records'][0]['s3']
  object_key = s3_event['object']['key']
  bucket_name = s3_event['bucket']['name']

  url = generate_presigned_url(
      s3_client, 'get_object', {'Bucket': bucket_name, 'Key': object_key}, 10000)
  
  message = {
      "action": 'update_image01', #IVS 채널 정보에 맞게 변경하세요
      "image_url": url
  }
  
  connection_ids = load_client_ids()
      
  for connection_id in connection_ids:
      send_message_to_client(connection_id, json.dumps(message))

  return {
      "statusCode": 200,
      "body": "WebSocket messages sent to connected clients."
  }
  
def send_message_to_client(connection_id, message):
  api_gateway.post_to_connection(
      ConnectionId=connection_id,
      Data=message
  )

def load_client_ids():
  try:
      response = dynamodb.scan(
          TableName=dynamodb_table_name,
          ProjectionExpression='ConnectionId'
      )
      return [item['ConnectionId']['S'] for item in response.get('Items', [])]
  except Exception as e:
      print(f"Error loading WebSocket client IDs: {str(e)}")
      return []
      
def generate_presigned_url(s3_client, client_method, method_parameters, expires_in):
  try:
      url = s3_client.generate_presigned_url(
          ClientMethod=client_method,
          Params=method_parameters,
          ExpiresIn=expires_in
      )
  except ClientError:
      logger.exception("Couldn't get a presigned URL for client method '%s'.", client_method)
      raise
  return url

13. 위에서 생성된 AWS Lambda 함수에 S3 이벤트를 연결하기 위해 ‘트리거‘를 클릭하고 소스는 ‘S3‘를 선택하고 Amazon IVS 채널의 썸네일이 저장되는 Amazon S3 버킷을 선택합니다.
14. ‘Event types‘은 PUT만 선택하고 ‘Suffix’는 .jpg를 입력합니다.
15. Recursive invocation를 체크하고 ‘추가‘ 버튼을 클릭합니다.

16. 생성한 Amazon IVS 채널 수만큼 단계 5를 반복합니다.

단계 6 : Amazon IVS 영상 송출을 위한 OBS Studio 설치하기

1. OBS Studio을 다운로드하고 설치합니다.
2. Amazon IVS 여러 채널에 동시 송출하기 위해 Multiple RTMP output plugin을 다운로드하고 OBS plugin 폴더에 복사합니다.
3. 비디오 영상을 Amazon IVS에 송출하기 준비하기 위해 OBS의 ‘Sources’ 메뉴 하단의 ‘Add Source‘를 클릭하여 ‘Media Source‘를 선택합니다.

4. ‘Browse‘를 클릭하고 소유한 영상을 추가하고 OK 버튼을 클릭합니다. 영상이 없다면 무료 영상 서비스에서 다운로드할 수 있습니다.

단계 7 : OBS Studio 설정 및 Amazon IVS 연동하기

1. OBS Studio의 우측 ‘Controls‘ 메뉴의 ‘Settings‘를 클릭합니다.
2. Stream 탭을 클릭합니다.
3. Amazon IVS의 Channel로 이동하여 ‘IVSMonitoringChannel01‘ 클릭하여 상세로 이동합니다.
4. ‘Stream configuration‘에서 ‘Ingest server‘와 ‘Stream key‘의 값을 각각 OBS Studio의 ‘Server‘와 ‘Stream Key‘에 입력하고 ‘OK‘ 버튼을 클릭합니다.

5. OBS plugin으로 추가한 ‘Multiple output‘의 ‘Add new target‘을 클릭하고 Amazon IVS 채널에서 추가로 생성한 다른 채널의 상세로 이동합니다.
6. ‘Ingest server‘와 ‘Stream key‘의 복사해서 ‘RTMP Server‘와 ‘RTMP Key‘에 값을 입력하고 ‘OK‘버튼을 클릭합니다.
7. 생성한 Amazon IVS 채널수만큼 설정을 반복합니다.

8. OBS Studio의 ‘Controls‘ 메뉴의 ‘Start Streaming‘과 ‘Multiple output‘의 각 타깃의 ‘Start‘를 클릭하면 라이브 스트리밍이 시작됩니다.

단계 8 : 영상 모니터링 멀티뷰어 구성하기

아래 HTML 소스에서 ‘WebSocket 주소‘를 ‘WebSocketEndPointURL‘에서 메모했던 값으로 변경하고 저장합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Amazon IVS</title>
    <style>
        .thumbnail {
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Amazon IVS thumbnails-based monitoring</h1>
    <div class="thumbnail">
        <img src="" alt="Channel 1" id="update_image01">
        <h2>Channel 01</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 2" id="update_image02">
        <h2>Channel 02</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 3" id="update_image03">
        <h2>Channel 03</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 4" id="update_image04">
        <h2>Channel 04</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 5" id="update_image05">
        <h2>Channel 05</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 6" id="update_image06">
        <h2>Channel 06</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 7" id="update_image07">
        <h2>Channel 07</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 8" id="update_image08">
        <h2>Channel 08</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 9" id="update_image09">
        <h2>Channel 09</h2>
    </div>
    <div class="thumbnail">
        <img src="" alt="Channel 10" id="update_image10">
        <h2>Channel 10</h2>
    </div>
    <script>
        const socket = new WebSocket("WebSocketEndPointURL입력");

        socket.onopen = (event) => {
            console.log("WebSocket connection opened.");
        };

        socket.onmessage = (event) => {
            const data = JSON.parse(event.data);

            const imageUrl = data.image_url;
            const imageElement = document.getElementById(data.action);
            imageElement.src = imageUrl;        

        };

        socket.onclose = (event) => {
            console.log("WebSocket connection closed.");
        };
    </script>
</body>
</html>

단계 9 : 동작 확인

WebSocket을 지원하는 Chrome 또는 Firefox 브라우저에서 확인합니다. Amazon IVS 에서 제공하는 1초 간격으로 연속된 이미지 기반으로 멀티뷰로 모니터링을 할 수 있습니다.

리소스 삭제

Amazon IVS 채널을 삭제합니다.
AWS Lambda 함수에서 생성된 Connect, Disconnect, 썸네일 정보를 전송하는 함수를 삭제합니다.
Amazon DynamoDB의 Table을 삭제합니다.
Amazon API Gateway의 WebSocket API를 삭제합니다.
Amazon S3의 버킷을 선택하고 ‘Empty‘ 버튼을 클릭하여 파일을 삭제하고 버킷을 삭제합니다.

결론

이 게시글에서는 Amazon IVS의 S3에 자동 레코딩 기능을 이용한 1초 간격으로 생성된 썸네일을 사용하여 여러 채널의 라이브 스트리밍을 위한 멀티뷰 영상 모니터링을 비용 효율적으로 구축할 수 있는 방법을 소개하였습니다. 여러 비디오 채널을 동시에 모니터링하기 위해 전문적인 별도의 라이브 스트리밍 솔루션을 구축할 수 있지만 운영, 관리적인 측면에서 불필요한 리소스가 낭비 될 수 있으며, 추가적인 비용이 발생할 수 있습니다. Amazon IVS에서 제공하는 S3에 자동 레코딩된 썸네일을 기반으로 멀티 채널 모니터링을 위한 적절한 비트레이트와 프레임 그리고 서버리스 아키텍처로 구성하여 비용 효과적인 멀티 채널 모니터링을 기대할 수 있습니다.

AWS 기술 블로그