Help us understand the problem. What is going on with this article?

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

背景

この記事は 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配信を構築します。
AliEaters東京#13.png

手順

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

1.Apsara Video Liveの設定

コンソール画面からApsara Video Liveのメニューに入って見ます。最初の画面には3ステップの設定手順が記載されてますので、それにしたがって設定してみます。(Alibaba Cloudのコンソールは以外と初心者に親切!)
スクリーンショット 2019-12-02 23.03.55.png

Step①ドメインの追加

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

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

スクリーンショット 2020-02-17 15.52.49.png

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

アップストリームとダウンストリームのドメイン名とCNAMEを自身の管理するDNSサーバに反映してください。
ここではお名前.comで設定した参考画面を掲載します。下から2つの設定がそうです。
スクリーンショット 2019-12-02 23.35.19.png
先ほどのドメイン管理画面のアクション-「ドメイン設定」のリンク先画面でDNSでCNAMEが正しく引けているかチェックして反映してくれます。最初はTTLを短くしておくと反映が早いです。あとで3600程度に戻しておきましょう。
スクリーンショット 2019-12-03 0.51.25.png

3.配信URLの発行

ここまで設定できると配信用URLが発行できます。
スクリーンショット 2019-12-02 23.03.55.png
ストリーム管理メニューのURLジェネレーターから配信用URL生成していきます。
先ほど設定したドメインを選択します。ダウンロードドメインを選ぶとアップストリーミングが自動的に出てきます。
スクリーンショット 2019-12-03 1.04.58.png
さらにアプリケーション名、ストリーム名を決めて入力します。この名前はOSSへのアーカイブ録画設定や配信端末のrmtpのURLなどにも利用されてきますので控えて置くといいでしょう。
スクリーンショット 2019-12-02 23.52.41.png
アップストリーミングURLが、rtmp配信端末からAVLサーバに配信する先のURLです。rtmpの設定に記載することになります。これも控えておきましょう。URL生成し直しするたびに変化します。
ストリーミングURLは視聴者が見る配信用Webサーバのhtml内に記載するURLです。
スクリーンショット 2019-12-02 23.52.47.png
Chromeなどのブラウザで視聴させる際にはm3u8形式を使います。HLS(HTTP Live Streaming)プロトコルの動画配信技術でストリーミング配信用の形式がm3u8です。WindowsではVLSクライアントがあれば再生できます。

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

今回は東京側の発表者を撮影し、そのまま配信する簡単方法を採用しました。iphoneのrtmpアプリを使いました。色々ありますので試してみるといいですね。今回はシンプルな機能のものを利用しました。
IMG_4063.PNG
アプリの設定画面に、URL生成でできたアップストリーミングURLを入力して配信ボタンを押すだけで配信開始されます。
IMG_4062.PNG
AliEaters東京当日はこんな感じで撮影していました。
スクリーンショット 2019-12-02 23.21.34.png

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を使います。

スクリーンショット 2019-12-02 23.46.12.png
スクリーンショット 2020-01-28 14.04.12.png

このURLを開いて見るとシンプルにhlsで動画視聴できる画面になってます。配信が始まるとTopのサムネイルが表示され再生ボタン押すと動画視聴できます。
スクリーンショット 2019-12-03 1.36.11.png

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

ここまで準備できたらiphoneのrtmpアプリから配信ボタンを押すだけです。配信の様子はAVLのコンソール画面からリアルタイムモニタリングできます。メニューのモニタリングをクリックします。
スクリーンショット 2019-12-02 23.03.55.png
配信して2~3分するとビットレートやフレームレートが表示され始めます。
スクリーンショット 2019-12-02 23.58.43.png
スクリーンショット 2019-12-02 23.58.50.png
モニタリングなかのリソースモニタリングは過去の情報も表示できます。10月始めのテストと10月8日AliEaters本番での結果はこんな感じです。
アップストリームが3〜3.5Mbpsくらいですね。
スクリーンショット 2019-12-02 23.07.21.png
ダウンストリームはAliEaters名古屋の1台とモニタリングしていた端末など2〜3台しかいなかったので大した帯域は利用していませんね。
スクリーンショット 2019-12-02 23.08.10.png

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

ところで、Live配信と同時に実はOSSへ配信動画をアーカイブしていくことができます。録画メニューを選択します。
スクリーンショット 2019-12-02 23.59.53.png
「+追加」で新しく録画先のOSSの設定ができます。録画設定でアプリケーション名とストリーム名が必要になりますのでURLジェネレータ管理の画面で記載した内容と同じにします。格納形式はm3u8とflvとmp4が選択できます。mp4ダイレクトがあとで便利でしょうか。
スクリーンショット 2019-12-03 0.00.30.png
格納場所をOSSのディレクトリから選択してOKを押します。
スクリーンショット 2019-12-03 0.01.29.png
録画先が追加されました。
スクリーンショット 2019-12-03 0.01.43.png
配信を開始したときにOSSの方にrecordというフォルダーが自動的にできて配信中はtsファイルがまず作られそれぞれの形式に自動変換されてアーカイブされていきます。
スクリーンショット 2019-12-03 0.03.22.png
スクリーンショット 2019-12-03 0.03.41.png
配信が終わるとm3u8形式やmp4ができてますね。30分ごとなど一定時間でまとめる設定ができますのであとで編集しやすい長さに分割して保存しましょう。
スクリーンショット 2019-12-03 1.56.00.png
アーカイブ動画を編集して、再度OSSにアップロードしておけば記録動画としてライブが見れなかった人も見れますね。
AliEaters東京でのアーカイブ動画はこちら
寺尾さん発表 Apsara Conference 2019速報 Recap
森さん発表 Apsara Conference 2019速報
渡辺さん発表 「カオスエンジニアリング入門?〜ChaosBladeの紹介〜」
岡崎さん発表 Apsara Conference 2019速報 旅人編
Azure vs AliEaters対談企画

8.ところで料金は?

AVLには実際まだまだ色々な機能があるのですが、今回は基本の基本の配信をやってみました。AliEaters東京では実際に3時間あまりの配信でしたが料金はこんな感じです。AVLで137円、OSSで291円 そんなもん?!というリーズナブルな利用料金でした。大量視聴される配信は料金がもっとかかりますので気をつけてくださいね。
スクリーンショット 2019-12-03 2.08.43.png
スクリーンショット 2019-12-03 2.09.52.png

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした