sfuのクラウドサービスanzuで web rtc_live streaming
TRANSCRIPT
![Page 1: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/1.jpg)
SFUのクラウドサービスAnzuで WebRTC
Live Streaming
a-baba
![Page 2: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/2.jpg)
自己紹介
ばば あつし
仕事
インフォコム西日本
社内でWebRTCで配信等 PG作成や調査
プライベート
趣味は旅行・音楽鑑賞・ガジェット等
![Page 3: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/3.jpg)
すみません WebRTCの技術的話
はしません。
ノウハウ的な技術の話になります。
![Page 4: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/4.jpg)
きっかけ
コウチノコト。
地域の有志(ボランティア)による情報発信
• 地元サッカーチームの選手紹介
• 地元エンターティナーお笑い・アーティスト等
• 地方ならではの情報(南海トラフ地震の防災)
私は相談を受けて技術サポートとして参加
![Page 5: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/5.jpg)
メンバー紹介
![Page 6: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/6.jpg)
![Page 7: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/7.jpg)
WebRTCでone2many配信
• 社内ではKurentoとか使ってました。
実績20名程度
映像はそれなり
それ以上人数増えるとCPUが辛い
ブロックノイズ気になる
![Page 8: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/8.jpg)
同時最大100人配信する
× P2P 1対nでは配信側の帯域が辛い
△ MCU 中継するサーバのCPUが辛い
◎ SFU サーバCPU負荷が低い
自前でSFUサーバ立ち上げるのも大変なので
時雨堂さんのSFU Anzuを使わせてもらうことにしました。
![Page 9: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/9.jpg)
MCU
サーバ側で映像 音声を 合成
SFU
P2P
MCU
SFU
映像 decode
映像はそのまま
映像encode
映像はそのまま
通信量大
クライアントの負荷も大
![Page 10: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/10.jpg)
なぜ?HLSやMpeg-Dashじゃないの
遅延はイヤ 個人的趣味
今時、どうせならWebRTCじゃない?
配信プラットフォームに依存しないので
色々カスタマイズ楽そう
![Page 11: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/11.jpg)
Anzu WebRTC SFU as a Service Anzu SFUで 映像や音声を WebRTC でリアルタイムに 配信できるサービスです。 GitHubアカウントでサインアップして anzu-js-sdkを使えば簡単に配信ができます。 ※SFU (Selective Forwarding Unit) https://anzu.shiguredo.jp/
![Page 12: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/12.jpg)
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) { });
![Page 13: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/13.jpg)
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) {
});
![Page 14: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/14.jpg)
あ iOSどうする?
• iOSはアプリ化しないと無理
しかたなくYoutubeも同時配信
あと同時視聴100人超えの保険
![Page 15: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/15.jpg)
WebRTCでの配信準備は完了
視聴機能と 簡単なテキストチャット機能を実装 iOSはYoutubeのリンク
![Page 16: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/16.jpg)
メディアに報道される
![Page 17: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/17.jpg)
前日のトラブル
• Herokuの制限
Free dyno無料枠では6時間/1日はSleep必要
丁度、配信時間前にSleep状態となってしまった
あわてて課金
![Page 18: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/18.jpg)
デモ動画 その1
![Page 19: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/19.jpg)
リハ無しでいきなり11時間連続のAnzu&Youtubeの同時配信を実施
Anzu1度も落ちない。めちゃくちゃ安定してる
フレームレートも問題なし
![Page 20: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/20.jpg)
初回、実際配信してみて
良かったこと • 配信が簡単 • 中規模の配信なら十分 • 高画質 • 遅延が少ない為、音声のモニタリングが楽 (Youtube等だと30~40秒遅延) 注意点 • カメラの設置場所、カメラワーク等 なるべくお客さんを写さない工夫が必要 • ダンスとかで使用する楽曲はたいてい 著作権にかかる(ContentsIDによる自動検知)
![Page 21: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/21.jpg)
その後、必要だった機能
ゲスト紹介等で
• 画像の表示(告知・宣伝のFlyer表示)
• テロップ出し
![Page 22: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/22.jpg)
配信ブース
![Page 23: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/23.jpg)
デモ動画 その2(テロ出し)
![Page 24: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/24.jpg)
最終的な構成HW
Audio I/F
UVC-HDMI
Webカメラ
スタンドマイク
ビデオカメラ
スマホ
Mac
ミキサー
![Page 25: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/25.jpg)
最終的な構成SW
CamTwist(VirtucalCam/ VideoSwitcher)
WireCast (RTMP endpoint)
HiromeCast (WebRTC upstream)
Youtube Live Admin Console
![Page 26: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/26.jpg)
今回使用したツールの紹介
Software • CamTwist • Wirecast (Youtube用) Hardware • Audio Interface BEHRINGER U-PHORIA UMC204HD • HDMI-UVC Capture Febon168・・・ちょっと遅延有り • Sony HandyCam (屋外用) • WebCam Logitec C920r (室内用)
![Page 27: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/27.jpg)
今後
• 通知機能はやっぱり欲しい(SW/WebPush)
(告知が直前でゲリラ的に配信している為)
• VP9対応
• アーカイブ機能
• Firebase Hostingに移行したい
• 360度ライブやVR映像配信に期待
![Page 28: Sfuのクラウドサービスanzuで web rtc_live streaming](https://reader031.vdocuments.pub/reader031/viewer/2022020301/587983eb1a28ab6c358b6057/html5/thumbnails/28.jpg)
Thank you
End