概要

ここでは動画のアップロード、表示の方法を記載しています

動画アップロード

overview

  1. "ファイルアップロード先URL"、"完了通知URL"を取得する

  2. "ファイルアップロード先URL"へファイルをアップロードする

  3. "完了通知URL"へ完了通知を送る

  4. (必要があれば)アップロードしたファイルの変換が終わるまでモニタリングする

  5. 1 で取得したURLで動画を表示する

title Resizingへ動画をアップロードする
autonumber

actor User
participant Browser
participant YourWebServer
participant Resizing
database S3

User -> Browser:アップロードするファイルを選択する

group アップロード先のURLを取得する
  Browser -> YourWebServer:prepare
  YourWebServer -> Resizing:prepare
  YourWebServer <-- Resizing:return\n{\n  upload_completed_url: ...,\n  s3_presigned_url: ...,\n...\n\n}\n in returing JSON
  Browser <-- YourWebServer:return upload_completed_url, s3_presigned_url
end

group prepareで取得したs3_presigned_urlへファイルをアップロードする
  Browser -> S3:upload video to s3_presigned_url
  Browser <-- S3
end

group アップロードが完了したらprepareで取得したupload_completed_urlへ完了通知を送信する
  Browser -> Resizing:post completion to upload_completed_url
  Browser <-- Resizing
end

group Check video state if needed
  Browser -> Resizing:check video state to complete converting
  Browser <-- Resizing
end

group Check video state if needed
  Browser -> Resizing:get video url(m3u8,mp4,mov....)
  Browser -> Browser:render video tag
end

アップロード先URLの取得

curl -XPOST 'https://img.resizing.net/projects/f11dfad4-2247-4220-b3b2-efeb82864a97/upload/videos/prepare' -d '{"filename": "sample.mp4"}'

response

{
    "id": "058fcd6f-01c4-4cf4-9d2f-21a69c8f215b",
    "project_id": "f11dfad4-2247-4220-b3b2-efeb82864a97",
    "state": "initialized",
    "source_uri": "s3://resizing-bucket-development-video/videos/uploading/f11dfad4-2247-4220-b3b2-efeb82864a97/058fcd6f-01c4-4cf4-9d2f-21a69c8f215b/sample.mp4",
    "deleted_at": null,
    "s3_presigned_url": "https://resizing-bucket-development-video.s3.ap-northeast-1.amazonaws.com/videos/uploading/f11dfad4-2247-4220-b3b2-efeb82864a97/058fcd6f-01c4-4cf4-9d2f-21a69c8f215b/sample.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAXXXXXX%2F20210115%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20210115T065345Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=f9a2a8c43e..",
    "converted_uri": null,
    "created_at": "2021-01-15T06:53:45.428Z",
    "updated_at": "2021-01-15T06:53:45.428Z",
    "upload_completed_url": "https://img.resizing.net/projects/f11dfad4-2247-4220-b3b2-efeb82864a97/upload/videos/058fcd6f-01c4-4cf4-9d2f-21a69c8f215b/upload_completed",
    "job_state": null,
    "self_url": "http://192.168.56.101:5000/projects/f11dfad4-2247-4220-b3b2-efeb82864a97/upload/videos/058fcd6f-01c4-4cf4-9d2f-21a69c8f215b.json"
}

アップロードする ↑のs3_presigned_urlへPUTする。

curl -XPUT 'https://https://resizing-bucket-development-video.s3.ap-northeast-1.amazonaws.com/videos/uploading/f11dfad4-2247-4220-b3b2-efeb82864a97/058fcd6f-01c4-4cf4-9d2f-21a69c8f215b/sample.mp4?X-Amz-Algorithm=..' s3_presigned_url