Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
「フィニッシャーズ・スマイル」の開発と当日運用のお話
Search
Kazuki Miura
PRO
September 06, 2025
Technology
2
65
「フィニッシャーズ・スマイル」の開発と当日運用のお話
https://jaws-tohoku.connpass.com/event/352957/
#jawsug #jawsugtohoku #jawsugakita
Kazuki Miura
PRO
September 06, 2025
Tweet
Share
More Decks by Kazuki Miura
See All by Kazuki Miura
地方だからできた! 東北でのAWS事例を一挙紹介!#地方だからできる
miu_crescent
PRO
0
13
APIからデータベースまで、全てサーバレスで作ってみよう!
miu_crescent
PRO
0
7
AWS Systems Manager Incident Manager 使い所を考えてみた
miu_crescent
PRO
0
20
「入門 OpenTelemetry」 入門
miu_crescent
PRO
1
70
AZ 名とAZ ID の違いを 何度でも言うよ
miu_crescent
PRO
1
230
AWS Step Functions で マネコンとCDKの二刀流!
miu_crescent
PRO
1
58
AWS MediaServices の概要と活用事例
miu_crescent
PRO
2
110
ワイキキサークルホテルとその過ごし方
miu_crescent
PRO
1
290
私のawsの学び方、社外へ飛び出そう
miu_crescent
PRO
1
140
Other Decks in Technology
See All in Technology
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
130
データエンジニアがこの先生きのこるには...?
10xinc
0
400
バイブコーディングと継続的デプロイメント
nwiizo
2
340
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.3k
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
530
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
890
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
430
Pure Goで体験するWasmの未来
askua
1
150
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
810
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
620
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
280
Featured
See All Featured
Side Projects
sachag
455
43k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Visualization
eitanlees
148
16k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
KATA
mclloyd
32
14k
Why Our Code Smells
bkeepers
PRO
339
57k
Context Engineering - Making Every Token Count
addyosmani
3
140
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
840
Transcript
「フィニッシャーズ・スマイル」 の開発 と 当 日 運 用 の お 話
jawsugakita #
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 を 開発運用スタート
秋田出身です! ついに地元・秋田に帰ってきました!!
JAWS-UG 秋田で登壇できるの とても嬉しいです!
改めまして
「フィニッシャーズ・スマイル」 の開発 と 当 日 運 用 の お 話
jawsugakita #
現地からの動画配信を実施するときの 気をつける点なんかも触れつつ 動画配信する中でのAWSの使い方 また、AWSのサービスを使って 付加価値をどう実現していきますか
jawsugakita #
実行委員でもある 野口さんからご依頼
実行委員でもある 野口さんからご依頼
コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
大会の進行に 合わせて簡単 に移動ができ るスマートフ ォンでライブ 配信
配信用PCの画面 をキャプチャして OBSの入力とし て使用する
各配信用PCで 移したい箇所を 全画面表示して もらう PC上で他の画 面も見ながら映 像も横で見れる ように縦長に並 べる
PC上で他の画面も見ながら映像も 横で見れるようにプレイヤーを縦長に並べると便利 chrome1 chrome2
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 一旦これ使いましょう
Amazon Interactive Video Service Amazon CloudWatch Alarm AWS AppSync Events
WebSocket オブザーバビリティ モバイル通信 不安定になる 配信運用を考えると 1つの画面で全て判 断したい 将来拡張
コースの各地からの映像をYouTube に向けてスイッチする環境の構築 ゴールでフィニッシュした時の 笑顔を集めるWebサービス 「フィニッシャーズ・スマイル」の構築 今回のご依頼内容
jawsugakita #
実物を見ていただきましょう https://finishers-smile.net/tritakamatsu2025/timeline
None
Amazon Rekognition
Amazon Rekognition DEMO
Amazon Rekognition Amazon Rekognition image Amazon Rekognition video 最終が静止画なので 静止画を採用
Amazon EventBridge アーキテクチャ
アーキテクチャ 配信用にも 分岐してる Amazon EventBridge
アーキテクチャ Amazon EventBridge 3つのパートに分けて 何やってるのかを説明していきます
映像入力と静止画切り出し カメラからPCにキャプチャした映像を OBSを使用してAWSに向けて映像を アップロード RTMPで受け取った映像を MediaLiveのチャンネルで受ける EC2上で動いているGStreamer か ら、KVSが受け取れるHTTPSへ変換 LambdaにてKVSの映像から
1秒間に2枚ずつ静止画を生成しS3バ ケットへ保存 Amazon EventBridge
Amazon EventBridge rekognitionと画像処理 映像から切り出した静止画からRekognitionの顔 検出機能を使用し1人1枚の顔写真にして保存する フレーム画像から顔を検出 検出された顔の数だけ下記の処理を行う 検出された顔の笑顔スコアと顔スコアを計算 似ている顔画像同士を同一人物としてグルー ピング
検出された顔と類似した顔を検索する。 類似した顔があれば、検出された顔を類 似した顔の所属する人物のグループに紐 付ける。 類似した顔がなければ、新たな人物のグ ループを作成する。 下記の値から算出した顔スコアを元に、人物 のグループの中でもっとも写りの良い写真を タイムラインに表示する。 顔のサイズ(画素数) 向き 信頼度 笑顔度 こう 切り抜く
表示部分 画像処理部のによってDynamoDBに保存したデータから、 Webページの表示に必要なデータをJSON形式で作成 上記JSON形式のデータをAmplifyにて構築したWebペー ジで表示 顔画像についてはオリジンサーバーをS3としCDNとして CloudFront経由してWebへ配信
Amazon Rekognition パラメータの調整
かなり画角揃えられた
rekognitionと画像処理 クライアントのイメージに近づける Rekognitionの推奨値に合わせる カメラをできるだけ正面に設置する
クライアントのイメージに近づける 共通言語のすり合わせから どれくらいの画角なのかをパラメータ として決めないと出力ができない
クライアントのイメージに近づける WSとKSの間くらい バンザイしても映るくらい
Rekognitionの推奨値に合わせる カメラセットアップの推奨事項 1920x1080の全体画像のうち顔のサイズ は50x50以上が最小値 顔の向き PITCH 30度未満 ROLE 制限なし 45度以下
https://docs.aws.amazon.com/ja_jp/rekognition/latest/dg/recommendations-camera-image-video.html ドキュメントにちゃんと書いてあります
カメラをできるだけ正面に設置する カメラ設置位置
かなり画角にムラなく出力させることができた
当日の事件
順調に1時間くらい過ぎたあたりで 私はタイムラインを見ながら カメラの微調整をしていました
None
新しい顔が来ない!!
15分後 原因判明
さて、何が悪かったでしょうか
アーキテクチャを眺めてみよう ヒント: 最初のゴールから1時間が経過し 次々とゴールする人が増えてきた
正解は
Amazon DynamoDB キャパシティモードが プロビジョニングモードに オンデマンドモードに変更して解決 SQSのキューが再び流れでデータ損 失ゼロ 読み込みのスロットリングを確認
Amazon DynamoDB プロビジョンドキャパシティモード Read Capacity Unit Wright Capacity Unit をそれぞれ設定してあげる必要がある
プロビジョンドキャパシティモードからオンデマンドキャパシティモードに切り替えると、 DynamoDB は、テーブルやパーティションの構造にいくつかの変更を行います。この処理に は数分かかることもあります。 切り替え期間中、テーブルは以前にプロビジョニングされた書き込みキャパシティーユニットお よび読み込みキャパシティーユニットの両方と整合性のあるスループットを提供します。 オンデマンドキャパシティモード ある範囲で自動的に動いてくれる 切り替えても大丈夫なことは何かで見て知ってた
反省 ちゃんと負荷試験をすること 観測できる状態を整えておくこと
今後の展望
次のイメージ ビジネス化していきたい 付加価値もっと出していきたい 高解像度化 動画化
サーバレスのいいところ 簡単に追加機能が生やせる
自動的に動画の切り出しができないか
来年乞うご期待
ONE MORE THING...
ヘプタゴンの谷口が金沢で Deep Dive します!