라이브 스트리밍 개발기 (AWS IVS) - 2

박상하·2025년 5월 8일

업무일지

1년차

목록 보기

13/26

Timed Meta Data

우리는 Low-Latency Streaming 을 선택했고 그 중 Timed MetaData를 눈 여겨 보았다.

이처럼 segment를 보내는 과정에 metadata를 주입하여 broadcast 하는 송출자와
player를 통해 방송을 보는 수신자가 동일한 타이밍에 데이터를 보내고 받을 수 있다.

이를 통해 구현할 수 있는게 다양한데
일단 우리 서비스는 현재 상품 소개, 공지사항, 쿠폰 , 투표 등을 제공 할 계획이고 데모버전에 추가해 두었다.

구현 방식 (timed metadata 송신)

구현 방식은 다음과 같다.

초기에는 클라이언트에서 백엔드를 거치지 않고 바로 metadata를 보냈었다.

주의할 점은 송신할 때 metadata는 꼭 JSON 타입으로 보내야 한다는 것!

const { IVSClient, PutMetadataCommand } = require('@aws-sdk/client-ivs');

const client = new IVSClient({
  region: 'ap-northeast-2',
  credentials: {
    accessKeyId: 'AWS_ACCESS_KEY',
    secretAccessKey: 'AWS_SECRET_KEY',
  },
});

const sendMetadata = async () => {
  const command = new PutMetadataCommand({
    channelArn: '채널 arn',
    metadata: 'Hello, IVS!',
  });

  await client.send(command);
};

sendMetadata();

이런식으로 구현했었는데 이는 보안적으로 (AWS 자격 증명을 넣기 때문에) 좋지 않기 때문에
백엔드를 거치도록 수정한 기억이 있다.

   const sendMetadata = async payload => {
        const params = {
            ivsArn:채널 arn,
            metadata: payload,
        };

        await client.post(api경로);
    };

이렇게 수정을 진행했다. 결국엔 쉽게 말해서 sdk를 사용하여 channelArn에 metadata를 보내기만하면된다.

channelArn이란?

Amazon IVS -> 짧은 지연 시간 -> 채널

에 생성한 aws에서 정한 나의 채널 이름이다.

이후 실습 해보는 게시글에서 자세한 설정과 구현 과정을 작성해보겠다..!

다시 돌아와서 timed-meta-data를 사용하면? 송출자와 수신자가 동일한 타이밍에 동일한 데이터에 노출될 수 있다는 점 !!

구현 방식 (timed metadata 수신)

player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, (cue) => {
    const data = JSON.parse(cue.text);
    if (data.type === "product") {
      showProductOverlay(data);
    }
  });