ユニファ開発者ブログ

ユニファ株式会社システム開発部メンバーによるブログです。

Flowplayer の API を使って動画をアップロードしてみた

こんにちは、 rightgo09 です。

今回は、動画やライブの配信サービス Flowplayer の API を使って動画をアップロードしてみました。

(Flowplayer の利用には、必ずクレジットカードの登録とプランの選択が必須のようです)

前提

確認に使った動画

ルクミーフォト(サービス説明)

www.youtube.com

photo.mp4 (66.8 MB) (1920x1080) (h264)

API 公式ドキュメント

flowplayer.com

Flowplayer は過去に2回ほど大きな変更があり、そのたびに公式ドキュメントページが変わっていましたが、現在はこちらが最新版のようです。

API キーの発行

https://flowplayer.com/app/workspace/settings

ログイン後、こちらのページから API キーを発行します。 これとは別に、 Site ID と User ID が必要になるので、控えておきます。

動画をアップロードする

Flowplayer のサイトからブラウザでアップロードすることもできますが、今回は API を使った curl コマンドでアップロードしてみます。

動画 URL を送る方法(割愛)

https://flowplayer.com/help/platform/platform-api/createvideo

動画ファイル本体をアップロードするのではなく、あらかじめ Flowplayer 側からインターネットでアクセス可能な場所に動画を置いておき、その URL を送る方法です。

今回は割愛します。

署名付き URL にアップロードする方法

https://flowplayer.com/help/platform/platform-api/signeduploadurl

直接動画ファイルを送るには、3つのステップを踏む必要があります。

  • API を叩いて、Flowplayer の AWS S3 に直接アップロード可能な署名付き URL を取得する
  • その URL に向かって動画ファイルをアップロード
  • アップロードが終わったことを知らせる API を叩く

署名付き URL を取得

$ \curl -X POST \
    -H "Content-Type: application/json" \
    -d '{
        "api_key":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        "site_id":"yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy",
        "user_id":"zzzzzzzz-zzzz-zzzz-zzzz-zzzzzzzzzzzz",
        "name":"Lookme Photo Service"
    }' \
    https://api.flowplayer.com/ovp/web/video/v2/signed-upload-url
{"signed_video_url":"https://fp-web-eu-w1-1.s3-accelerate.amazonaws.com/...(長いURL)","video_id":"vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv"}

signed_video_url は S3 の署名付き URL です。X-Amz-Expires を見ると、24時間だけ有効な URL となっていることがわかりました。

動画ファイルをアップロード

$ \curl -X PUT \
    --upload-file ./photo.mp4 \
    "https://fp-web-eu-w1-1.s3-accelerate.amazonaws.com/...(長いURL)"

アップロードが終わったことを知らせる API を叩く

$ \curl -X POST \
    -H "Content-Type: application/json" \
    -d '{
        "api_key":"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        "id":"vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv"
    }' \
    https://api.flowplayer.com/ovp/web/video/v2/signed-upload-complete
{"success":true,"message":"encoding started"}

アップロードした動画の情報を取得する

https://flowplayer.com/help/platform/platform-api/getvideo

JSON と XML のどちらかを選択可能です。

$ \curl "https://api.flowplayer.com/ovp/web/video/v2/vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv.json?api_key=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
{...}

JSON が返ってきます。

"state" が "PROCESSING" だと、まだ変換中で使用できませんが、少し待つと "FINISHED" となります。

"mediafiles" には利用可能なフォーマットがいくつか用意されています。

  "mediafiles": {
    "original_file_url": "https://cdn.flowplayer.com/dddddddd-dddd-dddd-dddd-dddddddddddd/v-vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv_original.mp4",
    "base_url": "",
    "standard_url": "https://cdn.flowplayer.com/dddddddd-dddd-dddd-dddd-dddddddddddd/v-vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv.mp4",
    "high_url": "",
    "m3u8_url": "https://cdn.flowplayer.com/dddddddd-dddd-dddd-dddd-dddddddddddd/hls/vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv/playlist.m3u8",
    "webm_url": ""
  },

変換後の動画

"original_file_url" は、アップロードした動画とまったく同じ動画でした。 "standard_url" は、640x360 まで縮小されて、23.1 MB と、オリジナルの 34 % ほどのサイズとなっていました。

HLS による VOD

"m3u8_url" は、HLS (HTTP Live Streaming) で使用するプレイリストファイルで、中を見ると、

$ \curl https://cdn.flowplayer.com/dddddddd-dddd-dddd-dddd-dddddddddddd/hls/vvvvvvvv-vvvv-vvvv-vvvv-vvvvvvvvvvvv/playlist.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-STREAM-INF:BANDWIDTH=4359246,AVERAGE-BANDWIDTH=3629678,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1920x1080,FRAME-RATE=29.970
playlist_1080.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2225449,AVERAGE-BANDWIDTH=1920546,CODECS="avc1.64001f,mp4a.40.2",RESOLUTION=1280x720,FRAME-RATE=29.970
playlist_720.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1141146,AVERAGE-BANDWIDTH=950364,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,FRAME-RATE=29.970
playlist_360.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=700163,AVERAGE-BANDWIDTH=591344,CODECS="avc1.42c015,mp4a.40.2",RESOLUTION=480x270,FRAME-RATE=29.970
playlist_240.m3u8

となっており、アダプティブストリーミングであることがわかります。

最も解像度が小さい、480x270 のプレイリストを用いて、動画を手元で再結合してみると、約 14.0 MB で、オリジナルの 21 % 程度のサイズとなっていました。

ちなみに、コーデックはすべて H.264 です。

まとめ

Flowplayer の API を使ってみました。 今後、動画の価値は、いまよりももっと重要なものになってくると思いますので、写真に加え、動画の知識も増やしていきます。