Windows下定制编译QtWebEngine

公司一款产品的客户端使用了c/s、b/s混合模式，其中在线媒体浏览使用Html5的多媒体支持特性实现。然后，问题出来了：Qt自带的Webengine版本（Qt 5.6）不支持.mp4格式的多媒体文件，只能在线播放ogg。编译使用了visual studio 2015。

【编译参考】

linux：https://wiki.qt.io/How_to_Try_QtWebEngine

windows：https://wiki.qt.io/QtWebEngine_on_Windows

1、修改webengine编译参数

C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\core\gyp_run.pro：

看到有下面的信息：

contains(WEBENGINE_CONFIG, use_proprietary_codecs): GYP_CONFIG += proprietary_codecs=1 ffmpeg_branding=Chrome

所以修改（绿色字体）：

} else {

    # !cross_compile
    GYP_ARGS = "-D qt_cross_compile=0"
    linux: include(config/desktop_linux.pri)
    mac: include(config/mac_osx.pri)
    win32: include(config/windows.pri)
}
#//!zf 启用所有编码器

GYP_CONFIG += proprietary_codecs=1 ffmpeg_branding=Chrome

2、ffmpeg配置

C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\ffmpeg\ffmpeg.gyp：

  'variables': {
    'use_system_ffmpeg%': 0,

  },

增加一行：

  'variables': {
    'use_system_ffmpeg%': 0,
     'ffmpeg_branding%':"Chrome",

  },

另外在qtwebengine的pro文件增加选项（不能确定是否必须）：C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\qtwebengine.pro

load(qt_build_config)
load(qt_parts)

WEBENGINE_CONFIG += use_proprietary_codecs

3、运行configure后nmake module-qtwebengine

参考：configure -mp -debug -nomake examples -nomake tests -opensource  -platform win32-msvc2015 -qmake -icu -opensource -c++11 -make libs -ID:\libraries\include\icu  -L D:\libraries\lib

ICU库可以从这里下载：http://site.icu-project.org/download/

脚本会根据上述两个文件确定是否增加其他的解码器

常见错误：

1、运行时缺少资源文件

QML debugging is enabled. Only use this in a safe environment.
Qt WebEngine ICU data not found at C:/Qt/qt-everywhere-opensource-src-5.6.0/qtba
se/resources. Trying parent directory...
Qt WebEngine ICU data not found at C:/Qt/qt-everywhere-opensource-src-5.6.0/qtba
se. Trying application directory...
Qt WebEngine ICU data not found at g:/build-QtWebEngine-Desktop_Qt_5_6_0_MSVC201
5_64bit-Debug/debug. Trying fallback directory... The application MAY NOT work.
Installed Qt WebEngine locales directory not found at location C:/Qt/qt-everywhe
re-opensource-src-5.6.0/qtbase/translations\qtwebengine_locales. Trying applicat
ion directory...
Qt WebEngine locales directory not found at location g:/build-QtWebEngine-Deskto
p_Qt_5_6_0_MSVC2015_64bit-Debug/debug\qtwebengine_locales. Trying fallback direc

tory... Translations MAY NOT not be correct.

（qtwebengine\src\core\Debug_x64\gen\repack可以找到：

qtwebengine_locales文件夹（对应translations)

qtwebengine_resources.pak、qtwebengine_resources_100p.pak、qtwebengine_resources_200p.pak(对应resources)

qtwebengine\src\core\Debug_x64可以找到：

icudtl.dat

在bin目录下分别建立两个文件夹：

resources、translations，将上述文件（夹）copy进去）

2、重新配置：

C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\core

删除Makefile.* 文件

解决ninja文件不存在的问题：

nmake如果C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\core\Debug_x64\obj\下面的误删除了ninja文件，会报错，重新生成ninja文件的方式为：

在\qtwebengine\src\core运行qmake  gyp_run.pro -o Makefile.gyp_run

3、文件编码

ninja: build stopped: subcommand failed.
NMAKE : fatal error U1077: 'C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine
\src\3rdparty\ninja\ninja.exe' : return code '0x1'
Stop.
NMAKE : fatal error U1077: '"C:\Program Files (x86)\Microsoft Visual Studio 14.0
\VC\BIN\amd64\nmake.exe"' : return code '0x2'
Stop.
NMAKE : fatal error U1077: '(' : return code '0x2'
Stop.
NMAKE : fatal error U1077: 'cd' : return code '0x2'
Stop.
NMAKE : fatal error U1077: 'cd' : return code '0x2'

Stop.

c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third
_party\libjingle\source\talk\app\webrtc\dtmfsender.cc: error C2220: warning trea
ted as error - no 'object' file generated
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third
_party\libjingle\source\talk\app\webrtc\dtmfsender.cc: warning C4819: The file c
ontains a character that cannot be represented in the current code page (936). S

ave the file in Unicode format to prevent data loss

解决办法是把文件格式转变为utf-8 bom (utf-8-sig)

如果不想一个个的转换，把下属列表保存到一个文本文件内，使用后面的python脚本转换：

c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\snappy\src\snappy-stubs-internal.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\re2\re2\unicode_casefold.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\qcms\src\qcms.h
 c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\openmax_dl\dl\api\omxtypes.h
 c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\harfbuzz-ng\src\hb-private.hh  
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\harfbuzz-ng\src\hb-ot-head-table.hh
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\harfbuzz-ng\src\hb-ot-layout-common-private.hh 
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\harfbuzz-ng\src\hb-ot-shape-complex-indic.cc
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\harfbuzz-ng\src\hb-ot-shape-complex-thai.cc
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\boringssl\src\include\openssl\aead.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\boringssl\src\include\openssl\engine.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\boringssl\src\crypto\cmac\cmac.c
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\boringssl\src\crypto\rsa\internal.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\skia\src\effects\skdisplacementmapeffect.cpp
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\crypto\p224.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\crypto\p224.cc
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\v8\src\parser.cc
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\libxslt\libxslt\xslt.c
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\net\quic\crypto\crypto_handshake_message.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\media\formats\mp2t\ts_section_pmt.h
c:\qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\libjingle\source\talk\app\webrtc\dtmfsender.cc

import sys
import os
import codecs
import chardet

def utf8_converter(file_path , universal_endline =True ):
    # Read from file
    print("file:"+ file_path)
    file_open = open(file_path, "rb")
    raw = file_open.read()
    encoding_name = chardet.detect(raw)[ 'encoding']
    print(encoding_name )
    file_open.close()
    # Decode
    raw = raw.decode(encoding_name)
    # Remove windows end line
    if universal_endline:
        raw = raw.replace( '\r\n', '\n')
    # Encode to UTF-8-sig
    raw = raw.encode('utf-8-sig')

    file_open = open(file_path, 'wb')
    file_open.write(raw)
    file_open.close()
    return 0

if __name__ == '__main__' :
    file = sys.argv[1].encode( 'unicode_escape')
    f = open(sys.argv[1], "r")
    s = f.read()
    files = s.split("\n")
    for file in files:
        utf8_converter(file, False)
    f.close()

4、html5test.com测试结果，3D加速不能用

参考：

https://wiki.qt.io/Qt_5_on_Windows_ANGLE_and_OpenGL

http://doc.qt.io/qt-5/windows-requirements.html

ANGLE: This library converts OpenGL ES 2.0 API calls to DirectX 11 or DirectX 9 calls (depending on availability), removing the need to install graphics drivers on the target machines.

For Qt Quick 2 to work, a graphics driver that provides OpenGL 2.1 or higher is required. The default driver from Windows is OpenGL 1.1. Qt includes a version of the ANGLE project which is included from the Windows Qt installers. ANGLE implements the OpenGL ES 2.0 API on top of DirectX 11 or DirectX 9. ANGLE requires that the DirectX SDK is installed when building Qt.

ANGLE chooses the render backend depending on availability. DirectX 11 is usually preferable. However, some graphics cards may not fully support it. For these cases, the environment variableQT_ANGLE_PLATFORM (introduced in Qt 5.4) can be used to control the render backend. Possible values are d3d11, d3d9 and warp.

To use a custom version of ANGLE, set the ANGLE_DIR environment variable to point to the ANGLE source tree before building Qt.

set QT_ANGLE_PLATFORM=3d39

C:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\3rdparty\chromium\third_party\angle\src\angle.gyp

c:\Qt\qt-everywhere-opensource-src-5.6.0\qtwebengine\src\core\web_engine_context.cpp

中有这么一段代码：

    if (usingANGLE() ||usingSoftwareDynamicGL() || usingQtQuick2DRenderer()) {
        parsedCommandLine->AppendSwitch(switches::kDisableGpu);
    } else {
        const char *glType = 0;
        if (qt_gl_global_share_context()->isOpenGLES()) {
            glType = gfx::kGLImplementationEGLName;
        } else {
            glType = gfx::kGLImplementationDesktopName;
        }

        parsedCommandLine->AppendSwitchASCII(switches::kUseGL, glType);

    }

nmake cleandist 太漫长了，直接configure:

configure -mp -debug -nomake examples -nomake tests -opensource  -platform win32-msvc2015 -qmake -icu -opensource -confirm-license-opengl desktop  -no-angle -I D:\libraries\include\icu  -L D:\libraries\lib

不使用angle，看看编译后是否支持3d。

..........

..........

可能是没完全清理的缘故，编译后还是无法启用webgl。安装Qt的官方编译版本，检查加载的动态库，发现的确是不包含opengl es相关库。

（编译一次太漫长了，如果有人解决过类似问题，请不吝指教）

附上本人使用vs2015sp1编译的debug版本：

http://pan.baidu.com/s/1kVHFvzL