VODのストリーミング配信を実装（AWS無し.ver）

2021年1月16日 02:28

-まえがき-

※↑noteの連載で達成することはこちらから

【このnoteを読むメリット】
・ストリーミング配信の実装方法が分かる（AWS無し.ver）

AWSでのストリーミング配信を実装する前に、基本を押さえておくために、AWS無しでのストリーミング配信の実装をやっていきます。

AWSでの配信を実現させるために、以下の流れで進めていきます。
①配信技術の基礎的なこと
https://note.com/wwdaisukeee/n/n2b8d24c2795e
↓
②ストリーミング配信の実装（AWS無し）←このnote記事
↓
③ストリーミング配信の実装（AWS）

配信にはVOD配信（ビデオオンデマンド配信）とライブ配信が大きくわけてありますが、今回はVOD配信の実装についてやっていこうと思います。

ストリーミングを実装

完成形はこちら
https://wwdaisukeee.com/aws/
※プログレッシブダウンロード方式、ストリーミング方式、それぞれを載せています。
プログレッシブダウンロード方式を知りたい方はこちら⇒https://note.com/wwdaisukeee/n/n2b8d24c2795e

以下の手順でストリーミングの実装を進めていきます。

ライブ配信-手順

①HLS形式への変換について
mp4などの動画の形式をHLSに変換する処理を行っていきます。
Appleが配布している以下のツールを使っていきます。
https://developer.apple.com/streaming/

↓ツールの説明で大部分を取りそうなので、割愛します。（以下を参照させていただきました）※コマンドラインでの操作が必要です。理解するまで時間かかります。
https://qiita.com/makotok7/items/bbcd24ab7b00adf8cc92

②コーディング
前の工程でHLSに変換したデータが完成したので、それをサイトに配置するためにコーディングを行っていきます。

さっきの変換で、上のようにm3u8ファイルと tsファイルを作ることが出来ました。（m3u8、tsについては前回のnoteを参照）
tsファイルは細切れにした動画ファイルで、m3u8はそれに指示を与えているというイメージです。（※tsは細切れなので複数ある）
https://developer.apple.com/streaming/

これらのファイルをまず配置していきます。
以下のようなファイル配置です。
index.html
video/
　– AWS.m3u8
　– media-0.ts
　– media-1.ts

ビデオファイルを配置したので、実際にブラウザに表示するためのindex.htmlを扱っていきます。

完成形の状態のhtmlファイルを以下に表示します。
https://wwdaisukeee.com/aws/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<h2>▽ストリーミング配信▽</h2>
<!-- safariでのビデオ表示 -->
<video src="video_streaming/AWS_1.m3u8" class="safari-video js-safari" controls></video>

<!-- hls.jsでビデオ表示 -->
<video id="video" controls></video>

<!-- hls.jsの記述 -->
<script>
  if (Hls.isSupported()) {
   var video = document.getElementById("video");
   var hls = new Hls();
   hls.loadSource("video_streaming/AWS_1.m3u8");
   hls.attachMedia(video);
 }
</script>
</body>
</html>

後半にhls.jsの記述があるのですが、これはそのままのhls形式が対応していないブラウザがあるため、その対策のためのjavascript、「hls.js」を記載しています。

ここで注意することは、safariではhls.jsでの表示ができないので、safariはjsでブラウザ判定して、m3u8のファイルを直接読む必要があります。

<!-- safariでのビデオ表示 -->
<video src="video_streaming/AWS_1.m3u8" class="safari-video js-safari" controls></video>

③webサーバーへアップ
最後に以下の構成のファイルをwebサーバーにアップすることで、デモサイトのような形で表示されます。
index.html
video/
　– AWS.m3u8
　– media-0.ts
　– media-1.ts

【デモサイト】
https://wwdaisukeee.com/aws/

次回はライブ配信の方法、AWSでのストリーミング配信を行っていきます。

この記事が気に入ったらサポートをしてみませんか？