<h2 id="はじめに">はじめに</h2>

<p>こんにちは。ライブコミュニケーション事業部 2.0スクラムチームの菊池です。 現在稼働しているライブ配信サービスのFlashからWebRTCへのリプレイスを行っています。 主にバックエンドを担当しています。<br />
今回はなぜWebRTCを選択したのか、また開発における苦労などのお話をさせていただきます。</p>

<p>2.0スクラムチームについてはこちら<iframe frameborder="0" loading="lazy" scrolling="no" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Finside.dmm.com%2Fentry%2F2019%2F05%2F28%2Fec-digicon03" title="「ライブ配信は次の時代へ」EC&amp;デジタルコンテンツ本部 LC事業部 脱Flashへの道 - DMM inside"></iframe><cite><a href="https://inside.dmm.com/entry/2019/05/28/ec-digicon03" target="_blank">inside.dmm.com</a></cite></p>

<h2 id="なぜFlash---WebRTCにしたのか">なぜFlash -&gt; WebRTCにしたのか</h2>

<p>Flashからほかの技術へ置き換えるならば、候補になるのは視聴側であれば、以下の3つでしょうか。</p>

<ul>
	<li>HLS(HTTP Live Streaming)</li>
	<li>WebRTC</li>
	<li>MPEG-DASH ※対応ブラウザが少ない</li>
</ul>

<p>MPEG-DASHに関しては、現状対応ブラウザが少ないので現実的ではないでしょう。その上で配信側は外部ツールを使ずブラウザのみで完結させるのであればWebRTC一択という結論になりました。 なので配信&rarr;視聴の組み合わせ的に以下のどちらかになるでしょう。</p>

<ul>
	<li>WebRTC -&gt; HLS</li>
	<li>WebRTC -&gt; WebRTC</li>
</ul>

<p>何を採用するべきかは、サービスの性質によって変わってきます。<br />
例えば、YouTubeのライブ配信では最低数秒の遅延があります。<br />
YouTubeのように一人のユーザーが多数のユーザーに映像を一方向的に配信する形式では、数秒ほどの遅延なら視聴者はほとんどそれを意識せずに配信を楽しむことができるでしょう。<br />
また、ユーザー方向からのアクションとしてテキストチャットを送ることができます。<br />
このときユーザーは、配信者のリアクションで遅延があることに気づきますが、テキストチャットの場合、ほとんど問題にならないでしょう。</p>

<p>しかし、今回リプレイスするサービスでは配信者と視聴者が双方向に映像と音声を送り合ってビデオチャットする機能があります。<br />
そうなった場合、許される遅延は「1秒未満」と考えています。<br />
音声による会話だと、遅延が数秒あるだけでものすごい不便さを感じてしまいます。</p>

<p><img alt="" height="320" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190527/20190527201628.jpg" title="" width="480" /><img alt="" height="320" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190527/20190527201643.jpg" title="" width="480" /></p>

<p>YouTubeなどのライブ配信サービスはHLSを使用しています。<br />
HLSでは、配信側のクライアントから送られてきた映像をサーバで数秒の動画ファイルに分割します。<br />
この数秒の動画ファイルをwebサーバーに配置し、クライアントにpullさせる方式です。</p>

<p>HLSを採用する場合のメリットはCDNを利用できること。 ダウンロードした分に関しては映像が止まったりせずにスムーズに再生できます。 また動画ファイルをすぐに破棄せずに保持しておけば過去にさかのぼって配信を視聴することも可能になります。<br />
一方、デメリットは遅延です。<br />
私自身がほかのサービスでHLSを採用したケースでは、遅延がどうしても5〜6秒ぐらいは出てしまいました。<br />
チューニング次第ではもっと短くできますが、「1秒未満」というのは難しいです。</p>

<p>そこで今回のプロジェクトではWebRTCを採用することになりました。<br />
UDPベースで直接映像を視聴クライアントに直接送信する方式のWebRTCでは、<strong>「超低遅延な映像配信」</strong>が可能になります。<br />
ただし、回線の品質などの影響をもろに受けるのでHLSに比べて安定性という面では劣ってしまいます。</p>

<p><iframe frameborder="0" loading="lazy" scrolling="no" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2FWebRTC.org%2F" title="WebRTC"></iframe><cite><a href="https://webrtc.org/" target="_blank">WebRTC.org</a></cite></p>

<p>ですので、数秒の遅延が許されるのならばHLSの採用を検討するべきです。</p>

<h3 id="SFUによる配信側の負荷軽減">SFUによる配信側の負荷軽減</h3>

<p>WebRTCのシンプルな構成では、単にクライアント同士が直接コネクションを張って通信します。</p>

<p><img alt="" height="428" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190611/20190611194604.png" title="" width="556" /></p>

<p>しかし、視聴クライアントが多くなると、そのすべてとコネクションを張らなければならない配信側の負荷が上がってしまう。 今回のサービスでは１つのチャンネルを数十から数百のユーザーが一度に視聴する場合があるので、この状態ではサービスを提供できません。</p>

<p>配信側クライアントの負荷を軽減するために SFU(Selective Forwarding Unit )という仕組みがあります。 簡単に説明すると映像や音声のやり取りをサーバー経由で行います。</p>

<p>WebRTCをサーバー経由して使用することによって視聴側も配信側もすべてのクライアントがサーバーとの単一のコネクションを持てば良いことになるので、視聴クライアントが増えても配信クライアントの負荷は上がりません。</p>

<p><img alt="" height="430" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190611/20190611194621.png" title="" width="550" /></p>

<p>また他にも、SFUを使用すればサーバ側で映像の録画ができたり、認証機能を付けたりできるようにもなるメリットがあります。</p>

<h3 id="サイマルキャストによる複数画質の配信">サイマルキャストによる複数画質の配信</h3>

<p>様々な環境のユーザーに対して安定したサービスの提供をするためには、視聴側に視聴画質を選択できるようにしたほうが親切です。 遅い回線なら画質の低い映像を受信してスムーズに視聴し、速い回線なら画質の高い映像を視聴できるからです。</p>

<p>WebRTCでは、複数の画質の映像を提供する方法としてサイマルキャストがあります。 配信クライアントから複数の画質の映像を配信するもので、サーバーで処理をして映像を分けるのではなく初めから配信側で複数の映像を同時に送信する点がポイントです。 そのため、配信側で単一の画質の映像を配信する時に比べて負荷が上がってしまうという問題があります。 今回のプロジェクトでは、このサイマルキャストはいったん見送ることにしました。</p>

<h3 id="コーデックの選択">コーデックの選択</h3>

<p>コーデックとは映像をエンコードする時のアルゴリズムを指します。 どのコーデックを使用して映像をエンコードするかでも画質やクライアントの負荷が変わってきます。大抵の場合、候補として上がってくるのが以下の3つでしょう。</p>

<ul>
	<li>VP8 容量はそんなに節約できない。いまさら採用するメリットはないかも。</li>
	<li>VP9 容量がかなり節約できるが、CPU負荷高め。</li>
	<li>H264 対応ブラウザ多い。</li>
</ul>

<p>それぞれで対応するブラウザなどが変わってくるので、どのブラウザをサポートしてどのブラウザをサポートしないのかなどで採用するコーデックが変わってきます。</p>

<h3 id="地味な画質のチューニング">地味な画質のチューニング</h3>

<p>リプレイスに際して、画質の見直しも行われました。<br />
既存システムが作られてから15年ほど経っているので、「高画質」という言葉の意味もだいぶ変わっています。 かといって、何も考えずに高画質にしようとすると動画が重くなってしまうので、画像の大きさやフレームレートを調整してビットレートをどこまでさげられるのかといった地味なチューニングを行うことになります。<br />
数値ではわからない感性的な品質なので、少しずつ値を変えていって見た目を比較していく作業が必要になります。<br />
動きの大きい場合と小さい場合で圧縮率が変わり、動くとノイズは大きくなります。<br />
仮に止まったままだと正しく品質を判定できないので、カメラに向かってずっと手をふっていたりする必要があります。<br />
これが結構疲れます。<br />
サービスの性質上、動きが多いか少ないかで適切な値が結構変わってくるのではないでしょうか。</p>

<figure class="image"><img alt="" height="574" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190603/20190603172414.png" title="" width="1020" />
<figcaption>「おっ、案外きれいだ！」</figcaption>
</figure>

<figure class="image"><img alt="" height="574" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190603/20190603172429.png" title="" width="1020" />
<figcaption>「あれ&hellip;&hellip;」</figcaption>
</figure>

<figure class="image"><img alt="" height="574" itemprop="image" loading="lazy" src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lc_team/20190603/20190603172635.png" title="" width="1020" />
<figcaption>「動いたらだめだー！」</figcaption>
</figure>

<p>&nbsp;</p>

<h2 id="監視の回線とマシンスペック">監視の回線とマシンスペック</h2>

<p>サービスの運用業務の１つに配信の監視があります。 ルールに違反している配信を即座に停止し、警告を出すという業務です。 監視クライアントでは一度に何十もの映像を同時に表示しなければならないのですが、配信側の負荷を考えてサイマルキャストをしないという方針をとったため、監視クライアントもユーザーと同じ画質の映像を受信しなければならなくなってしまいました。</p>

<p>そのため、監視をするためのPCの要求スペックがとても高くなってしまいました。 実機での検証ではGPUの有無、ブラウザの種類等の条件を変えて映像のカクつきやユーザー側の視聴クライアントとの遅延の差を比較していきました。</p>

<p>検証でわかったのは、ChromeではGPUを使ってCPUの負荷を抑えてくれています。 一方、FirefoxではGPUを全然使ってくれないということでした。<br />
同じPCを使ってもFirefoxとChromeでは2倍ぐらいの差がありました。</p>

<p>監視のために結構高いGPUを積んだPCを採用しようとしています。<br />
開発に使っているPCよりもハイスペックで羨ましいです。</p>

<p>さらに、コストが高くなってしまうのはPC本体の価格だけではありませんでした。<br />
ネット回線の費用がとんでもなく高額になってしまったのです。<br />
そこで考えたのが、VDIを使えば監視に使用する回線を節約できるのではないかということです。&nbsp;しかし、試しにVDIのサービスを利用して検証してみたところ、手ごろな値段で要求に見合うスペックのVDIを提供しているサービスがなく、この案は不採用になりました（結構いいアイディアだと思っていたのですが）。</p>

<h2 id="その他いろいろな問題">その他いろいろな問題</h2>

<h3 id="ブラウザのバージョンアップが怖い話">ブラウザのバージョンアップが怖い話</h3>

<p>ブラウザのバージョンアップ後に動かなくなってしまうことが結構あったりします。</p>

<h3 id="仮想カメラが使えない話">仮想カメラが使えない話</h3>

<p>仮想カメラアプリケーションが使えない不具合に遭遇したWindowsのFirefox。 デバイスの順番によっても影響があるので、外部カメラをもう一台つなぐと回避できたりします。 WebRTCのテストサイトもうまく動作しないです。 Firefoxの不具合らしいのですが、これって解消されるのでしょうか(執筆時点でのバージョンは67.0)。</p>

<h3 id="負荷分散が大変そうな話">負荷分散が大変そうな話</h3>

<p>視聴クライアントとサーバーとの接続が張りっぱなしになるので、負荷分散が難しいですよね（HLSだったらとても楽なのですが）。 配信を開始するときにどのSFUのサーバーを使用するかを選択するのですが、人気の配信者だと多くの視聴者が集まって負荷が高くなります。 誰が人気の配信者なのかを覚えておいて、同じサーバーに固まらないようにするなどの工夫が必要なのかなと考えたりもします。</p>

<h2 id="さいごに">最後に</h2>

<p>というわけで、あれこれ書きましたが、リプレイス作業は現在も真っ只中で進行中です。ここで挙げたものはごく一部のものでさまざまな問題とぶつかっていますが、仮に皆さんがWebRTCの開発をする際は、せひ参考にしていただけたらうれしいです。</p>

<p><iframe frameborder="0" loading="lazy" scrolling="no" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdmm-corp.com%2Frecruit%2F" title="採用情報｜DMM Group"></iframe><cite><a href="https://dmm-corp.com/recruit/" target="_blank">dmm-corp.com</a></cite></p>


サーバサイド

WebRTCを利用した超低遅延な映像配信

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM地方創生

DMM.make AKIBA

DMM.make 3Dプリント

Seamoon Protcol by DM2C Studio

ONE DAY DESIGN

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Algoage

DMM EV CHARGE

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

Web3

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

インフラ

アミューズメント

同人

バックエンド

フロントエンド

ネットワーク

セキュリティ

配信基盤

ペイメント

Android

データベース

ビッグデータ

フルスタック

データ分析

機械学習

プロトタイピング

グラフィックデザイン

3DCG

モーショングラフィック

プロダクトデザイン

コピーライティング

サービスデザイン

コンテンツ管理・制作

ブランディング

マーケティング

企画

編集

営業

プロモーション

WebRTCを利用した超低遅延な映像配信

シェア

関連する記事

関連する求人