エフェクト画質を担保しながらパフォーマンスも良くしたい　「Pococha」動画アイテム再生改善における取り組み

ライブコミュニケーションアプリ「Pococha」とアイテムの紹介

郭輝平氏：「Pocochaにおけるアイテム動画再生のパフォーマンス改善」。Pococha事業システム部の郭輝平が発表いたします。

こんにちは、郭輝平と申します。2020年、SHOWROOMから「Pococha」にジョインしました。現在はPococha事業部システム部に所属しています。業務内容は、主にPococha iOSアプリのパフォーマンス改善です。どうぞよろしくお願いします。

今日お話しすること。最初は、PocochaとPocochaアイテムの紹介をしたいと思います。次は、Pocochaの動画アイテム再生におけるパフォーマンス改善の課題と、その課題への取り組みについて説明していきたいと思います。

まず、Pocochaの紹介です。Pocochaは、スマホさえあれば、誰でもいつでも簡単にライブ配信と視聴ができるライブコミュニケーションアプリです。配信者と視聴者、双方向のコミュニケーションによりライブ配信を一緒に盛り上げることができます。

次は、Pocochaアイテムの紹介です。（アイテムは）リスナーがコインを消費して場を盛り上げるためのデジタルコンテンツで、リスナーとライバーの大事なコミュニケーション方式の1つです。アイテムは現状、数百個以上あります。今でも定期的に新しいアイテムをリリースしている状況です。

現状のアイテム動画再生のメリット・デメリット

今回の発表は、アイテムの1つである動画アイテムについて説明していきたいと思います。

まず、現状の動画アイテム再生について説明したいと思います。（スライドを示して）図のとおり、メインのアニメーションエフェクトが入っているベース動画と、透明情報であるアルファ情報だけが入っているアルファ動画を使って再生しています。

2つの動画コーデックは、共にH.264です。再生時にアプリ側で2つの動画をダウンロードして読み込んだ後に、iOS側は「Metal」、Androidは「OpenGL」を使って、2つの動画フレームを構成して、画面にレンダリングして表示しています。

アイテム動画再生の現状のメリットとデメリットのまとめです。メリットは、動画を使っているので、ほかの形式よりは圧縮率が高く、ファイルサイズも最小限にできることです。また、iOSとAndroidの両プラットフォームでハードデコードができるので、端末発熱なども抑えられます。

メンテナンスコストも、新しいアイテムが出た時にデザイナー側が新しい動画を作って配布するだけで再生できるので、アプリ側のアップデートは特に必要ありません。これらがメリットです。

デメリットですが、動画アイテムは2つの動画を扱っているので、ネットワークが原因で1つの動画のみがダウンロードされた場合、再生できません。また、動画が2つあるため、ファイルの読み込みとデコードのコストが2倍になってしまいます。

そこで、メイン動画とアルファ動画を1つの動画にすることで、メリットを保持しながらデメリットを解消できないかと考えました。

「HEVC Video With Alpha」のメリット・デメリット

その中で、Pococha側はアイテム動画のフォーマットを考え直し、調べた結果、2つの解決策がありました。1つは、次世代の動画コーデックを使うことです。

次世代のアルファチャンネルが対応している動画形式は、Appleが推奨している「HEVC Video With Alpha」とGoogleが推奨している「WebM Alpha transparency」です。

もう1つの解決策は、現状のH.264のコーデックをそのまま2つの動画を1つにまとめることです。現状のメイン動画と、アルファ動画をコーデックを変更せずに1つの動画を複製して使う形式で、社内では「Alpha Packed」という名前にしています。

それぞれのフォーマットについて説明していきたいと思います。まずは、HEVC Video With Alphaの概要です。これは名前のとおり、HEVCの動画がアルファチャンネルでサポートできるようになった新しい動画のフォーマットです。今は主にAppleが推奨していて、2019年の「WWDC」で関連のセクションが公開され、macOS Catalina、iOS 13、tvOS 13からサポートできるようになりました。

HEVC Video With Alphaのメリットとデメリットのまとめです。メリットは、動画サイズを1つにまとめることができるので、読み込みと動画のデコードのコストの発生を1回にできることです。

また、iOS 13からのネイティブサポートとハードデコードもできます。H.264より画質を劣らせることなくファイルサイズを小さくできます。

デメリットは、Androidをサポートしていないことです。また、単体動画と比べた場合、デコードはH.264と比べて少し重いというデメリットもあります。以上がメリットとデメリットです。

「WebM Alpha transparency」のメリット・デメリット

次は、WebM Alpha transparencyの概要です。WebM Alpha transparencyは、Googleが推奨していて、主にVP8、VP9のコーデックがWebMでアルファチャンネルをサポートできるようになりました。PC Chrome 31から対応しており、現段階では、Safari、iOS、Androidに対応はしていません。

（スライドを示して）こちらは、WebM Alpha transparencyのメリットとデメリットのまとめです。

メリットは、HEVC Video With Alphaと同じく、動画ファイルを1つにまとめることができるので、読み込みと動画のデコードのコストの発生を1回にできることです。また、次世代のコーデックを使っているため、ファイルサイズも小さくできます。

デメリットはけっこう致命的で、AndroidとiOSの両方をサポートしていません。Androidは、Android側の動画コーデックのAPIであるMediaCodecというアルファチャンネルが現状サポートしていません。

iOSは、iOS 14でVP8とAppleが公式にサポートするようになりましたが、アルファチャンネルはサポートしていない状況です。

社内フォーマット「Alpha Packed」のメリット・デメリット

最後のフォーマットは、社内フォーマットであるAlpha Packedです。H.264のコーデックは変更せず、今までのメイン動画とアルファ動画を1つにして、新しい動画をまとめた感じです。

まとめる際、アルファ部分の動画サイズを小さくすることができます。無駄なデータが入らないように、動画をローテーションとスケーリングして処理をします。最後はご覧のとおり、メイン動画とアルファ動画が1つの動画になります。

（スライドを示して）こちらがAlpha Packedのメリットとデメリットです。

メリットは、ほかのフォーマットと同様に、読み込みとデコードのコストの発生を1回にできることです。また、一番のメリットとして、H.264を使っているので、iOS、Androidの両方をサポートすることができます。

デメリットは、ローテーションやスケーリングの処理を入れているので、表示時に動画フレームの処理が増えます。また、独自のフォーマットのため、既存の動画プレーヤーは認識しておらず、プレーヤー側の対応が必要です。

iOSはHEVC With Alpha、AndroidはAlpha Packedを採用

3つのフォーマットの比較表です。ご覧のとおり、iOSにおいては、HEVC With Alphaがパフォーマンスと導入コストの部分で一番良く、Androidは、WebM Alpha transparencyが使えないため、Alpha Packedだけが使えます。

最終的に、Pocochaのアイテム動画は、iOSはHEVC With Alpha、AndroidはAlpha Packedを採用することになりました。

採用を決めた具体的な理由をお話しします。iOSは、HEVC With AlphaとAlpha Packedの両方が使えますが、先ほどお見せしたスライドのとおり、HEVC With Alphaのほうがパフォーマンスが上で、ファイルサイズも小さくできます。

Alpha Packedは独自仕様なので、これからのメンテナンスなどを考えて、iOS側はHEVC With Alphaを採用することになりました。Androidについては、現状Alpha Packedしか使えないので、ほかに選択肢がありませんでした。

iOS側新フォーマット、HEVC With Alphaの対応

次は、新フォーマットの対応について説明していきたいと思います。まずは、iOS、Androidのアプリそれぞれの対応を紹介して、最後に既存アイテムの対応の説明をしていきたいと思います。

iOS側のHEVC With Alphaの対応です。Appleが提供しているAVFoundationのAVPlayerを使えば簡単に対応できますが、Pocochaアイテム動画の特性には、あまり向いていませんでした。

アイテム動画のサイズは5MBから10MBが多く、AVPlayerは設計上、大きなサイズの動画も対応しているため、少しずつデータを読み込んでいる仕様です。Pocochaのアイテム動画のサイズは小さいため、一気に読み込んだほうが処理としてはパフォーマンスが良いという理由があります。

もう1つ、連続的に同じアイテムを使うユーザーが実際はけっこう多く、同じ動画連続再生時のファイルを再度読み込まないように、キャッシュ機能も欲しいのですが、AVPlayerはそれに対応していません。そのためPococha側で自前のHEVC With Alphaプレーヤーを作ることになりました。

自前のプレーヤーは「HEVCPlayerView」という名前です。主な機能は、HEVC With Alphaの動画再生サポート、ハードデコードのサポート、AVPlayerができなかった動画プリロードと、同じ動画再生時の最適化です。

Pococha内で検証した結果、このプレーヤーを使うことでアイテム動画を再生した際に、CPU使用率が最大35パーセント改善できました。

HEVCPlayerViewは、すでにオープンソース化しており、詳細を説明するブログもあるので、興味がある人はこちらのブログをチェックしてもらえればと思います。

Android側新フォーマット、Alpha Packedの対応

次に、Android側のAlpha Packedの対応です。Alpha Packedのアプリ側の対応は、2つの動画の読み込みを1つにして、レンダリングのそれぞれのメイン部分とアルファ部分のテクスチャをOpenGLを使って合成して表示します。

端末にもよりますが、Pococha側が検証した結果、Android側のCPU使用率は、約26パーセント改善することができました。

アプリ側の対応が終わったので、次は既存のアイテムの動画への対応です。現状のアイテム動画素材は、デザイナーが「Adobe After Effects」というソフトを使って書き出していて、そのソフトは最新のHEVC With AlphaとAlpha Packedに対応していません。

すでにリリースした動画アイテムの素材も変更する必要があるので、古い素材から新しいフォーマットに変更できるアプリを作ることになりました。

デザイナーがAdobe After Effectsで作成した動画は、この変換アプリを使って、HEVC With AlphaとAlpha Packed両方に書き出すことができます。素材が多い場合、バッチ処理および動画素材の品質調整もできます。

最初はコマンドラインで用意していましたが、デザイナーが使いにくいのでGUIで提供するかたちになりました。現状はMacのみに対応しています。以上が既存アイテムへの対応です。

最後のまとめです。Pocochaアイテム動画の現状を把握してから、動画技術の検証、各プラットフォームの最適化を行ってきました。アイテム再生を動画にした経緯は、弊社の平野（平野朋也氏）の「iOSDC Japan 2018」の発表を参考にしてもらえればと思います。　

私の発表は以上です。ご視聴ありがとうございました。