🎉

動画サービスを作ったのでどうやって作ったのか公開する

2021/09/05に公開

個人開発

動画配信

tech

Chrome Extensionから録画・録音することで動画を簡単に作成・共有できるサービスを個人で作りました。Webサービスの説明・外注先の納品物のチェックなど文字で説明するよりもサクッと録画して共有するのに便利なサービスです。

https://twostream.net/

この記事ではどうのような技術を使ってこの動画サービスを公開したのか説明していきます。

使用した技術

サーバーサイド

項目	技術
言語	Kotlin
フレームワーク	Spring Boot
DB	PostreSQL
インフラ	Herok & AWS

フロントエンド

項目	技術
言語	TypeScript
フレームワーク	React
状態管理	Redux & Redux Toolkit

その他

項目	技術
通信	GraphQL

細かいライブラリを除くと以上の技術を採用しました。動画サービスだから採用したというのは基本的には無いです。ただ、サーバーサイドの言語はSDKが豊富に用意されているJVM言語の中から選ぼうと考えていて結果的にJavaと連携しやすいKotlinを採用しました。また普段自分はiOSのSwiftを書いているので似ている言語である、Kotlinの学習コストは低かったです。

フレームワークに関してはSpring BootとKtorで悩みました。ただ、GraphQLの相性を考えるとSpring Bootの方が情報がありました。また1人で開発するのでフルスタックのフレームワークを採用した方が速度が上がりやすいかなと。

ただ今回は動画配信周りについて書いていくので内容を割愛します。

ライブ配信・オンデマンド配信とは

ライブ配信とオンデマンド配信の違いについて書いていきます。なぜわざわざ違いを書くのかというとこの2つは似ているようで全然扱う技術が違うからです。
まずライブ配信というのはそのままの意味でリアルタイムで映像を配信することです。身近な例で言うとYoutubeのLive配信です。
オンデマンド配信は普通の事前に収録した動画を配信することです。

まとめると以下になります

またライブ配信にも以下のパターンがあります。下にいくにつれて考慮する内容が多く、技術的にも難しくなっていきます。

ライブ配信が大変なのは遅延周りの問題でしょう。配信が遅延している場合リスナーと配信者の双方向のスムーズなコミュニケーションが難しいからです。この辺はサーバーサイドの配信周りも難しいのですが、経験上クライアント側の実装も考慮する内容が多かったです。

Twostreamはライブ配信機能はなく、オンデマンド配信のみなっています。

配信までの流れ

動画アップロードから配信準備までの流れは以下になります。Twostreamの録画はChreome Extensionしているので、ここが起点になります。

画像アップロードの流れ

まずChrome Extensionから動画メタデータをS3に直接アップロードしています。直接アップロードしている理由は動画はサイズが大きのでアプリケーションサーバーを経由すると負担が大きからです。
アップロード完了をHookにLambdaが実行されて、動画のエンコード処理が始まります。動画を配信用のHLSファイルにするためです。
HLSファイルは別のS3のバケットにアップロードされます。そしてこのS3のバケットをoriginに指定してCloud Frontから実際のユーザーに対して配信を行います。

実際の処理のフローは結構簡単ですが、認証処理などセキュリティについても考慮が必要なので大変でした。

苦労した点

動画についての知識が少ない

実際に動画配信の部分を作るのは初めてだったので動画の基礎知識が不足していることが最初は大変でした。例えばデコードも何故しなければいけないのかというところからでした。
また学習が難しかったのが、体系的な資料というのは無いので調べた内容をつなぎ合わせて進めました。
例えば、ffmpegのコマンドについては以下の記事を参考にして調べました！

古いですが動画の基礎知識について以下の本が役に立ちました

マルチドメイン・ワイルドカードでの動画配信

実はTwostreamはマルチドメイン・ワイルドカードの設定をしています。つまりユーザー(チーム)ごとにサブドメインで環境を分けています。そしてことマルチドメインと動画配信の組み合わせ事例が見つからなかったので、自分で試行錯誤しながら構築しました。
具体的には署名付きCookieやCORSの対応です。この辺の設定に悪戦苦闘して当初はGCPに構築予定だったのをAWSに切り替えたためより時間がかかりました。

署名付きCookieの話はここを参考にしました

まとめ

動画に関する知見は分散していますが探せばちゃんとあります。
ただ、最初から知識が十分にない場合はプロトタイプを作り検証しながら進んでいくのが遠回りに見えても確実です。