AWSとSaaSを駆使して自分用に社内向けの動画ファイルを検索して視聴するアプリを作ってみた

AWSとSaaSの仕事に関わっていたので、両方を使ったアプリを一つぐらい作ってみるかとふと思ったので実際に着手してみました。

構成

至ってシンプルな内容で、

• 認証、認可
• 動画アップロード(API経由)
• 検索(API経由)
• 動画再生(API経由)

Webアプリの機能を大きく分けるとこの４つです。

全体アーキテクチャはこんな感じになりました。

アプリのフロントはVue.jsを使って作成し、S3に保存、CloudFront経由で配信するようにしています。

各機能について

認証、認可

おなじみのAuth0を使った認証を組み込んでみました。 全てのページで認証が必要なようにしています。

Auth0で発行されたアクセストークンは、Webアプリから使用するAPIへの認証にも使っています。 登録ユーザーに認可情報をセットしてアクセスできるAPIを制限しています(API GatewayのJWT Authorizerと共に) 。

Auth0上のアプリケーションは２つで、一つはSPA用

もう一つはAPI Gatewayとの接続に用意したM2M用

WebアプリのConnectionはGoogleのソーシャル接続です。 所属している組織の内部ユーザーのみが認証可能にする設定をGoogle側で行ってClient IDとSecretを発行しました。

社内公開するならGoogle Workspace接続にしたいなと思ってます。

動画アップロード

API前提として、認証されたユーザーにアップロード権限がついていないとアップロードできない仕組みにしました。

1. アップロード用バケットの署名付きURLを取得するAPIを実行
2. 返却されたURLに直接ファイルをアップロードする

という流れにしてみました。

アップロードファイルですが、

• 動画ファイル
• 設定ファイル(Json)

これをzipでくれ　形式にしてます。

Jsonの例

{ "lang": "en-US", "title": "勉強会の動画", "tags":["#AWS","#勉強会"] }

後述しますが、動画ファイルから字幕を作るために lang, メタデータとしてtitle,tag を指定するようにしました。 メタデータはDyanamoDBに保存します。

登録フォームを作るのがめんどくさかったのです

アップロードが終わった後は、S3のPutイベントからLambdaをキックして色々と後処理を行っています。

Step Functionsを使用してLambdaを実行しています。内容は、

• 動画のメタデータをDynamoDBに保存
• MediaConvertを使って再生用のHLSファイル、サムネイルを作成
• Amazon Transcribeを使用して動画音声をテキスト化
• テキスト化されたファイルから再生プレイヤーで使用できる字幕ファイルを生成(vtt)

字幕ファイルは日本語と英語の２つを作成しています(精度は察して)。

Lambdaでzipファイルを解凍してしまっているので、大きいファイルだとtmp領域が足りないという課題があります。

検索

検索は

• 過去１週間以内にアップロードされた動画一覧
• タグ(Algoria)
• タイトル(Algoria)
• 動画単体の取得

を用意してみました。

タグとタイトルは全文検索してみようと思い、Algoliaというサービスを使って検索インデックスを作成しています。

これは動画のアップロード処理の時にDyanamoDBにデータがPutされた後、DynamoDB Streamを利用してAligoliaのAPIを実行してインデックス作成しています。

動画の一覧、単体取得はパーティションキー、ソートキーを使ってDynamoDBから直接Getしています。

全文検索した結果画面;

よくある検索画面で、サムネイル,タイトル、タグ、動画の長さなどを出力してます。

動画再生

再生プレイヤーにおなじみのTHEOPlayerを利用しています.

APIで動画情報は取得し、再生用URLをTHEOPlayerにセットします。

動画の配信はCloudFrontを通しています.

画面:

配信は署名付きURLを使ったプライベートコンテンツにするということが課題として残ってます。

まとめ

Vue.jsを使ったSPAの作成は初めてでかなり苦戦していましたが、ドキュメントやGoogle先生に助けてもらいながらなんとか動くようにはなりました。 課題はたくさんありますが、良い勉強になりました。

いろいろなSaaSや機能を組み込んで実験することも計画しています。

• 動画の字幕ファイルやタグ生成,配信はCloudinaryを使ったり
• API GatewayをKongに変えてみたり
• フロントをnetlifyにしてみたり
• Live配信を組み込んでみたり
• Chatつけたり

とか