LINE LIVEクライアントアプリを支える配信技術　社内製ライブラリ「Yuki」の仕組み

LINE LIVEアプリの配信技術

岩谷明氏（以下、岩谷）：みなさんこんにちは。LINE LIVEのAndroid アプリを作っている岩谷と申します。先ほどサーバーサイド寄りの話がありましたので、今回はクライアントの話をしたいと思います。よろしくお願いします。

簡単にアプリの機能について説明したあとに、どのように作ったかを説明したいと思います。また、低レイヤーを担っているYukiという社内製のモジュールもあるので、それも簡単に紹介したいと思います。

アプリは2015年末にバージョン1.0が出て、現在バージョン3.16が出ています。年に1回ぐらいメジャーバージョンがあるような感じです。現在も次のバージョンを開発中です。

まず、動画を見る「プレイヤー」という画面がメイン機能としてあります。同じ機能がLINEのアプリの中にも搭載されていて、LINEのトークルームから直接LINE LIVEを見ることができるようになっています。アプリだけにある機能として、配信画面がありますが、今回はこれについてお話ししたいと思います。他には、ホーム画面やマイページ、検索画面があります。

アプリに使われている技術ですが、iOSは100パーセントSwiftで作り始めました。非同期の処理にはPromiseKitを使っていて、配信まわりはReSwiftというReduxのライブラリを使っています。APIコールはAPIKitを使っています。

AndroidはKotlinをガシガシ使っています。もともとJavaで書いていたんですが、KotlinがGoogleI/Oで正式に発表された頃に導入し、ようやく約30パーセントがKotlinになりました。非同期処理はほぼすべてRxJava2を使っていて、通信まわりもRetrofit2とOkHttp3のよくある構成になってます。DIコンテナはDagger2を使っています。

よくあるのが、LINEアプリのプレイヤーとLIVEアプリのプレイヤーで、同じ機能でユーザーの情報を取る仕組みが異なるといったケースで、異なる依存するコンポーネントをDagger2でインジェクトするようなかたちで便利に使っています。

アーキテクチャは主にMVVMで、配信画面はReduxを使っています。

LINE LIVEの機能

機能としては、動画再生するところと、チャットと、先ほど話があった応援アイテムや、ランキング、そして「ハート」という仕組みで応援ができるようになっています。

この動画はHLSになっていて、iOSだとOS標準のAVPlayer、AndroidではExoPlayerを使っています。ですが、一部の古い端末ではExoPlayerが動かないことがたまにあるので、そういう時はMediaPlayerを使うようにしています。ですが最近ではこの仕組みもいらなくなってきたと感じています。OS4.4以前の古い端末ではExoPlayeが使えないので、古いOSをサポートしていた頃の名残みたいな感じになっています。

チャットは先ほど話がありましたが、全部のチャットを合計すると5億件くらいのメッセージが流れることあります。もちろん1つのクライアントに1億メッセージ入ってくるような事態では、アプリが正常に動作しないので、そうならないようにサーバーサイドで調整しています。ですが、それにしても大量のチャットが入ってきます。また、応援アイテムはすべてクライアントに届くようになっているので、最大で1分6,000個くらい送られる配信もあります。チャットの仕組みはWebSocketを使って実現していて、弊社のブログに詳しい記事（LINE LIVE チャット機能を支えるアーキテクチャ）があるので、興味のある方はご覧ください。

応援アイテムは、アニメーションが付いていて、楽しくかわいく盛り上げることができます。このアニメーションはAnimation PNG（APNG）を使っています。

APNGを再生するために、iOSではAPNGKit、AndroidではApngDrawableというライブラリを使っています。どちらも弊社のエンジニアが開発したものです。みなさんもぜひ使っていただけると幸いです。

配信画面

次は配信画面です。

リアルタイムのライブ配信をするのですが、ユーザーの配信者のネットワーク環境に応じて適切なビットレートを選んでいます。あとは、Face stickersという、顔をかわいくしたり、猫にしたりするStickerがだいたい170個ぐらい使えます。また、カラーフィルターをかけて肌が綺麗になったり、トーンが変わったりしたライブができるようになっています。

他にはコラボ配信機能に対応しています。配信をしている他のユーザーにコラボ配信のリクエストを送ってリクエストが許可されると、その配信者の横に小さい画面で、コラボ配信したい人の画面が写り、視聴者は2人の様子を見て楽しめるようになっています。

最近はカラオケ機能・Music機能もつきました。ライブ中に歌詞が流れて、一緒に歌って、声にエコーかけることもできる機能です。ぜひ試してみてください。

LINE LIVEの配信アーキテクチャ

配信のアーキテクチャについてです。

まずアプリでユーザーが配信を始めると、RTMPのパケットがStreaming Serverに送られて、HLSにトランスコーディングされ、それをCDN経由でプレイヤーが受け取るかたちになっています。ただ受け取るだけでなく、LIVEを配信するステータスや、急に強制的に終了してしまった場合などのハンドリングも含めて、APIサーバに10秒に1回ぐらいポーリングしていて、最新の状態を、配信画面と視聴者のプレイヤーで同期しています。

その配信部分をどうやってクライアント側で実装しているのかですが、もちろんiOS、Android両方の実装がありまして、次にその先ほどお話しした「Yuki」という社内製のライブラリが、かなり多くの部分を担当しています。

UIやYukiを制御する、アプリケーションのコードは両OSともReduxのアーキテクチャになっていて、iOSではReSwiftというライブラリ、AndroidではKotlin+RxJava2を使った独自の実装になっています。

ユーザーの入力やサーバーのポーリングの情報、YukiからくるRTMPのステータスや、Face stickersの情報などとといったコールバックの処理、カラオケのMusicが何秒間再生されて、歌詞はどこを表示するかなど、一つの画面内でリアルタイムに様々なことを更新しなければいけないので、Reduxアーキテクチャを採用しています。

ユーザーの入力があったら、Actionというかたちで表現され、それがReducerを通してStateに反映され、また画面に反映されます。APIコールなどの非同期処理には、RxJSを元にしたRedux実装であるredux-observableで採用されているEpicという仕組みを採用しています。Actionが送られると非同期処理を行いその結果がActionとして出力される仕組みです（Android）。

Yukiの機能と仕組み

Yukiは、ほぼC++で書かれた画像処理やカメラで撮影した映像を配信してくれる社内製のモジュールで、これはまた別の専属チームが作っています。

YukiはLINEにも搭載されていますし、LINE LIVEにも搭載されています。最近のLINEでは、ビデオ電話中に顔にステッカーを付けたりできるのですが、その機能もYukiが提供しています。

最近搭載された「Character Effects」という新機能は、顔を動かすと表情によってキャラクターが変化します。あとは、先ほどの配信機能や顔を変形する機能、AR、カラオケなど、様々な同画像処理をサポートしているライブラリになっています。

Yukiの構成も簡単に説明します。

C++のレベルでほとんどの機能が実装されていて、エフェクトをかける部分や、ネットワーク処理をする部分などがあり、その上にプラットフォームで固有の実装が存在して、直接デバイスのカメラを触るような処理や、ステッカーをユーザーがダウンロードする機能、画面にプレビューを反映させる部分などがあります。各モジュールが疎結合で動くようになっていますが、ライブ配信部分は、その両方が絡んでいます。

実際にRTMPをどうやって送るかという部分を一例に出しますと、このようになっています。

DeviceのCamera、Microphoneから入力されたものが、Mixerで、カラオケなどの場合は音楽も含めて合成したり、Face stickersが付いてる場合はさらに画像を重ねたりします。それをH264EncoderとAACEncoderがエンコードして、ネットワークで送る用のヘッダやパケットを組み立てて、プロトコルはRTMPで、実際にCommunicatorと呼ばれるモジュールがネットワーク通信をする構成です。

まとめますと、かなり多種多様なコンポーネントを社内で開発していて、LINE LIVEはその上で動いています。各チームは各チームのモジュールに集中してがんばり、それを僕らが組み立てて作る感じです。様々なモジュールやAPI、UIをまとめ、使いやすいアプリと作りやすいコードを育てるためにReduxやMVVMなどのモバイルアーキテクチャを活用・模索しています。時代の流れに追従しつつ、3年・4年くらい模索していますが、まだまだ新機能を開発中で、これからもさらに良いアプリ・良いコードにしたいと考えています。

以上です。ありがとうございました。

（会場拍手）