How do I add media codecs support to Crosswalk while using the Cordova plug-in?

Question

I'm building a PhoneGap app which needs to play AAC audio. It works well using the native WebView, but I would like to use Crosswalk on a build targeting APIs 16-20 because some CSS features in my app do not work at all on Android 4.x.

When I make a copy of the project to add Crosswalk Lite, I can see that the app works except for the <audio> element pointing to a AAC file. This is because Crosswalk does not ship with proprietary codecs by default.

The linked page says:

To build Crosswalk with these codecs, a developer must run the build with the “must accept a EULA” switch turned on:

$ xwalk/gyp_xwalk -Dmediacodecs_EULA=1

Then build Crosswalk. The ffmpegsumo.dll or libffmpegsumo.so in the build output directory will contain the proprietary codecs.

Refer to Crosswalk Build Instruction for more details.

However, I am adding Crosswalk using the suggested plug-in, thus I get pre-built libraries without proprietary codecs:

phonegap plugin add cordova-plugin-crosswalk-webview  --variable XWALK_MODE="lite" --save

How can I integrate proprietary codecs in the Cordova Crosswalk plug-in?

Answer 1

I managed to understand the (convoluted) process of building everything. This answer deals with the process of compiling a custom build of the full Crosswalk (not the lite version).

Actually, I decided to finally use the standard build and replace AAC audio with MP3s, but I thought this answer could be useful for future reference.

Environment

I compiled Crosswalk in a Ubuntu 16.04 Docker container to avoid "polluting" my system and to ensure I had the right Linux version. The standard image is pretty barebones so I installed some dependencies. I also set up a shared folder to access the compiled files:

docker run -it -v /home/andrea/shared:/shared ubuntu:16.04 /bin/bash
apt update
apt install -y python git nano lsb-release sudo wget curl software-properties-common
export EDITOR=nano # life it too short to learn vi

Finally, it is necessary to add the multiverse repositories:

apt-add-repository multiverse

Note: this procedure needs a lot of space. Make sure to have at least 25GB of free space before continuing.

Requirements

Install the depot_tools as outlined in the documentation:

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH=$PATH:/path/to/depot_tools

Initialize a working directory with:

mkdir crosswalk-checkout
cd crosswalk-checkout
export XWALK_OS_ANDROID=1
gclient config --name src/xwalk https://github.com/crosswalk-project/crosswalk.git

Then edit the config file with nano .gclient and add the following line:

target_os = ['android']

Save the file.

Fetching the source

Attempt a first sync with:

gclient sync

This command will fail but it's OK. The instructions say:

Do not worry if gyp_xwalk fails due to missing dependencies; installing them is covered in a later section, after which you can run gyp_xwalk manually again.

Adjust the install-build-deps.sh file and then run it:

sed -si "s/msttcorefonts/ttf-mscorefonts-installer/g" src/build/install-build-deps.sh
sudo ./src/build/install-build-deps-android.sh

Run gclient sync again and wait until it finishes correctly.

Building

By inspecting the files src/xwalk/build/common.gypi and src/tools/mb/mb_config.pyl, we can see that we need to add ffmpeg_branding="Chrome" in the build arguments.

To prevent an error later on, install the development package related to libnotify:

sudo apt install libnotify-dev

Move to the src directory and open the configuration:

cd src/
gn args out/Default

Ensure the content is as follows:

import("//xwalk/build/android.gni")
target_os = "android"
is_debug = false
ffmpeg_branding = "Chrome"
use_sysroot = false

The parameters use_sysroot = false prevents yet another error. When saving the file, you should see something like this:

Waiting for editor on "/home/utente/crosswalk-checkout/src/out/Default/args.gn"...
Generating files...
Done. Wrote 6060 targets from 1003 files in 2416ms

Issue cd .. and run gclient sync again.

Finally, to build the core library do:

cd src/
ninja -C out/Default xwalk_core_library

This will build the library for ARM, producing an AAR file located at:

src/out/Default/xwalk_core_library.aar

Copy this file in a safe place.

Building for x86

Get back to the args with:

gn args out/Default

Add the following line:

target_cpu = "x86"

Save the file, run gclient sync again and then repeat the ninja command. Make a copy of the new AAR file which now contains the x86 libraries.

Using the AAR files

The standard Cordova Crosswalk plug-in uses a single AAR file with libraries for both platforms. This message by Raphael Kubo da Costa suggests how to produce this single archive:

AAR files are just zip files; given the only difference between the ARM and x86 AAR files are the different shared libraries, you can use something like zipmerge or anything that merges zip files (or even extract everything into some directory and then create one new zip file) to build one final, multi-architecture AAR archive.

Finally, to use the custom built AAR file in the Cordova plug-in, see How to change the Crosswalk version used by the Cordova Crosswalk Webview plugin.