背景

この記事は AlibabaCloud AdventCalendar 2019 4 日目のエントリとなります。
Alibaba Cloudユーザー会"AliEaters"にてAliEaters東京で発表されたコンテンツを同時開催したAliEaters名古屋でLive配信することとなりました。今後も全国のAliEatersでLive配信を活用できるようノウハウをアーカイブします。
是非、他の勉強会でもLive配信を活用してください。

利用したサービス

-Apsara Video Libe(AVL): Live配信のための総合プラットフォーム
-OSS(Object Strage Service): 配信動画をアーカイブするストレージサービス
-DNS: 今回もAlibaba Cloud DNSではなくお名前.comで

全体構成

スマホを活用した簡易なLive配信を構築します。

手順

1.Apsara Video Liveの設定
2.配信ドメイン名のDNS設定
3.配信URLの発行
4.iPhoneによるrtmpクライアントの準備
5.動画視聴側のWebサーバ、htmlファイル準備
6.実際の配信とモニタリング
7.アーカイブ動画の活用
8.ところで料金は？

1.Apsara Video Liveの設定

コンソール画面からApsara Video Liveのメニューに入って見ます。最初の画面には３ステップの設定手順が記載されてますので、それにしたがって設定してみます。（Alibaba Cloudのコンソールは以外と初心者に親切！）

Step①ドメインの追加

Live配信にはアップストリームとダウンストリームがあり、それぞれにドメイン名を用意する必要があります。アップストリームは、Alibaba Cloudの用意しているCDNと接続され、CDNノードと接続されたあとはAlibaba Cloudの内部ネットワークを使って安定的にApsara Video Live配信サーバに接続されます。
まずはダウンストリームを設定します。サブドメイン名は自由ですがあとでDNSで設定できるものを設定してください。高速化対応リージョンは、中国本土/グローバル/中国本土以外の３種類ですが日本国内ならば中国本土以外で大丈夫です。中国本土以外が料金がもっとも安くなります。

つぎにアップストリームを設定します。

アップとダウンのドメイン名の設定ができるとドメイン名に対応したCNAMEが付与されます。これをドメイン名を管理するDNSサーバに設定します。

ここで、別ドメインサイトのHTMLから配信できるように「HTTP ヘッダーの設定」を行っておきます。（今回はalieaters.comのサイトでないOSSのサイトにhtmlファイルを置いて再生しようとするからです）
livedown.alieaters.comの「ドメイン設定」を選択し、「HTTP ヘッダーの設定」を追加します。今回は「*」としてどのドメインでも再生できるようにしました。

2.配信ドメイン名のDNS設定

アップストリームとダウンストリームのドメイン名とCNAMEを自身の管理するDNSサーバに反映してください。
ここではお名前.comで設定した参考画面を掲載します。下から２つの設定がそうです。

先ほどのドメイン管理画面のアクション-「ドメイン設定」のリンク先画面でDNSでCNAMEが正しく引けているかチェックして反映してくれます。最初はTTLを短くしておくと反映が早いです。あとで3600程度に戻しておきましょう。

3.配信URLの発行

ここまで設定できると配信用URLが発行できます。

ストリーム管理メニューのURLジェネレーターから配信用URL生成していきます。
先ほど設定したドメインを選択します。ダウンロードドメインを選ぶとアップストリーミングが自動的に出てきます。

さらにアプリケーション名、ストリーム名を決めて入力します。この名前はOSSへのアーカイブ録画設定や配信端末のrmtpのURLなどにも利用されてきますので控えて置くといいでしょう。

アップストリーミングURLが、rtmp配信端末からAVLサーバに配信する先のURLです。rtmpの設定に記載することになります。これも控えておきましょう。URL生成し直しするたびに変化します。
ストリーミングURLは視聴者が見る配信用Webサーバのhtml内に記載するURLです。

Chromeなどのブラウザで視聴させる際にはm3u8形式を使います。HLS(HTTP Live Streaming)プロトコルの動画配信技術でストリーミング配信用の形式がm3u8です。WindowsではVLSクライアントがあれば再生できます。

4.iPhoneによるrtmpクライアントの準備(rtmp配信端末）

今回は東京側の発表者を撮影し、そのまま配信する簡単方法を採用しました。iphoneのrtmpアプリを使いました。色々ありますので試してみるといいですね。今回はシンプルな機能のものを利用しました。

アプリの設定画面に、URL生成でできたアップストリーミングURLを入力して配信ボタンを押すだけで配信開始されます。

AliEaters東京当日はこんな感じで撮影していました。

5.動画視聴側のWebサーバ、htmlファイル準備

今度は、視聴側の環境を作ります。Webサーバがあれはそこにhtmlを置けばいいです。今回はOSSの静的Webサーバ機能を利用して以下htmlファイルをOSSにアップして公開設定することで終わらせます。
hls.js Demo

Hls.js demo - basic usage

  <center>
      <h1>AliEaters live  - Apsara Conference 2019 Report!!</h1>
      <video height="600" id="video" controls></video>
  </center>

  <script>
    if(Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      hls.loadSource('http://livedown.alieaters.com/alieaters/tokyo13.m3u8?auth_key=1570815983-0-0-92a52d162026f12756f9bfa6e14269ef');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
   }
   // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
   // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
   // This is using the built-in support of the plain video element, without using hls.js.
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = 'http://livedown.alieaters.com/alieaters/tokyo13.m3u8?auth_key=1570815983-0-0-92a52d162026f12756f9bfa6e14269ef';
      video.addEventListener('canplay',function() {
        video.play();
      });
    }
  </script>

このhtmlはhls.jsのサンプルをそのまま利用しています。
'video.src = 'http://livedown.alieaters.com/alieaters/tokyo13.m3u8?auth_key=1570815983-0-0-92a52d162026f12756f9bfa6e14269ef''
の部分を先ほどのダウンストリームURLで置き換えるだけです。※二箇所ありますのでご注意ください。

OSSにアップロードしたところ。OSSで静的htmlページとして公開設定してください。※公開設定するときに今回はhttpsは利用しない設定にしてください。httpsの証明書を設定している場合にはhttpsを使います。

このURLを開いて見るとシンプルにhlsで動画視聴できる画面になってます。配信が始まるとTopのサムネイルが表示され再生ボタン押すと動画視聴できます。

6.実際の配信とモニタリング

ここまで準備できたらiphoneのrtmpアプリから配信ボタンを押すだけです。配信の様子はAVLのコンソール画面からリアルタイムモニタリングできます。メニューのモニタリングをクリックします。

配信して2~3分するとビットレートやフレームレートが表示され始めます。

モニタリングなかのリソースモニタリングは過去の情報も表示できます。10月始めのテストと10月8日AliEaters本番での結果はこんな感じです。
アップストリームが３〜3.5Mbpsくらいですね。

ダウンストリームはAliEaters名古屋の１台とモニタリングしていた端末など２〜３台しかいなかったので大した帯域は利用していませんね。

7.アーカイブ動画の活用

ところで、Live配信と同時に実はOSSへ配信動画をアーカイブしていくことができます。録画メニューを選択します。

「＋追加」で新しく録画先のOSSの設定ができます。録画設定でアプリケーション名とストリーム名が必要になりますのでURLジェネレータ管理の画面で記載した内容と同じにします。格納形式はm3u8とflvとmp4が選択できます。mp4ダイレクトがあとで便利でしょうか。

格納場所をOSSのディレクトリから選択してOKを押します。

録画先が追加されました。

配信を開始したときにOSSの方にrecordというフォルダーが自動的にできて配信中はtsファイルがまず作られそれぞれの形式に自動変換されてアーカイブされていきます。

配信が終わるとm3u8形式やmp4ができてますね。30分ごとなど一定時間でまとめる設定ができますのであとで編集しやすい長さに分割して保存しましょう。

アーカイブ動画を編集して、再度OSSにアップロードしておけば記録動画としてライブが見れなかった人も見れますね。
AliEaters東京でのアーカイブ動画はこちら
寺尾さん発表 Apsara Conference 2019速報 Recap
森さん発表 Apsara Conference 2019速報
 渡辺さん発表「カオスエンジニアリング入門?〜ChaosBladeの紹介〜」
岡崎さん発表 Apsara Conference 2019速報旅人編
 Azure vs AliEaters対談企画

8.ところで料金は？

AVLには実際まだまだ色々な機能があるのですが、今回は基本の基本の配信をやってみました。AliEaters東京では実際に3時間あまりの配信でしたが料金はこんな感じです。AVLで137円、OSSで291円　そんなもん？！というリーズナブルな利用料金でした。大量視聴される配信は料金がもっとかかりますので気をつけてくださいね。

まとめ

-AVLは簡易な設定で本格的Live配信ができるお手軽ツール。
-OSSはWebサーバに配信動画保存に、アーカイブ動画配信に色々使える便利サービス。
-料金もリーズナブル
注意ポイント
-URLジェネレーター管理：URL生成時に有効期間の設定があります。デフォルトで3600秒とか短くなってますので配信時間に合わせて長くしておきましょう。
-トラフィック料金を注意：Live配信もOSSに保存されたアーカイブ動画も大量に視聴されるとトラフィック料金が大きくなる場合があります。視聴数が多い時は発生料金もケアください。
-中国本土への配信にはCDNの利用と同様にICPライセンスが必要になります。

Apsara Video Live でAliEatersイベントのライブ配信

背景