サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h3>はじめに</h3>

<p>20新卒として、動画配信事業部配信基盤グループへ7月に配属された中村(<a href="https://twitter.com/zyackusan/" target="_blank">@zyackusan</a>)です。 配信基盤グループでは、DMMの動画サービスにおいて動画や画像を配信する基盤の開発・運用を行っています。 具体的にやっていることは、以前の連載記事がありますのでそちらをぜひご覧ください！</p>

<p><a data-track-component="entry_title" href="https://inside.dmm-corp.com/articles/evolving_content_delivery_platform_00" target="_blank">連載、始めます ～進化する動画配信基盤～</a></p>

<p>この記事では、配属されて最初に任された仕事と並行して作成したPython製のツールについて、その概要と開発に至った経緯について紹介します。</p>

<p>現在もチームの技術領域を把握することに専念しており、そのなかでも最初に任された仕事である「コンテンツホルダー向けの納品要件」を策定する仕事と並行して、動画の品質を可視化するダッシュボード・ツールを開発しました。 この可視化ツールを仕事の合間に最小限の労力でどのようにして開発したのか、以下に詳細にお伝えしていきます。</p>

<h3>新卒の初仕事</h3>

<p>配属されて最初に任された仕事は、コンテンツホルダー向けの４K動画の納品要件を策定することでした。</p>

<p>納品要件とは、作品を卸すコンテンツホルダーから受け取る動画のエンコード・パラメータを定義したものです。 この取り決めがあることで、動画作品の品質を維持しつつ、大きすぎないファイルサイズで受け渡せます。 動画事業ではH.264でエンコードしたmp4ファイルを受領しています。</p>

<p>今回の納品要件決めで調査したのは次のパラメータです。</p>

<ul>
	<li>ターゲットビットレート</li>
	<li>最大ビットレート</li>
	<li>H.264のプロファイル(Main or High)</li>
</ul>

<p>以前から納品要件そのものはありましたが、サービス黎明期にエビデンスがなく設定されたものや、時代の変化に伴って形骸化していた部分もあったので、それらを見直す必要がありました。 今回は様々なエンコード・パラメータで書き出した動画の品質を比較することで、その傾向を定量的に導き出すとともに、撮影時の動画と遜色ない品質を出せる組み合わせを探すことが私の仕事になりました。</p>

<p>動画の品質を定量的に評価する指標が数あるなか、今回はVMAFとSSIMを使いました。 それぞれ次のような特徴があります。</p>

<ul>
	<li><strong>VMAF</strong>&nbsp;動画の主観的な品質を評価するためのにNetflixが開発した指標です。&nbsp;<a href="https://github.com/Netflix/vmaf" target="_blank">https://github.com/Netflix/vmaf</a></li>
	<li><strong>SSIM</strong>&nbsp;二つの動画の類似具合を評価する指標です。 エンコードした動画の劣化具合を定量的に評価することが期待できます。&nbsp;<a href="https://ece.uwaterloo.ca/~z70wang/research/ssim/" target="_blank">https://ece.uwaterloo.ca/~z70wang/research/ssim/</a></li>
</ul>

<p>両指標とも、エンコード前後の動画を比較することで品質を評価しています。 そして、これらの指標を評価するのに用いるのがエンコードツールのFFmpegです。 libvmafをリンクしたFFmpegのビルドを用いることで、フレームごとにVMAFとSSIMを評価した結果がxml形式のファイルで出力されます。 今回は、次のようなコマンドを実行しました。</p>

<pre>
<code>ffmpeg -i $1 \
       -i $2 \
       -filter_complex "\
       scale=3840:2160:flags=bicubic, \
       libvmaf=vmaf_4k_v0.6.1.pkl:model_path=./vmaf/model/vmaf_4k_v0.6.1.pkl:ssim=1:psnr=1:log_path=$OUT_LOG" \
       -an \
       -f null -</code></pre>

<p>出力されたxmlファイルは、次の図に示すとおり、フレームごとにVMAFやSSIMの評価値が記録されています。 好みの言語とライブラリを使って、このファイルを様々な手法で解析することにより定量的な評価が可能になります。 私は、最初の頃Pythonとpandas・Jupyter Notebookなどを使って、平均や分散・フレームごとのスコアなどを解析していました。</p>

<p style="text-align:center"><img alt="" height="302" src="https://image.dmm-corp.com/7yo4sw55n31z4xihwygn8dhj3gb8" width="800" /></p>

<p>しかし、要件を決めるにあたって、新卒ならでは、動画に疎い人間ならではのキャッチアップしていくうえでの問題が生じます。 配属された当初、私は動画に関わる技術の基本的な部分を知りませんでした。 例えば、コーデック・FFmpeg・動画の品質を決める要素など、動画サービスを実現するうえでの基本的な部分がそれにあたります。 この程度の専門性では、当然１人で判断して結論を出すことができないので、最終的なパラメータの決定では、先輩社員と相談のうえで決めることにしました。</p>

<p>そのため、次の図の流れのように、集計・分析・相談のサイクルを繰り返すことで最終的に納品要件を決めることになったのですが、コミュニケーション面で１つの問題が生じました。 2020年、新型コロナの流行により、チームはリモートワークに移行していたので、たいていのコミュニケーションはSlackかzoomを用いるようになっていました。 先輩社員との相談でも、zoomで繋いでグラフが書き出されたJupyter Notebookを画面共有しながら行っていました。 私が作ったグラフと自分なりの判断を先輩社員に説明し、それを受けてアドバイスを受けたり、別のグラフを求められたりしました。 ただ、それらの助言をグラフに落とし込むのには少々時間がかかり、グラフを作り直すたびにzoomを繋ぎ直すことによって仕事の効率は下がってしまいました。 つまり、使っていた集計・分析のツールによって、このサイクルを高速に回すことができなかったのです。 そこで、この技術的な問題を解決する策として、グラフのパラメータをその場でインタラクティブに操作できる動画の品質評価ツールを実装しようということになりました。 また、今後も品質の分析で同様のことをするかもしれないので、使い捨てのコードではなく、ある程度ツールとしての体裁を整えることにしました。</p>

<p style="text-align:center"><img alt="" height="600" src="https://image.dmm-corp.com/giajes7rpej44arsdyo1b4g50u8s" width="800" /></p>

<h3>どんなデータが欲しい？</h3>

<p>方針としてはこんな感じです。</p>

<ul>
	<li>各変数の変化によって、どのように指標値が推移していくか（変数の値が異なる動画を比較したり、傾向を見つけたりする）</li>
	<li>フレームごとに指標値がどのように推移しているか（動画の動きによっては指標値の値が急激に低下する時間があるので、そういった推移を見たい）</li>
	<li>比較対象になった動画の情報についてざっと一覧表示</li>
</ul>

<p>フレームごとに品質を確認することで、動画内での動きに応じて品質の変化を確認することにしました。 動画内の動きに応じて品質が瞬間的に低下することがあります。 エンコード・パラメータによって下がり具合に違いがあるので、より安定して品質を維持できるパラメータの組み合わせを探す際に有効になります。 平均や分散・最低値などに数値を取り出すことで、より定量的な判断が期待できます。</p>

<p>コミュニケーションを取る際には、グラフを用いた直感的な手段があると良いでしょう。 そこで、フレームごとのスコアを比較できるように次のような機能も求められます。</p>

<ul>
	<li>フレームごとに表示されるVMAFやSSIMの値</li>
	<li>二つのエンコード・パラメータでのスコアの差分</li>
	<li>1フレーム前との差分</li>
</ul>

<h3>お手軽に可視化ツールを作りたい</h3>

<p>今回は、ツールを作ること自体が仕事の目的ではないので、検証作業と並行してできるぐらいの労力で可視化ツールを作らなければなりません。 わざわざフロントエンドを構築するよりは、それまで書いていた有り合わせのPythonコードを流用して、Jupyter Notebookをそのままダッシュボードにするほうが楽なので、それを実現できる方法を探すことにしました。</p>

<p>そして見つけたがVoil&agrave;とipywidgetsです。</p>

<ul>
	<li><strong>Voil&agrave;</strong>&nbsp;Jupyter Notebookをダッシュボードにしてくれるツール ビューをタイルにして自由に配置したりもできますが、今回のツールでは一枚板にしたので固定です。&nbsp;<a href="https://github.com/voila-dashboards/voila" target="_blank">https://github.com/voila-dashboards/voila</a></li>
	<li><strong>ipywidgets</strong>&nbsp;Jupyter NotebookやIPython向けにHTMLベースのウィジェットを提供してくれます。 ボタンやスライダーのみならず、タブバーやファイルアップロードのウィジェットなどもあります。&nbsp;<a href="https://github.com/jupyter-widgets/ipywidgets" target="_blank">https://github.com/jupyter-widgets/ipywidgets</a></li>
</ul>

<p>この二つを使えば、ダッシュボード・ツールはある程度作れそうです。 Voil&agrave;を使わずともJupyter Notebookだけでツールっぽく振る舞うこともできますが、Voil&agrave;を使うことでコードパネルを隠すことができるので、よりツールらしい体裁にできます。 ipywidgetsはフロントエンドの知識なしで簡単にGUIのビューを表示させることができますが、反面、レイアウトに対する自由度は低いです。 せいぜい、ウィジェットの縦と横の長さを変えたり、ウィジェットの縦横の並びを変えたりする程度のことしかできません。 ただ、今回のツールはチーム内で使えれば良いので、この手軽さとレイアウトの自由度のバランスはちょうど良いと感じました。</p>

<p>インタラクティブなグラフを提供するライブラリにはPlotlyを用いました。</p>

<ul>
	<li><strong>Plotly</strong>&nbsp;Jupyter Notebookでも動かせるインタラクティブな可視化ライブラリ 無料版と有料版がありますが、無料版で全く問題ないです。&nbsp;<a href="https://github.com/plotly/plotly.py" target="_blank">https://github.com/plotly/plotly.py</a></li>
</ul>

<h3>完成したもの</h3>

<p>完成した可視化ツールはスクリーンショットのような外観になりました。</p>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="443" src="https://image.dmm-corp.com/r01bf8tneuxz9noczjt14govnrft" width="800" />
<figcaption>ログファイルの入力画面</figcaption>
</figure>
</div>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="443" src="https://image.dmm-corp.com/o9vrligy9ys5k410dgcnbfswvkj8" width="800" />
<figcaption>統計情報の画面</figcaption>
</figure>
</div>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="585" src="https://image.dmm-corp.com/5yct1b1792xphosya4cj6j8p3fb4" width="800" />
<figcaption>ログを比較する画面</figcaption>
</figure>
</div>

<div style="text-align:center">
<figure class="image" style="display:inline-block"><img alt="" height="378" src="https://image.dmm-corp.com/czss5lz0g2yscczavuqm7m2e1gyy" width="800" />
<figcaption>ログの一覧画面</figcaption>
</figure>
</div>

<p>大まかに使い方を説明するとこんな感じです。</p>

<ul>
	<li>VMAFとSSIMを評価した結果のxmlファイルをアップロードする</li>
	<li>それぞれのエンコード・パラメータとファイルの対応を手動で設定する</li>
	<li>タブを移動することで、全体の傾向や各エンコード・パラメータの比較、表形式による動画の品質情報を確認する</li>
</ul>

<p>Plotlyのスクリーンショット機能で、グラフの画像を保存することも可能です。</p>

<p>また、グラフを下の動画のようにズームインして、急激にVMAFの値が低下したフレーム番号を確認できます。 そのため、対応する検証対象の動画を並行して確認しながら、水の流れるシーンや動きの激しいシーンでのエンコードの劣化具合を確かめるといった作業もコードを書き換えることなく行うことができます。</p>

<p style="text-align:center"><img alt="" height="594" src="https://image.dmm-corp.com/7a7p8fktbsqcqk8xux9fhxqtpfpj" width="800" /></p>

<p>注意しなければならなかったのは、Jupyter Notebook上で今回のようなツールを作ろうとすると簡単にスパゲッティ・コード化することです。 GUIを提供するipywidgetsも、ウィジェットのインスタンスにイベントハンドラを関数として渡すだけで、枠組みとしてはとても質素です。 自身でMVCなどのアーキテクチャを意識して整備しておかないと、後々負債になるでしょう。</p>

<h3>使ってみてどうだった？</h3>

<p>可視化ツールを作ってからの作業効率が大幅に改善されました。 先輩社員とzoomを繋ぎながら、その場でいろいろなグラフを作ることができるようになったので、仕事のサイクルを高速に回すことができるようになりました。 例えば、フレームごとの指標値を見ながら、瞬間的に低下しているフレーム番号へズームインして、複数あるエンコード・パラメータのうち、どれが品質を劣化させにくいかをその場で比較して回ったことなどが挙げられます。 他にも、ターゲットビットレートを順次上げれば指標値も上がっていたのが、一定のビットレートになるとVMAFもSSIMも上がりにくくなることが可視化ツールによる分析から見えてきました。 そのため、ファイルサイズなども考慮して、このぐらいのビットレートで十分だよね、などといった判断をコードの改変なしにできました。 結果的に、数回の相談で結論を出すことができました。 当初は、納品要件策定の期限を１ヶ月半ほどに設定していましたが、１ヶ月もかからずに仕事を終えることができたので、追加でSDやHD画質の納品要件を決める作業を始め、これも２週間足らずで終わらせることができました。 これらは、技術的な改善による生産性向上の表れだと言えるでしょう。</p>

<p>学生時代からJupyter Notebookはよく使っていましたが、Voil&agrave;などのツールを使うことで今回のような可視化ツールを作ることができるのは新しい発見でした。 チーム内向けに簡単なUIの載ったツールを提供するシーンでは、今回のようにJupyter Notebook周辺の技術を使うほうが良いのかもしれません。</p>

<h3>終わりに</h3>

<p>今回の記事では、仕事の合間に開発したツールの概要と経緯について紹介しました。</p>

<p>新卒として働くにあたって、未知の領域であった動画サービスに係る技術をキャッチアップしていく必要がありました。 そのような状態だった私にとって、今回の納品要件決めは最初の仕事として最適な内容だったと感じます。 また、業務の一環として作ったツールをチームの上司や先輩方に評価していただき、こうして記事をまとめることができたのは幸いなことです。 何よりも、チームとして新卒を育てていくという環境が充実していると感じます。</p>

<p>あともう少しすれば「新卒」という肩書きが外れるわけですが、それまでにチームの一員として事業部の一員として会社を支える一人前の存在になれるようにがんばっていきます。</p>


DMM TV

動画

ITインフラ

配信基盤

新卒1年目のエンジニアが動画の品質可視化ツールを作るまで

新卒1年目のエンジニアが動画の品質可視化ツールを作るまで

シェア

関連する求人

関連する記事

関連するサービス