サーバレスでyoutubeのような動画共有サイトを作ろう!

https://note.hiroyuki.com/video/index.html


久しぶりにteratailにて興味が湧く質問がありました。

動画プラットフォームを開発したいが、どうやって開発しているのか分からない


確かに、動画が絡むと難しいです。どこから手を付けていいやら。

iosの場合は動画撮影し拡張子を調べたら.MOVという懐かしいQuickTimeの形式でした。

このままサーバへアップロード出来たとしても、変換しないとAndroidやPCでは見れません。

一番簡単なのは、回答者さんが答えてるように、普通のサーバへ動画をupすることです。

この場合ios用のmp4 Android用のWebM、2つ動画を用意するのが一般的なようです。


HTML5のvideoタグで再生する一般的な方法

<video controls>

 <source src="somevideo.webm" type="video/webm">

<source src="somevideo.mp4" type="video/mp4">

</video>

ちょっと大変ですね。

追記:

手動変換にてHTML5でサンプル作りました。

firebaseのHostingにて静的コンテンツ配信



でも、時代がホントいい時代で簡単に動画を使ったサイトが構築できます。

Amazon Elastic Transcoderなら動画変換が簡単に低コストでできます。

しかも、工夫をすればサーバレスで全自動でyoutubeのような動画共有サイトもできます。

(変換形式のプリセットも多数用意されているので普通の変換ソフトの様に簡単です。

僕が好んで使うHLS形式で且つ、デバイスの回線速度に応じた画質も切り替えできるプリセットもあります。)

HLSとは

http://twitcasting.tv/などLIVE配信で使われる.m3u8というストリーミングに適したものです。

(FFMPEGでもhls変換できます。こちらのシェルスクリプトが便利です。

https://github.com/bentasker/HLS-Stream-Creator)



参考にしたサイト:

動画をAWS S3にアップロードしたら自動でAmazon Elastic Transcoderでエンコードしながらサムネイルを作成する


qiitaのページを参考にやってみました。

AWSに詳しくない方は何がなんだかわからないかもしれませんが、

S3というクラウドストレージサービスがあります。

そこへ動画をアップロードすると自動で動画変換し、S3の指定バケットへ保存してくれる

というのがqiitaに書かれている内容です。


僕のhttp://note.hiroyuki.com/video/index.htmlは今回ベタなHTMLでサンプルとして

作ってみただけですが、S3のオブジェクト(ファイルの一覧)を取得して動画ファイル名で

アクセスさせればJavaScriptにて動的にアクセスできるので本物のサーバレスができます。

index.html?video=001.mp4

のようにアクセス可能ですし、rioit.jsなどでルーティングさせてもいいかもしれません。

(S3の静的ホスティングなのでサーバレスです。10円/月です。 動画の転送量は除く)


以前紹介した

youtubeのような動画共有サイトが構築できる「youPHPtube」

がFFMPEGにて変換している部分がAmazon Elastic Transcoderに置き換わっただけなので

公式SDKを使用してRoRやPHPからもアップロード、一覧表示が可能です。


マイクロソフトのazureにも同じようなサービスがあります。

Media Services


動画プレイヤーはいつものvideo.js+VideoJS HLSを使いました。


動画の配信形式はHLSです。


HTMLのテンプレートはこちらを使わせて頂きました。

https://templated.co/broadcast


Amazon Elastic TranscoderはHLSの暗号化(DRMとは違う)もでき、

最近注目のMPEG-DASHにもプリセットが対応しています。

youtubeのインフラタダ乗りは禁止、つまり商用の会員制サイトなどには使えません。

(アフィリエイトだらけでyoutube動画を貼りまくり客寄せパンダ的に使うサイトもNG)


動画学習サイト、ドットインストールは当初youtube動画でしたが、現在はvimeo.com

商用有料プランのようです。流石、百式さん素早い対応ですね。

また、youtubeで広告が入ってしうとまずい場合もありますね、行政とか民間でもライバル会社のCMがながれたらまずですね。


そんな時、気軽に使えるAmazon Elastic Transcoderは勧めです。暗号化でDownloadもある程度阻止できるし。