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