1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

動画配信アプリの作り方

Last updated at Posted at 2025-05-14

目的

私が実装した動画配信の仕組みを見ながら、動画配信に必要な基本知識を理解することが目的です。

インフラ構成

  • 以下に今回使用したリソースを挙げます
    • CloudFront
    • S3
    • SNS
    • EventBridge
    • Lambda
    • Cognito
    • Mediaconvert
    • EKS
    • Aurora
  • terraform における具体的なリソース名は、私の CI/CD の結論 v2 を参照してください。

流れ

アップロード

  1. ユーザは cognito にログイン
    1. ユーザはアプリ(EKS)にアクセスし、アプリは SDK を通じて cognito からトークンをもらって、ユーザに返します
  2. ユーザは、先ほどもらったアクセストークンを使って、S3 にアクセスするための identityId, STS トークンを Cognito から取得します
    1. 先ほどと同様に、アプリを介して Cognito にアクセスします
  3. ユーザはアプリに動画作成のリクエストを送ります
    1. もちろん、ここでは動画のメタ情報をアプリDB(Aurora)に登録するだけです
    2. ステータスは started とかにします
    3. 同時に、S3 のアップロードのエンドポイントをもらいます
      1. フロントで S3 のアップロードのエンドポイントを構築してもいいです
  4. ユーザは、STSトークンを使って、S3に直接動画をアップロードします
    1. IAM Policy の設定により、自分のフォルダ(identityId によって判別)以外へのアップロードは禁止されています
    2. 本プロジェクトのフロントは、簡易的な C++ デスクトップアプリで実装したので、SDK For C++ を使いました
      1. TransferManager クラスを使うことで、進捗を把握するためのプログレスバーを実装することができます
  5. S3 へのアップロードが完了したら、ラムダが発火します
    1. ラムダが Mediaconvert にジョブを積みます
  6. Mediaconvert はアップロードされた mp4 や mov を、ストリーミング再生可能な HLS に変換して、S3 に配置します
    1. HLS は、各セグメントのメタデータを保持する m3u8 ファイルと、実際の動画データを持つ ts ファイルから構成されます
  7. EventBridge は、Mediaconvert の状態を60秒ごと(適宜変更可能)に監視しており、SNS に伝えます
    1. Mediaconvert のステータスは、["SUBMITTED", "INPUT_INFORMATION", "PROGRESSING", "STATUS_UPDATE", "COMPLETE", "ERROR", "CANCELED"] のいずれかです
  8. SNS はラムダを発火します
  9. ラムダは internal api を通じて、アプリ(EKS) に、動画(Mediaconvert)のステータスとMediaConvert がアップロードした S3 のエンドポイントを送ります
    1. アプリの動画のステータスが complete とかになっていれば、ユーザがその動画にアクセスできます

動画再生

  1. ユーザはアプリから動画のメタデータを取得します
    1. アプリは S3 のエンドポイントから cloudfront のエンドポイントに変換して、ユーザに返します
    2. 必要に応じて、cloudfront のエンドポイントに署名します
      1. 署名付きURLと署名付きクッキーが選択肢としてありますが、HLSは複数ファイルにアクセスするため、署名付きクッキーが推奨されています
  2. ユーザは、取得した cloudfront のエンドポイントを使って、動画をストリーミング再生します

Youtube

署名付きURL or 署名付きクッキー

上述したように、ストリーミング再生では、複数のセグメントファイルへのアクセスが必要なので、署名付きURLではなくて署名付きクッキーが一般的に推奨されている。
しかし、Youtube のネットワークタブを見ると、署名付きクッキーではなくて、署名付きURLが使われていた。おそらく、m3u8 ファイルだけではなくて、全ての ts ファイルのエンドポイントに対しても署名しているのだと思う。m3u8 ファイル上の全ての ts ファイルのエンドポイントを署名付きURLに変更するのは、かなり技術的に難しそう。
ただ、署名付きクッキーが使えない場合は、このように実装するしかないのかもしれない。例えば、C++ の Qt ライブラリや、Unreal Engine の Media Player は、ヘッダーを持たせることができないので、どうしてもアクセスを制限したい場合は、署名付きURLを採用するしかない。
(そもそも、HLS じゃなくて DASH 使っているとか、細かい部分は違うかもしれないが、大まかなイメージはこんな感じだと思う)

アクセス制限

詳しくはわからないが、署名以外にも、正規の方法以外から動画にアクセスできないように工夫しているはず。
例えば、Youtube のネットワークタブからURLを引っ張ってきて、デスクトップアプリで再生しようとしたら、CDN の CORS で弾かれた。
あとは、IPとか...

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?