Amazon IVS ROCKS!

Amazon IVS のデモアプリとサンプルコードをまとめた ivs.rocks をざらっと紹介します。

Transcript

1. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Taro HIROSE Senior Solutions Architect, DNB Internet Media Solutions Amazon Web Services Japan K.K. Introduction of IVS.ROCKS!! powered by Amazon Interactive Video Service
2. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 自己紹介 廣瀬 太郎 (Taro HIROSE) 所属 • ソリューションアーキテクト • いわゆる "Web 系" のお客様を担当 好きな AWS サービス • Amazon Interactive Video Service (Amazon IVS) • AWS Elemental Media Services • Amazon CloudFront プライベート • 2児の父、子育てまっさなか • 自宅に昇降デスクを導入、最高 • 引っ越しを機にロードバイク再開
3. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Interactive Video Service
4. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ストリーミングソフトウェアを使用してライブストリームを Amazon IVS に送信するだけで、 超低遅延のライブ動画を世界中で視聴できるようにするために必要なすべてをサポート Amazon Interactive Video Service (Amazon IVS) 素早く簡単にセットアップできるマネージドライブストリーミングサービス
5. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Interactive Video Service (Amazon IVS) Quick and easy-to-setup 数分でセットアップ可能な シンプルなライブストリーミング Multi Platform Player SDK ウェブ, iOS, Android をサポート Global Infrastructure 配信・視聴時に地理的に近い PoP が自動選択され、超低遅延を維持 Ultra Low Latency 3 秒未満の超低遅延配信 Pay as you go pricing 実際の配信/視聴時間に基づく 従量課金モデル Timed Metadata API 視聴体験のカスタマイズが可能
6. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ユースケース E コマース フィットネス／健康産業 UGC アプリ E ラーニング ライブイベント ソーシャルチャットでのエンゲージ ライブストリーミングのコンテンツと共に、チャットスペースを 追加することで、視聴者同士で交流することができます Eコマースと追加収入 ライブビデオと販売促進物を同期することで、視聴中のビデオ コンテンツに関連した商品を購入したり、投げ銭を行うことが できます 投票や世論調査 Timed Metadata API を使った投票・世論調査アプリを構築して、 視聴者の意見やフィードバックを即座に測定することができます リアルタイム Q & A 視聴者がチャットスペースで質問し、リアルタイムで回答する ことができます。ライブビデオと連携したトリビアアプリを構築 することができます タウンホール／株主総会
7. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. IVS.ROCKS https://www.ivs.rocks/
8. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. IVS.ROCKS – Amazon IVS code samples and demos https://www.ivs.rocks/ • Amazon IVS を使ったデモ & サンプル集 • Amazon IVS で何ができるかをざっと俯瞰できる • 実際のコードベースで実装イメージを掴むことができる
9. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ざらっと3行くらいで 総ナメしていきます！
10. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Simple Quiz demo with TimedMetadata • Amazon IVS でのクイズアプリケーションの実装イメージが掴めるもの • Amazon IVS Workshop でも利用されているデモ • 当該 JS を引っこ抜けば大体実装イメージはわかるでしょう // Initialize player const player = IVSPlayer.create(); player.attachHTMLVideoElement(videoPlayer); // Attach event listeners ... player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, function (cue) { console.log("Timed metadata: ", cue.text); const metadataText = cue.text; const position = player.getPosition().toFixed(2); console.log( `PlayerEvent - METADATA: "${metadataText}". Observed ${position}s after playback started.` ); triggerQuiz(metadataText); });
11. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Custom Player Controls Demo • IVS Player SDK のちょっとしたカスタマイズ方法を学べるデモ • ここでは Player の若干のカスタマイズをしている • 再生制御 (play/stop), Mute/Unmute, 画質選択など
12. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Multiple Players demo • 1画面でマルチアングルを実現するデモ • Twitch の Squad Stream のようなものを実装する時に使えるかも • 実装は単純に4本のストリームを受けているだけ const playbackUrl1 = "https://...9a2-a707-460a-a282-6191cbcfa9ec.m3u8"; const playbackUrl2 = "https://...90a-0858-4e0e-b535-53221b18b6bb.m3u8"; const playbackUrl3 = "https://...1b7-0539-440f-9176-aa7bef66f7ea.m3u8"; const playbackUrl4 = "https://...4f4-ce3a-4746-b255-a6c6ba29fc5f.m3u8"; const playbackUrls = [ playbackUrl1, playbackUrl2, playbackUrl3, playbackUrl4 ]; ... // Create 4 players based on the playbackUrls array for (var i = 0; i < 4; i++) { createPlayers(playbackUrls[i], i); }
13. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. TimedMetadata Console demo • ストリームに打ち込まれた TimedMetadata をサクッと確認する時に使える • プレイヤー下部と標準出力に位置とペイロードを表示してくれる • 簡易な debugger としてご利用ください ivsPlayer.addEventListener(PlayerEventType.TEXT_METADATA_CUE, (cue) => { const metadataText = cue.text; const position = ivsPlayer.getPosition().toFixed(2); console.log( `Player Event - TEXT_METADATA_CUE: "${metadataText}". Observed ${position}s after playback started.` ); addMetadataLine(position, metadataText); });
14. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Emoji Reactions demo with TimedMetadata • その名のとおり絵文字リアクションを実装するヒントになるだろうデモ • TimedMetadata API 経由で reaction イベントを他視聴者に届けている • 同様の機能が Amazon.com でもライブコマースとして実装されている // Configuration const channelArn = "arn:aws:ivs:us-west-2:123456789012:..."; const playbackUrl = "https://xxxxxxxxxxxx.us-west-2.playback....m3u8"; const endpoints = { metadata: `https://yyyyyyyyyy.execute-api....?channelArn=...` }; ... player.addEventListener(PlayerEventType.TEXT_METADATA_CUE, handleMetadata); ... function notifyStream(icon) { const url = endpoints.metadata; fetch(url, { method: "POST", body: JSON.stringify(icon) }); }
15. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Simple Chat demo • ライブ機能と切っても切り離せないチャット機能を実装したデモ • API Gateway w/ WebSocket を使ったデモ • もはや Amazon IVS 関係ない
16. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. eCommerce demo • ライブコマースのデモアプリ • TimedMetadata で商品 ID を送って、画面右部の商品にフォーカスを当てる • Amazon.com のライブでも似たことやってる
17. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Social Feed demo • よくあるソーシャルフィードのデモ • 画面フォーカスすると、再生始まるやつ
18. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Code Repositories
19. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Have fun! https://www.ivs.rocks/