Anki 2.1.0 (beta) で H.264 や MP3 の再生を可能にする方法

Anki のブラウザコンポーネントについて

まだ正式にリリースされていませんが、Anki 2.1.0 で Qt のバージョンが更新され、またブラウザ機能を提供するコンポーネントとして新しく QtWebEngine が導入されました。 Anki 2.1.0 beta42 では Qt, QtWebEngine のバージョンは 5.9.2 です。

Qt 5.9.2 Change Files - Qt Wiki

changes-5.9.2\dist - qt/qtwebengine.git - Qt WebEngine

 - Chromium Snapshot:
   * Security fixes from Chromium up to version 61.0.3163.79
    Including: CVE-2017-5092, CVE-2017-5093, CVE-2017-5095, CVE-2017-5097,
        CVE-2017-5099, CVE-2017-5102, CVE-2017-5103, CVE-2017-5107,
        CVE-2017-5112, CVE-2017-5114, CVE-2017-5117 and CVE-2017-5

とあるので、QtWebEngine 5.9.2 は Chromium 61 相当でしょうか。

一方で、Anki 2.0.x が使用しているブラウザコンポーネントは QtWebKit 2.2 で、これは 2011 年のリリース…。

QtWebKit 2.2.0 is released! - Qt Blog

QtWebKitFeatures22 – WebKit

QtWebKitRelease22 – WebKit

考えるのも嫌になるぐらい大昔の化石ですね。もう Anki 2.0.x のことは忘れてしまいましょう。

さて、Anki を最新のものにアップデートすれば、大抵のデッキはまず問題なくそのまま動作するのですが、以前から例えば Android 向けの実装である AnkiDroid では、より新しいブラウザコンポーネントが使用できていました。 極めて稀だとは思いますが、このような環境向けに、HTML5 Media API を使用する（Anki の [sound: xxx.mp3] タグではなく、JavaScriptでaudio/videoを直接操作している）デッキを作成し、運用している場合。または新しくこのようなデッキを導入する場合、最新のデスクトップ向け Anki でも、問題が生じるかもしれません。以下のような制限があるためです。

Qt WebEngine supports the MPEG-4 Part 14 (MP4) file format only if the required proprietary audio and video codecs, such as H.264 and MPEG layer-3 (MP3), have been enabled.

Qt WebEngine Features | Qt WebEngine 5.9

特定のメディア（H.264, MP3 など）について、ライセンス上の制限のため、デフォルトでは再生することができません。この問題を回避するには、-proprietary-codecs オプションを付加してコンパイルした QtWebEngine が必要です。

コンパイルしたものはこちら。商用利用にはライセンスが必要です

コンパイル

環境

>perl -v

This is perl 5, version 26, subversion 2 (v5.26.2) built for MSWin32-x64-multi-thread

～略～

>python --version
Python 2.7.13

ソース

http://download.qt.io/archive/qt/5.9/5.9.2/single/ から http://download.qt.io/archive/qt/5.9/5.9.2/single/qt-everywhere-opensource-src-5.9.2.tar.xz を拾ってきます。

依存ツール

手順

ソースを解凍後、生成された qtwebengine ディレクトリに、依存ツール（bison, flex, gperf）を放り込みます。 開発者コマンドプロンプト for VS2015 で qtwebengine を開き、-proprietary-codecs オプションを付けて qmake を実行します。結果は以下のようなものです。

C:\Qt\qt-everywhere-opensource-src-5.9.2\qtwebengine>"C:\Qt\5.9.2\msvc2015\bin\qmake.exe" -- -proprietary-codecs

Running configuration tests...
Done running configuration tests.

Configure summary:

Qt WebEngine:
  Embedded build ......................... no
  Pepper Plugins ......................... yes
  Printing and PDF ....................... yes
  Proprietary Codecs ..................... yes
  Spellchecker ........................... yes
  WebRTC ................................. yes
  Using system ninja ..................... no

Qt is now configured for building. Just run 'nmake'.
Once everything is built, Qt is installed.
You should NOT run 'nmake install'.
Note that this build cannot be deployed to other machines or devices.

Prior to reconfiguration, make sure you remove any leftovers from
the previous build.

Proprietary Codecs ..................... yes になっていることを確認してください。確認できたら nmake するだけです。数時間以上かかります。気長に待ちましょう。

Anki コンポーネントの上書き

C:\Program Files (x86)\Anki に Qt5WebEngineCore.dll などがありますので、これらを成果物に置き換えます。

以上です。お疲れ様でした。