ライブ配信ってどうやってやってるの？ 最小構成でライブ配信を体験する

これは何？

ライブ配信ってどのように行われているのかという人（主にエンジニアに向けて）、最小限の構成でライブ配信を体験することで、ライブ配信の基礎についてしってもらうことを目的にしています。

この記事を読むことでライブ配信の基礎を学ぶことができます。

配信構成

用語の整理

Encoder

エンコーダはカメラ映像や音声をインターネット伝送に適した形式やビットレートに変換してくれるもの。

そもそもなぜエンコーダを利用するのかというと、動画をweb上で配信しようとすると、データ量が大きすぎるためそのままだと再生が困難で、ある程度データを圧縮する必要がある。

RTMP(Real Time Messaging Protocol)

音声・動画・データをやりとりするストリーミングのプロトコル。

LIVE配信では映像ソースをエンコーダを通して、ストリーミングサーバーにアップロードする必要です。

映像ソースをストリーミングサーバーにアップロードする際に利用されるプロトコルとしてRTMPが利用します。

「映像をRTMPで打ち上げる」といった言い方をよくされます。

HLS(Http Live Streaming)

hlsはappleが開発した配信規格で、httpで動画配信が可能です。

httpのプロトコルで動画配信が可能なため、専用のサーバを用意する必要がないのが特徴です。

m3u8, tsファイルを利用して配信が行われています。

m3u8

HLS配信で利用するプレイリストファイル（どの動画ファイルを再生するかを記述したファイル）のことです。

m3u8ファイルには、動画が細切れに分割されたファイル(tsファイル)のURLが記載されています。

これを動画プレイヤーがm3u8ファイルに従って、tsファイルを逐次取得することで再生を行っています。

配信を体験する

事前準備

配信を体験する際に以下のツールが必要になります。

• Docker
• Git
• ffmpeg

配信手順

1. ngxin streaming serverの構築

   git clone https://github.com/hgaiji/nginx-rtmp-server.git
   
   docker-compose up -d
   

   http://localhost:8088 にアクセスして Welcom to Nginx!!の文字列が表示されていたらOKです。

2. ffmpegを利用してrtmpで映像を打ち上げる

   ffmpegを利用して、動画映像に配信時間の文字を追加し、rtmpで映像を打ち上げて nginx streming serverにアップロードします。

   ffmpeg -re -stream_loop -1 \
          -i https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 \
          -vf drawtext="fontfile=monofonto.ttf: fontsize=30: box=1: boxcolor=black@0.75: boxborderw=5: fontcolor=white: x=(w-text_w)/8: y=((h-text_h)/8): text='streming_time: %{localtime}'" \
          -vcodec libx264 -vprofile baseline -g 30 -acodec aac -strict -2 \
          -f flv rtmp://0.0.0.0/live/test
   

3. 視聴確認
   最後に視聴確認をしてみましょう。

   1. hls js demo で視聴
      1. URL 入力部分にhttp://localhost:8088/hls/sample.m3u8　を入力してApplyボタンをクリックすると配信映像がながれます。
         
   2. m3u8 playerで視聴
      1. URL 入力部分にhttp://localhost:8088/hls/sample.m3u8　を入力してApplyボタンをクリックすると配信映像がながれます。
         

その他

m3u8ファイルの中身確認

curl http://localhost:8088/hls/test.m3u8

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:21
#EXT-X-TARGETDURATION:12
#EXTINF:12.000,
test-21.ts
#EXTINF:12.000,
test-22.ts
#EXTINF:12.000,
test-23.ts

さいごに

今回は、最小構成でライブ配信を行うための手順を紹介しました。

なにかこんなことが知りたいなど要望がありましたらどしどしコメントお願いします。

参考

https://qiita.com/yh1224/items/38d4ef1cf768aa3368d6

https://notes.yh1224.com/tech/nginx-rtmp-hls/