Embed Size (px)
Citation preview
SFUのクラウドサービスAnzuで WebRTC
Live Streaming
a-baba
自己紹介
ばば あつし
仕事
インフォコム西日本
社内でWebRTCで配信等 PG作成や調査
プライベート
趣味は旅行・音楽鑑賞・ガジェット等
すみません WebRTCの技術的話
はしません。
ノウハウ的な技術の話になります。
きっかけ
コウチノコト。
地域の有志（ボランティア）による情報発信
• 地元サッカーチームの選手紹介
• 地元エンターティナーお笑い・アーティスト等
• 地方ならではの情報（南海トラフ地震の防災）
私は相談を受けて技術サポートとして参加
メンバー紹介
WebRTCでone2many配信
• 社内ではKurentoとか使ってました。
実績２０名程度
映像はそれなり
それ以上人数増えるとCPUが辛い
ブロックノイズ気になる
同時最大１００人配信する
× P2P １対nでは配信側の帯域が辛い
△ MCU 中継するサーバのCPUが辛い
◎ SFU サーバCPU負荷が低い
自前でSFUサーバ立ち上げるのも大変なので
時雨堂さんのSFU Anzuを使わせてもらうことにしました。
MCU
サーバ側で映像 音声を 合成
SFU
P2P
MCU
SFU
映像 decode
映像はそのまま
映像encode
映像はそのまま
通信量大
クライアントの負荷も大
なぜ?HLSやMpeg-Dashじゃないの
遅延はイヤ 個人的趣味
今時、どうせならＷｅｂＲＴＣじゃない？
配信プラットフォームに依存しないので
色々カスタマイズ楽そう
Anzu WebRTC SFU as a Service Anzu SFUで 映像や音声を WebRTC でリアルタイムに 配信できるサービスです。 GitHubアカウントでサインアップして anzu-js-sdkを使えば簡単に配信ができます。 ※SFU (Selective Forwarding Unit) https://anzu.shiguredo.jp/
Anzu-js-sdkを使用 • 基本的な配信部分は数行なので超速で実装完了 Browser⇔SFUのsignalingの部分も勝手にやってくれます。
＜配信側＞ var channelId = "xxxxxxx"; var upstreamToken = "xxxxxxxxxxxxxxxx"; var anzuUpstream = new Anzu("upstream"); anzuUpstream.start(channelId, upstreamToken, { video:{'optional': [{'minHeight': 720}, {'minWidth': 1280}]},audio:
true }).then(function(params) { var videoElement = document.getElementById("local-video"); videoElement.src = window.URL.createObjectURL(params.stream); videoElement.play(); }) .catch(function(error) { });
Anzu-js-sdkを使用 ＜視聴側＞
var channelId = " xxxxxxx";
var downstreamToken = "";
var anzuDownstream = new Anzu("downstream");
anzuDownstream.start(channelId, downstreamToken)
.then(function(params) {
var videoElement = document.getElementById("remote-video");
videoElement.src = window.URL.createObjectURL(params.stream);
videoElement.play();
})
.catch(function(error) {
});
あ iOSどうする？
• iOSはアプリ化しないと無理
しかたなくYoutubeも同時配信
あと同時視聴１００人超えの保険
WebRTCでの配信準備は完了
視聴機能と 簡単なテキストチャット機能を実装 iOSはYoutubeのリンク
メディアに報道される
前日のトラブル
• Herokuの制限
Free dyno無料枠では６時間/１日はSleep必要
丁度、配信時間前にSleep状態となってしまった
あわてて課金
デモ動画 その１
リハ無しでいきなり１１時間連続のAnzu&Youtubeの同時配信を実施
Anzu１度も落ちない。めちゃくちゃ安定してる
フレームレートも問題なし
初回、実際配信してみて
良かったこと • 配信が簡単 • 中規模の配信なら十分 • 高画質 • 遅延が少ない為、音声のモニタリングが楽 （Youtube等だと30～40秒遅延) 注意点 • カメラの設置場所、カメラワーク等 なるべくお客さんを写さない工夫が必要 • ダンスとかで使用する楽曲はたいてい 著作権にかかる（ContentsIDによる自動検知）
その後、必要だった機能
ゲスト紹介等で
• 画像の表示（告知・宣伝のFlyer表示)
• テロップ出し
配信ブース
デモ動画 その２（テロ出し）
最終的な構成HW
Audio I/F
UVC-HDMI
Webカメラ
スタンドマイク
ビデオカメラ
スマホ
Mac
ミキサー
最終的な構成SW
CamTwist（VirtucalCam/ VideoSwitcher)
WireCast （RTMP endpoint)
HiromeCast (WebRTC upstream)
Youtube Live Admin Console
今回使用したツールの紹介
Software • CamTwist • Wirecast (Youtube用) Hardware • Audio Interface BEHRINGER U-PHORIA UMC204HD • HDMI-UVC Capture Febon168・・・ちょっと遅延有り • Sony HandyCam （屋外用） • WebCam Logitec C920r （室内用）
今後
• 通知機能はやっぱり欲しい(SW/WebPush)
（告知が直前でゲリラ的に配信している為）
• VP9対応
• アーカイブ機能
• Firebase Hostingに移行したい
• 360度ライブやVR映像配信に期待
Thank you
End
