CrossWalk WebView添加支持WebRTC及H264编解码

前言

1.WebView简介

ＷebView是Android平台上的一个非常重要的系统组件，用于将一个显示浏览器页面的窗口嵌入到应用程序，并提供一组接口让开发者定制一些页面加载及JavaScript对话框等．
早期的ＷebView（Android4.4以前）基于WebKit实现，可以简单理解为直接在WebKit代码库中增加一个分支，解决Android平台特定的页面渲染方式以及通过JNI接口将WebKit的功能桥接为Java层的API接口。在图形方面，WebView和Android平台一样，采用的是Skia图形库，但没有启用硬件加速，渲染性能非常不好，这也是许多使用者经常抱怨的诟病之一．
随着Android 4.4平台的发布，基于Chromium开源项目的WebView成为平台的一大亮点，新版WebView采用了与Chrome浏览器相同的Blink渲染引擎，v8 JavaScript引擎，网络库以及内存分配器，在HTML5特性支持方面不仅与Chrome保持了更高的一致性，而且还弥补了旧版WebView在渲染性能方面的不足．

2.背景

最近在使用混合APP（Hybird APP）的开发模式，进行WebRTC相关功能开发的可行性研究，采用混合模式开发的好处就是不用频繁升级手机端APP，只需服务器前端调整即可实现H5相关部分的更新，而且可以在Android或iOS的上同时运行，让用户的体验更好又可以节省开发的资源．有人对APP开发的各种模式进行了详细对比，可参考Native/Hybrid/React/Web App方案的分析比较．
典型应用如网易云音乐，京东，淘宝等应用，但是开发时，根据业务内容的不同，对于H5支持的WebView，也面临一些选择，各有优缺点，如下：

Android原生的WebView
碎片化太严重，各个手机厂家支持情况不一样，如果使用Android WebView的方式开发实现WebRTC，势必会被适配手机型号问题搞崩溃；
重新编译Chromium的Android WebView
但是需要替换手机的webview.apk，即需要root手机；
CrossWalk
CrossWalk官方目前已停更，是基于Chromium WebView实现，编译出来集成到APP上体积至少增加20+ M，好处是不依赖平台，GitHub上能找到一些基于CrossWalk后续的更新，目前有找到更新到Chromium 64版本的，如wesley-crosswalk，tenta-browser，ks32等。
腾讯X5内核SDK
X5也是基于Chromium内核的，相比原生的 WebView 而言，优化了用户的浏览体验，SDK 是通过共享使用用户手机上微信、手机QQ、QQ空间等软件已经下载好的X5内核，生成的APK体积小，但前提是手机上已经有QQ或者WeChat应用，如果没有，X5会回退调用原生Android WebView；

经过分析比较，觉得还是使用CrossWalk自己编译内核比较靠谱，不怕坑，有源码就有办法解决问题及填坑．

编译CrossWalk

1.编译环境

与编译WebRTC一样，首先安装depot_tools工具，

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

谷歌推荐Chromium的编译平台需求为：

A 64-bit Intel machine running Linux with at least 8GB of RAM. More than 16GB is highly recommended.
At least 100GB of free disk space.
You must have Git and Python installed already.

官方推荐使用Ubuntu，使用build/install-build-deps.sh脚本安装依赖库发现支持为Ubuntu 12.04 (precise), 14.04 (trusty),14.10 (utopic), 15.04 (vivid), 15.10 (wily) and 16.04 (xenial) ，注意这里只是此脚本支持的平台，方便安装依赖而已，如果是其他Linux发行版的话，自己手动安装也是可以（就不必手动执行这个脚本）．

比如以下是我在CentOS7上的依赖库安装：

$yum install git python bzip2 tar pkgconfig atk-devel alsa-lib-devel \
bison binutils brlapi-devel bluez-libs-devel bzip2-devel cairo-devel \
cups-devel dbus-devel dbus-glib-devel expat-devel fontconfig-devel \
freetype-devel gcc-c++ glib2-devel glibc.i686 gperf glib2-devel \
gtk3-devel java-1.*.0-openjdk-devel libatomic libcap-devel libffi-devel \
libgcc.i686 libgnome-keyring-devel libjpeg-devel libstdc++.i686 libX11-devel \
libXScrnSaver-devel libXtst-devel libxkbcommon-x11-devel ncurses-compat-libs \
nspr-devel nss-devel pam-devel pango-devel pciutils-devel \
pulseaudio-libs-devel zlib.i686 httpd mod_ssl php php-cli python-psutil wdiff \
xorg-x11-server-Xvfb

如果熟悉使用docker的话，这里有一个我制作好的Ubuntu 16.04镜像，可以通过

$docker pull lixiaofan0122/ubuntu-16.04-crosswalk-build-env

直接拉取使用，所有环境及依赖已经装好．

2.获取代码

创建一个工作目录，配置CrossWalk的git repo，

#XWALK_OS_ANDROID=1表示后续会拉取编译Android版本相关源码
$export XWALK_OS_ANDROID=1
$mkdir ~/crosswalk-src && cd ~/crosswalk-src
$gclient config --name src/xwalk https://github.com/wesley-fly/wesley-crosswalk.git@origin/crosswalk-23

此时会在当前目录下生成一个.gclient的隐藏文件，在这个文件末尾加入target_os = ['android']，保存退出即可．
接下来开始同步代码，这个过程依赖网速，会开始拉取Google Chromium及ndk相关源码，总计在50G左右，可以考虑干点其他事情，如果失败，可多次执行（过程中会拉取很多个git repo，在拉取某一个git的过程中失败的话，重新执行会从头拉取这个git repo）：

$gclient sync

成功之后，进入src目录，使用gn命令创建项目，会出现交互式文本编辑，类似vim一样，输入你需要的编译参数：

$cd src/
#其中Release_Android为自定义的项目名称
$gn args out/Release_Android# 编译参数下面参数为编译支持WebRTC以及h264编解码的配置参数
# Build arguments go here. Examples:
#   is_component_build = true
#   is_debug = false
# See "gn args <out_dir> --list" for available build arguments.
import("//xwalk/build/android.gni")
is_debug = false
target_os = "android"
ffmpeg_branding = "Chrome"
#网上有其他文章说只需配置以下两行就可以，而且不用给ffmpeg打补丁，一开始也按照这样做，发现根本不行，也不知道原因
proprietary_codecs = true
rtc_initialize_ffmpeg = true
rtc_use_h264 = true
#支持h264编解码主要就是靠上面3行 + 下面的ffmpeg补丁
target_cpu = "arm"
enable_nacl = false
symbol_level = 0
remove_webcore_debug_symbols = true
use_aura = false
use_ozone = false
enable_plugins = false
disable_bundled_extensions = true
v8_use_snapshot = true
enable_webrtc = true
is_official_build = true
v8_enable_i18n_support = false
disable_ftp_support = true
disable_libfuzzer = true

使用:wq保存退出，接着ffmpeg打入增加h264软件编解码的补丁，有了之前WebRTC支持软硬件h264编解码的经验，发现还是有些区别，但是大同小异，可能是因为这里使用的ffmpeg的版本不同的原因，如下：

[lee@CentOS7 ffmpeg]$ git status
# HEAD detached at d45f90e
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#   modified:   chromium/config/Chrome/android/arm-neon/config.h
#   modified:   ffmpeg_generated.gni
#
no changes added to commit (use "git add" and/or "git commit -a")
[lee@CentOS7 ffmpeg]$ git diff ffmpeg_generated.gni
diff --git a/ffmpeg_generated.gni b/ffmpeg_generated.gni
index e952679..654459b 100644
--- a/ffmpeg_generated.gni
+++ b/ffmpeg_generated.gni
@@ -11,7 +11,7 @@ import("ffmpeg_options.gni")ffmpeg_c_sources = []ffmpeg_gas_sources = []ffmpeg_yasm_sources = []
-
+is_linux = trueif ((is_android && current_cpu == "arm" && arm_use_neon && ffmpeg_branding == "Chrome") || (is_android && current_cpu == "arm" && arm_use_neon && ffmpeg_branding == "Chromium") || (is_android && current_cpu == "arm" && ffmpeg_branding ==ffmpeg_c_sources += ["libavcodec/allcodecs.c",
@@ -678,4 +678,4 @@ if (is_linux && current_cpu == "arm" && arm_use_neon && ffmpeg_branding == "Chro"libavcodec/arm/simple_idct_neon.S",]}
-
+is_linux = false
[lee@CentOS7 ffmpeg]$ git diff chromium/config/Chrome/android/arm-neon/config.h
diff --git a/chromium/config/Chrome/android/arm-neon/config.h b/chromium/config/Chrome/android/arm-neon/config.h
index 7962506..61f165b 100644
--- a/chromium/config/Chrome/android/arm-neon/config.h
+++ b/chromium/config/Chrome/android/arm-neon/config.h
@@ -709,7 +709,7 @@#define CONFIG_H263_DECODER 0#define CONFIG_H263I_DECODER 0#define CONFIG_H263P_DECODER 0
-#define CONFIG_H264_DECODER 0
+#define CONFIG_H264_DECODER 1#define CONFIG_H264_CRYSTALHD_DECODER 0#define CONFIG_H264_MMAL_DECODER 0#define CONFIG_H264_QSV_DECODER 0
@@ -2014,7 +2014,7 @@#define CONFIG_GSM_PARSER 0#define CONFIG_H261_PARSER 0#define CONFIG_H263_PARSER 0
-#define CONFIG_H264_PARSER 0
+#define CONFIG_H264_PARSER 1#define CONFIG_HEVC_PARSER 0#define CONFIG_MJPEG_PARSER 0#define CONFIG_MLP_PARSER 0

完成之后，终于可以编译了，开始编译Android APP使用的xwalk_core_library.aar文件，编译过程依赖机器性能，也是可以干点别的了．

$ninja -C out/Release_Android xwalk_core_library

CrossWalk使用示例

CrossWalk的API也很简单，使用方法跟Android WebView的API基本类似，不在此赘述．
我的GitHub上有个使用CrossWalk的基本使用方法，以及实现WebRTC h264的Demo，如果不想自己编译xwalk_core_library.aar的话，可以直接从代码中单独取出xwalk_core_library.aar自己使用，有兴趣的可以参考．
关于编译之后体积问题，可根据需要修改args的编译参数，我自己使用的编译参数最终得到的xwalk_core_library.aar文件约24MByte左右，体积还好，如果不使用WebRTC相关，应该还会再小一些．

参考资料：

[1] 认识Chromium WebView
[2] Chromium WebView Android编译方法
[3] Chromium WebView Android各平台依赖库的安装