Site icon 지락문화예술공작단

Amazon Interactive Video Service 출시 – 모바일 앱 및 웹 사이트를 위한 라이브 영상 기능

Amazon Interactive Video Service 출시 – 모바일 앱 및 웹 사이트를 위한 라이브 영상 기능

오늘은 자신의 모바일 앱과 웹 사이트에 바로 라이브 동영상을 추가할 수 있는 새로운 Amazon Interactive Video Service를 소개하려고 합니다. 저와 비슷한 분이라면 지연 시간이 짧은 대화형 라이브 동영상을 정말 간편하게 애플리케이션에 통합할 수 있다는 데 깜짝 놀라실 겁니다.

이 서비스를 사용하면 Amazon Interactive Video Service(IVS) 콘솔이나 API로 채널을 생성할 수 있습니다. 그런 다음, 표준 스트리밍 소프트웨어를 사용하여 이 채널로 동영상을 스트리밍하면 해당 서비스에서 전 세계의 시청자에게 라이브 동영상을 전송하는 데 필요한 모든 작업을 처리해줍니다. 이 서비스에는 웹, iOS 또는 Android 프로젝트에 라이브 동영상을 간편하게 통합해 주는 플레이어 SDK가 포함되어 있습니다.

그 정도 기능뿐이었다면 그저 꽤 괜찮은 서비스라고 생각하는 데 그쳤겠지만, 개발팀에서는 범상치 않은 노력을 기울여 두 가지 중요한 기능을 추가했습니다. 그래서 이 서비스가 독보적이라고 생각했습니다.

첫째, 동영상의 지연 시간이 짧습니다. 즉, 동영상을 방송하는 시점과 동영상이 시청자의 화면에 표시되는 시간 사이의 간격이 2~3초 이내입니다. 짧은 지연 시간이 중요한 이유는 이 서비스가 대화형 실시간 애플리케이션을 구축하는 것을 목적으로 하기 때문인데, 이는 지연 시간을 최소화해야만 가능합니다.

둘째, 개발팀은 동영상과 함께 시간이 표시된 메타데이터를 전송하는 기능을 추가했습니다. 따라서 라이브 스트림의 중요한 시점에 애플리케이션에서 이벤트를 실행할 수 있습니다. 예를 들어 라이브 설문조사가 진행 중이라는 것을 알리는 이벤트를 보내면 앱이 이에 응답하고 사용자가 라이브 동영상을 보면서 설문에 투표할 수 있게 됩니다.

이 두 가지 기능이 함께 제공되기 때문에 웹 사이트와 애플리케이션에서 시청자와 더욱 소중한 관계를 만들 수 있는 환경을 구축할 수 있습니다. 예를 들어 제품 출시 소식을 라이브 스트리밍하고 있다면 동영상에 신제품이 나오는 동시에 자세한 제품 정보가 표시되도록 할 수 있습니다. 심지어 ‘지금 구매’ 버튼을 표시하여 시청자들이 라이브 스트림에서 보고 있는 바로 그 제품을 구매하도록 할 수도 있습니다.

저는 지난 몇 개월간 Twitch.tv에서 라이브 퀴즈를 진행했는데, 이 새로운 서비스 덕분에 웹 사이트에서 더 개인화된 통합 버전을 구축할 수 있겠다는 생각이 들었습니다. Amazon IVS 콘솔에서 채널을 만들어 이와 같은 것을 구축하는 방법을 보여드리겠습니다.

Amazon IVS 콘솔의 첫 번째 화면에 [채널 생성]이라는 버튼이 보입니다. 이 버튼을 클릭하면 채널 생성이 시작됩니다.

채널에 이름을 지정하고 기본 구성을 선택합니다. 저는 풀 HD로 동영상을 전송하고 지연 시간을 낮추고 싶습니다. 그런 다음, 아래에 있는 [채널 생성] 버튼을 클릭합니다.

몇 초 뒤에 채널이 생성되습니다라는 메시지를 받습니다. 화면에 나오는 시작하기 섹션에서는 동영상 스트리밍에 사용하는 컴퓨터나 디바이스를 구성하는 방법을 설명합니다.

같은 화면에 몇 가지 스트림 구성 정보가 표시됩니다. 동영상을 서비스로 전송하는 데 필요한 두 가지 정보가 있는데, 바로 입력 서버스트림 키입니다.

저는 모든 온라인 스트리밍에 XSplit Broadcaster라는 소프트웨어 패키지를 사용하지만, 다음 몇 단계는 여러분이 사용하는 방송 소프트웨어와 비슷할 것입니다. 새 출력을 설정하고 [사용자 지정 RTMPS]를 선택합니다.

새 RTMPS 출력의 속성 화면에서 이름과 설명을 추가합니다. 콘솔의 스트림 구성 섹션에서 복사한 RTMPS URL을 추가합니다. 또한, 스트림 키스트림 이름 텍스트 상자에 추가합니다(소프트웨어마다 이름이 다르므로 자신이 사용하는 방송 소프트웨어 설명서에서 스트림 키를 추가할 위치를 확인해야 함).

출력을 구성하였으므로 새 사용자 지정 RTMPS 출력으로 방송할 수 있습니다. 백그라운드에서 소프트웨어가 동영상과 오디오를 Amazon Interactive Video Service로 스트리밍하기 사직합니다.

콘솔의 라이브 스트림 섹션으로 돌아오면 콘솔에 라이브 동영상이 나타나는 것을 확인할 수 있습니다. 제 경험으로는 동영상 스트리밍이 시작되기까지 몇 초가 걸립니다.

이 라이브 동영상을 웹 사이트에 추가하려면 플레이어 SDK를 사용해야 합니다. 콘솔의 플레이어 구성 섹션에 재생 URL이 있고, 이 URL은 플레이어에서 동영상을 재생하도록 구성하는 데 필요합니다.

이 서비스를 구축한 개발팀이 Codepen에서 멋진 예제 프로젝트를 만들었습니다. 저는 이 예제 프로젝트를 수정하여 동영상을 테스트하고 퀴즈를 만들어보겠습니다. 이 예제는 JavaScript 플레이어 SDK를 사용합니다. 동영상을 재생하려면 playbackUrl 변수가 새로 생성된 재생 URL을 가리키도록 설정하기만 하면 됩니다. 이 작업을 마치면 동영상 스트림이 웹 페이지에 나타납니다.

이 예제 프로젝트에는 앞서 말씀드린 시간이 표시된 메타데이터 기능을 처리하는 코드가 있습니다. 기본적으로 메타데이터를 서비스로 전송하면 이 정보는 플레이어 SDK에 이벤트로 전달됩니다. 그러면 이 이벤트를 처리하고 재미있는 시도를 해볼 수 있습니다. 이 예제에서는 이벤트 리스너를 추가해 PlayerEventType.TEXT_METADATA_CUE 이벤트를 수신하고, 함수에 전달된 cue 개체로 화면 위의 HTML 버튼을 표시해 사용자가 설문에 투표하도록 했습니다.

player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, function (cue) {
    const metadataText = cue.text;
    triggerQuiz(metadataText);
});

저는 방송 중에 언제든 PutMetadata API를 사용하여 채널로 메타데이터를 전송할 수 있습니다. 예를 들어 AWS CLI를 사용하여 다음의 명령을 전송하면 데이터가 서비스로 전송되고, 몇 초 뒤에는 JavaScript 코드에서 PlayerEventType.TEXT_METADATA_CUE 이벤트가 발생합니다.

payload='{"question": "In which year did Jeff Barr Start a blog at Amazon?","answers": [ "1992", "2004", "2008", "2015"],"correctIndex": 1}'

aws ivs put-metadata --channel-arn arn:aws:ivs:us-west-2:365489315573:channel/XBoZcusef81m --metadata "$payload" --region us-west-2

아래에서 볼 수 있듯이 설문조사 HTML 요소는 라이브 동영상 위에 오버레이로 표시되고 사용자는 이 요소와 상호작용하여 설문에 투표할 수 있습니다.

Amazon Interactive Video Service(Amazon IVS)는 Amazon IVS에 대한 동영상 입력 시간 합계와 시청자에게 전송된 동영상 출력 시간 합계를 기준으로 한 사용량 기반 요금을 사용합니다. 일반 비용에 대한 자세한 내용은 제품 페이지의 요금 섹션에서 확인하실 수 있습니다.

Amazon IVS 콘솔과 API는 현재 EU(아일랜드), 미국 동부(버지니아 북부), 미국 서부(오레곤) 리전에서 제공됩니다. 해당 리전 중 하나에서 채널을 생성하고 수정해야 합니다. 그러나 동영상 입력과 전송은 라이브 동영상에 최적화된 관리형 인프라 네트워크를 통해 전 세계로 제공됩니다. 서비스 글로벌 범위에 대한 자세한 내용은 FAQ를 참조하세요.

저처럼 마음껏 서비스를 즐기시기 바랍니다. 여러분이 이 서비스로 무엇을 구축할지 벌써 기대되네요.

즐겁게 스트리밍하세요!

– Martin

 

Source: Amazon Interactive Video Service 출시 – 모바일 앱 및 웹 사이트를 위한 라이브 영상 기능

Exit mobile version