「フィニッシャーズ・スマイル」の開発と当日運用のお話

https://jaws-tohoku.connpass.com/event/352957/
#jawsug #jawsugtohoku #jawsugakita

Transcript

1. 「フィニッシャーズ・スマイル」 の開発 と 当 日 運 用 の お 話 jawsugakita ＃
2. MIURA KAZKI heptagon inc. Favorite: AWS MediaServices VPC の外側のサービス AWS Samurai 　AWS Community Hero 　　AWS Ambassador 　　　AWS Top Engineer Cloud Architect Sapporo 189 cm → 2018 年に 未経験からスタート 2022 年にVOD とEC を 開発運用スタート
3. 秋田出身です！ ついに地元・秋田に帰ってきました！！
4. JAWS-UG 秋田で登壇できるの とても嬉しいです！
5. 改めまして
6. 「フィニッシャーズ・スマイル」 の開発 と 当 日 運 用 の お 話 jawsugakita ＃
7. 現地からの動画配信を実施するときの 気をつける点なんかも触れつつ 動画配信する中でのAWSの使い方 また、AWSのサービスを使って 付加価値をどう実現していきますか
8. jawsugakita ＃
9. 実行委員でもある 野口さんからご依頼
10. 実行委員でもある 野口さんからご依頼
11. コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
12. コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
13. 大会の進行に 合わせて簡単 に移動ができ るスマートフ ォンでライブ 配信
14. 配信用PCの画面 をキャプチャして OBSの入力とし て使用する
15. 各配信用PCで 移したい箇所を 全画面表示して もらう PC上で他の画 面も見ながら映 像も横で見れる ように縦長に並 べる
16. PC上で他の画面も見ながら映像も 横で見れるようにプレイヤーを縦長に並べると便利 chrome1 chrome2
17. Amazon Interactive Video Service Amazon Simple Storage Service (Amazon S3) AWS Amplify Larix Broadcaster: Live Stream OBS スマホ PC AWS スマホの映像をRTMP で飛ばす 他のプロトコルにも対応 ※ 無料版は配信時間に制限あり スイッチャー/ ミキサー 配信と収録ができる OSS デスクトップアプリ RTMP を受けて、配信できる 利点：低レイテンシー 　　　観測できるようになる 静的なWeb サイトをデプロイして 公開する一番簡単な方法 ライブ配信基本セット 今はAmplify が推奨されている フロントエンド 動画プレイヤー デファクトスタンダートOSS 一旦これ使いましょう
18. Amazon Interactive Video Service Amazon CloudWatch Alarm AWS AppSync Events WebSocket オブザーバビリティ モバイル通信 不安定になる 配信運用を考えると １つの画面で全て判 断したい 将来拡張
19. コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
20. jawsugakita ＃
21. 実物を見ていただきましょう https://finishers-smile.net/tritakamatsu2025/timeline
23. Amazon Rekognition
24. Amazon Rekognition DEMO
25. Amazon Rekognition Amazon Rekognition image Amazon Rekognition video 最終が静止画なので 静止画を採用
26. Amazon EventBridge アーキテクチャ
27. アーキテクチャ 配信用にも 分岐してる Amazon EventBridge
28. アーキテクチャ Amazon EventBridge ３つのパートに分けて 何やってるのかを説明していきます
29. 映像入力と静止画切り出し カメラからPCにキャプチャした映像を OBSを使用してAWSに向けて映像を アップロード RTMPで受け取った映像を MediaLiveのチャンネルで受ける EC2上で動いているGStreamer か ら、KVSが受け取れるHTTPSへ変換 LambdaにてKVSの映像から 　1秒間に2枚ずつ静止画を生成しS3バ ケットへ保存 Amazon EventBridge
30. Amazon EventBridge rekognitionと画像処理 映像から切り出した静止画からRekognitionの顔 検出機能を使用し1人1枚の顔写真にして保存する フレーム画像から顔を検出 検出された顔の数だけ下記の処理を行う 検出された顔の笑顔スコアと顔スコアを計算 似ている顔画像同士を同一人物としてグルー ピング 検出された顔と類似した顔を検索する。 類似した顔があれば、検出された顔を類 似した顔の所属する人物のグループに紐 付ける。 類似した顔がなければ、新たな人物のグ ループを作成する。 下記の値から算出した顔スコアを元に、人物 のグループの中でもっとも写りの良い写真を タイムラインに表示する。 顔のサイズ（画素数） 向き 信頼度 笑顔度 こう 切り抜く
31. 表示部分 画像処理部のによってDynamoDBに保存したデータから、 Webページの表示に必要なデータをJSON形式で作成 上記JSON形式のデータをAmplifyにて構築したWebペー ジで表示 顔画像についてはオリジンサーバーをS3としCDNとして CloudFront経由してWebへ配信
32. Amazon Rekognition パラメータの調整
33. かなり画角揃えられた
34. rekognitionと画像処理 クライアントのイメージに近づける Rekognitionの推奨値に合わせる カメラをできるだけ正面に設置する
35. クライアントのイメージに近づける 共通言語のすり合わせから どれくらいの画角なのかをパラメータ として決めないと出力ができない
36. クライアントのイメージに近づける WSとKSの間くらい バンザイしても映るくらい
37. Rekognitionの推奨値に合わせる カメラセットアップの推奨事項 1920x1080の全体画像のうち顔のサイズ は50x50以上が最小値 顔の向き PITCH 30度未満 ROLE 制限なし 45度以下 https://docs.aws.amazon.com/ja_jp/rekognition/latest/dg/recommendations-camera-image-video.html ドキュメントにちゃんと書いてあります
38. カメラをできるだけ正面に設置する カメラ設置位置
39. かなり画角にムラなく出力させることができた
40. 当日の事件
41. 順調に１時間くらい過ぎたあたりで 私はタイムラインを見ながら カメラの微調整をしていました
43. 新しい顔が来ない！！
44. 15分後 原因判明
45. さて、何が悪かったでしょうか
46. アーキテクチャを眺めてみよう ヒント： 最初のゴールから１時間が経過し 次々とゴールする人が増えてきた
47. 正解は
48. Amazon DynamoDB キャパシティモードが プロビジョニングモードに オンデマンドモードに変更して解決 SQSのキューが再び流れでデータ損 失ゼロ 読み込みのスロットリングを確認
49. Amazon DynamoDB プロビジョンドキャパシティモード Read Capacity Unit Wright Capacity Unit をそれぞれ設定してあげる必要がある プロビジョンドキャパシティモードからオンデマンドキャパシティモードに切り替えると、 DynamoDB は、テーブルやパーティションの構造にいくつかの変更を行います。この処理に は数分かかることもあります。 切り替え期間中、テーブルは以前にプロビジョニングされた書き込みキャパシティーユニットお よび読み込みキャパシティーユニットの両方と整合性のあるスループットを提供します。 オンデマンドキャパシティモード ある範囲で自動的に動いてくれる 切り替えても大丈夫なことは何かで見て知ってた
50. 反省 ちゃんと負荷試験をすること 観測できる状態を整えておくこと
51. 今後の展望
52. 次のイメージ ビジネス化していきたい 付加価値もっと出していきたい 高解像度化 動画化
53. サーバレスのいいところ 簡単に追加機能が生やせる
54. 自動的に動画の切り出しができないか
55. 来年乞うご期待
56. ONE MORE THING...
57. ヘプタゴンの谷口が金沢で Deep Dive します！