こんにちは、 rightgo09 です。
今回は、動画やライブの配信サービス Flowplayer の API を使って動画をアップロードしてみました。
(Flowplayer の利用には、必ずクレジットカードの登録とプランの選択が必須のようです)
前提
確認に使った動画
ルクミーフォト(サービス説明)
photo.mp4 (66.8 MB) (1920x1080) (h264)
API 公式ドキュメント
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 を使ってみました。 今後、動画の価値は、いまよりももっと重要なものになってくると思いますので、写真に加え、動画の知識も増やしていきます。