1. 程式人生 > >從零開始基於ARM 交叉編譯開源瀏覽器webkit

從零開始基於ARM 交叉編譯開源瀏覽器webkit

出發點: 我想看免費的國內外網路電視,所以基於ARM板DIY一個Internet TV, 需要做的工作主要有:

               1) 編譯瀏覽器webkit

               2) 移植clutter webkit實現類似apple介面

               3) 移植Morphine.tv

設定環境變數和編譯配置

set cross compile environment firstly

export ARCH=arm
export CC=arm-none-linux-gnueabi-gcc
export CXX=arm-none-linux-gnueabi-g++
export BUILD_ROOT=$BUILD_ROOT
export PATH=$PATH:/opt/toolchains/arm-2007q3/bin/:$BUILD_ROOT/usr/bin
export PKG_CONFIG_PATH=$BUILD_ROOT/usr/lib/pkgconfig

1) zlib-1.2.3

./configure --prefix=$BUILD_ROOT/usr --shared && make && make install

2) libpng-1.2.10

./configure --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi CFLAGS=-I$BUILD_ROOT/usr/include LDFLAGS=-L$BUILD_ROOT/usr/lib

make &&make install

3)tiff-3.8.2

./configure --prefix=/$BUILD_ROOT//usr --host=arm-none-linux-gnueabi

make &&make install

4) jpeg-6b

./configure --prefix=/$BUILD_ROOT/usr --host=arm-none-linux-gnueabi

make &&make install

5)freetype-2.1.10

./configure --prefix=/$BUILD_ROOT/usr --host=arm-none-linux-gnueabi

make &&make install

6)libxml2-2.6.30

./configure --prefix=/$BUILD_ROOT//usr --host=arm-none-linux-gnueabi

make &&make install

7)fontconfig-2.4.2

./configure --prefix=$BUILD_ROOT/usr/ --host=arm-none-linux-gnueabi --target=arm-none-linux-gnueabi --includedir=$BUILD_ROOT/usr/include/ --libdir=$BUILD_ROOT/usr/lib --with-arch=arm

make && make install

8) xfree86 4.8.0

9)libXft-2.1.10

./configure --prefix=$BUILD_ROOT/usr/X11R6_SGX/ --includedir=$BUILD_ROOT/usr/include --libdir=$BUILD_ROOT/usr/lib --with-x --host=arm-none-linux-gnueabi --x-includes=$BUILD_ROOT/usr/X11R6_SGX/include/ --x-libraries=$BUILD_ROOT/usr/X11R6_SGX/lib/ LDFLAGS=-L$BUILD_ROOT/usr/X11R6_SGX/lib

make && make install

10)glib-2.14.0

add these lines into configure file

ac_cv_type_long_long=yes

glib_cv_long_long_format=ll

glib_cv_stack_grows=no

glib_cv_uscore=no

ac_cv_func_posix_getpwuid_r=yes

./configure --prefix=$BUILD_ROOT/usr/ --host=arm-none-linux-gnueabi --target=arm-none-linux-gnueabi --includedir=$BUILD_ROOT/usr/include/ --libdir=$BUILD_ROOT/usr/lib --with-arch=arm

make && make install

11)atk-1.20.0

./configure --prefix=$BUILD_ROOT/usr --build=i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi

make && make install

12) cairo-1.4.2

./configure --host=arm-none-linux-gnueabi --disable-nls --with-x --prefix=$BUILD_ROOT/usr --x-includes=$BUILD_ROOT/usr/include --x-libraries=$BUILD_ROOT/usr/lib

make && make install

13) pango-1.20.0

export FREETYPE_CONFIG=$BUILD_ROOT/usr/bin/freetype-config
export LDFLAGS="-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib"
export CFLAGS="`pkg-config --cflags glib-2.0 cairo` -I$BUILD_ROOT/usr/include/freetype2"
./configure --host=arm-none-linux-gnueabi --disable-nls --with-x --prefix=$BUILD_ROOT/usr --x-includes=$BUILD_ROOT/usr/include --x-libraries=$BUILD_ROOT/usr/lib

14)gtk+-2.10.1

./configure --disable-cups --disable-nls --enable-xim=no --disable-xim-inst --with-xinput=no  --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi  CFLAGS="`pkg-config --cflags cairo pango pangoft2 pangocairo` -I$BUILD_ROOT/usr/include -I$BUILD_ROOT/usr/include/freetype2"  CPPFLAGS="`pkg-config --cflags cairo pango pangoft2 pangocairo` -I$BUILD_ROOT/usr/include -I$BUILD_ROOT/usr/include/freetype2"

make && make install

15) tar zxvf icu4c-3_6-src.tgz and cd icu

CC=gcc

./configure --enable-static --disable-shared

make

cp -r bin bin.linux

cp -r data data.linux

cp -r tools tools.linux

make distclean

CC=arm-none-linux-gnuabi-gcc

./configure --enable-static --enable-shared --host=arm-none-linux-gnueabi --prefix=$BUILD_ROOT/usr/

make

#will fail: /bin/sh: ../bin/icupkg: cannot execute binary file

cp -r bin bin.$ARCH

cp -r data data.$ARCH

cp -r bin.linux/* bin

cp -r data.linux/* data

make

rm bin/uconv

make

cp bin/uconv bin.$ARCH

cp bin.$ARCH/* bin

cp bin.linux/pkgdata bin

rm lib/*so*

make install

16)libxslt-1.1.22

./configure  --prefix=$BUILD_ROOT/usr --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi –without-crypto --with-libxml --with-libxml-prefix=$BUILD_ROOT/usr

make && make install

17) sqlite-3.6.13

./configure  --enable-releasemode --prefix=$BUILD_ROOT/usr --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi

make && make install

18) curl-7.19.2

./configure --prefix=$BUILD_ROOT/usr --with-zlib=$BUILD_ROOT/usr/ --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi 

make && make install

19) WebKit-r29711

export LDFLAGS="-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib"
./configure --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi CFLAGS=-I$BUILD_ROOT/usr/include  CPPFLAGS=-I$BUILD_ROOT/usr/include icu_config=$BUILD_ROOT/usr/

if there are errors like “u_charType_3_6 undefined” , link the depend library via adding -licui18n to dependency_libs in WebKit-r29711/libJavaScriptCore.la file

dependency_libs=' -lpthread -licui18n '

實踐結果:

   由於webkit編譯完後只產生一個動態庫,需要再編譯個帶有操作介面的瀏覽器,原始碼和Makefile如下:

#include <gtk/gtk.h>
#include <WebKit/webkit.h>

static GtkWidget* main_window;
static GtkWidget* uri_entry;
static GtkStatusbar* main_statusbar;
static WebKitWebView* web_view;
static gchar* main_title;
static gint load_progress;
static guint status_context_id;

static gboolean
show_web_view_cb (WebKitWebView* web_view)
{
    GtkWidget* window = gtk_widget_get_toplevel(GTK_WIDGET(web_view));
    gtk_widget_show_all(window);
    return TRUE;
}

static WebKitWebView*
create_web_view_cb (WebKitWebView* web_view, WebKitWebFrame* web_frame)
{
    GtkWidget* new_window;
    GtkWidget* scrolled_window;
    GtkWidget* new_web_view = webkit_web_view_new();

    g_signal_connect (G_OBJECT (new_web_view), "web-view-ready", G_CALLBACK (show_web_view_cb), NULL);

    new_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    scrolled_window = gtk_scrolled_window_new(NULL, NULL);
    gtk_widget_show(scrolled_window);
    gtk_container_add(GTK_CONTAINER(new_window), scrolled_window);
    gtk_container_add(GTK_CONTAINER(scrolled_window), new_web_view);

    return WEBKIT_WEB_VIEW(new_web_view);
}

static void
activate_uri_entry_cb (GtkWidget* entry, gpointer data)
{
    const gchar* uri = gtk_entry_get_text (GTK_ENTRY (entry));
    g_assert (uri);
    webkit_web_view_open (web_view, uri);
}

static void
update_title (GtkWindow* window)
{
    GString* string = g_string_new (main_title);
    g_string_append (string, " - WebKit Launcher");
    if (load_progress < 100)
        g_string_append_printf (string, " (%d%%)", load_progress);
    gchar* title = g_string_free (string, FALSE);
    gtk_window_set_title (window, title);
    g_free (title);
}

static void
link_hover_cb (WebKitWebView* page, const gchar* title, const gchar* link, gpointer data)
{
    /* underflow is allowed */
    gtk_statusbar_pop (main_statusbar, status_context_id);
    if (link)
        gtk_statusbar_push (main_statusbar, status_context_id, link);
}

static void
title_change_cb (WebKitWebView* web_view, WebKitWebFrame* web_frame, const gchar* title, gpointer data)
{
    if (main_title)
        g_free (main_title);
    main_title = g_strdup (title);
    update_title (GTK_WINDOW (main_window));
}

static void
progress_change_cb (WebKitWebView* page, gint progress, gpointer data)
{
    load_progress = progress;
    update_title (GTK_WINDOW (main_window));
}

static void
load_commit_cb (WebKitWebView* page, WebKitWebFrame* frame, gpointer data)
{
    const gchar* uri = webkit_web_frame_get_uri(frame);
    if (uri)
        gtk_entry_set_text (GTK_ENTRY (uri_entry), uri);
}

static void
destroy_cb (GtkWidget* widget, gpointer data)
{
    gtk_main_quit ();
}

static void
go_back_cb (GtkWidget* widget, gpointer data)
{
    webkit_web_view_go_back (web_view);
}

static void
go_forward_cb (GtkWidget* widget, gpointer data)
{
    webkit_web_view_go_forward (web_view);
}

static GtkWidget*
create_browser ()
{
    GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);
    gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);

    web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());
    gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));

    g_signal_connect (G_OBJECT (web_view), "create-web-view", G_CALLBACK (create_web_view_cb), NULL);
    g_signal_connect (G_OBJECT (web_view), "title-changed", G_CALLBACK (title_change_cb), web_view);
    g_signal_connect (G_OBJECT (web_view), "load-progress-changed", G_CALLBACK (progress_change_cb), web_view);
    g_signal_connect (G_OBJECT (web_view), "load-committed", G_CALLBACK (load_commit_cb), web_view);
    g_signal_connect (G_OBJECT (web_view), "hovering-over-link", G_CALLBACK (link_hover_cb), web_view);

    return scrolled_window;
}

static GtkWidget*
create_statusbar ()
{
    main_statusbar = GTK_STATUSBAR (gtk_statusbar_new ());
    status_context_id = gtk_statusbar_get_context_id (main_statusbar, "Link Hover");

    return (GtkWidget*)main_statusbar;
}

static GtkWidget*
create_toolbar ()
{
    GtkWidget* toolbar = gtk_toolbar_new ();

    gtk_toolbar_set_orientation (GTK_TOOLBAR (toolbar), GTK_ORIENTATION_HORIZONTAL);
    gtk_toolbar_set_style (GTK_TOOLBAR (toolbar), GTK_TOOLBAR_BOTH_HORIZ);

    GtkToolItem* item;

    /* the back button */
    item = gtk_tool_button_new_from_stock (GTK_STOCK_GO_BACK);
    g_signal_connect (G_OBJECT (item), "clicked", G_CALLBACK (go_back_cb), NULL);
    gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);

    /* The forward button */
    item = gtk_tool_button_new_from_stock (GTK_STOCK_GO_FORWARD);
    g_signal_connect (G_OBJECT (item), "clicked", G_CALLBACK (go_forward_cb), NULL);
    gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);

    /* The URL entry */
    item = gtk_tool_item_new ();
    gtk_tool_item_set_expand (item, TRUE);
    uri_entry = gtk_entry_new ();
    gtk_container_add (GTK_CONTAINER (item), uri_entry);
    g_signal_connect (G_OBJECT (uri_entry), "activate", G_CALLBACK (activate_uri_entry_cb), NULL);
    gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);

    /* The go button */
    item = gtk_tool_button_new_from_stock (GTK_STOCK_OK);
    g_signal_connect_swapped (G_OBJECT (item), "clicked", G_CALLBACK (activate_uri_entry_cb), (gpointer)uri_entry);
    gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);

    return toolbar;
}

static GtkWidget*
create_window ()
{
    GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size (GTK_WINDOW (window), 1280, 720);
    gtk_widget_set_name (window, "GtkLauncher");
    g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK (destroy_cb), NULL);

    return window;
}

int
main (int argc, char* argv[])
{
    gtk_init (&argc, &argv);

    GtkWidget* vbox = gtk_vbox_new (FALSE, 0);
    gtk_box_pack_start (GTK_BOX (vbox), create_toolbar (), FALSE, FALSE, 0);
    gtk_box_pack_start (GTK_BOX (vbox), create_browser (), TRUE, TRUE, 0);
    gtk_box_pack_start (GTK_BOX (vbox), create_statusbar (), FALSE, FALSE, 0);

    main_window = create_window ();
    gtk_container_add (GTK_CONTAINER (main_window), vbox);

    gchar* uri = (gchar*) (argc > 1 ? argv[1] : "http://www.google.com/");
    webkit_web_view_open (web_view, uri);

    gtk_widget_grab_focus (GTK_WIDGET (web_view));
    gtk_widget_show_all (main_window);
    gtk_main ();

    return 0;
}

Makefile:

CC=arm-none-linux-gnueabi-gcc
CXX=arm-none-linux-gnueabi-g++
LDFLAGS=-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib
CFLAGS=-I$BUILD_ROOT/usr/include/WebKit
SOURCE=webkit.c
all:
    $(CC) $(SOURCE) -o webkittest `pkg-config --cflags --libs gtk+-2.0` $(LDFLAGS) $(CFLAGS) –lWebKitGtk

配置x11執行環境:

export FONTCONFIG_PATH=/etc/fonts
export PANGO_RC_FILE=/etc/pango/pangorc
export LD_LIBRARY_PATH=/usr/lib

Xfbdev &
export DISPLAY=:0

export LANG=zh_CN.gbk
export LC_ALL=zh_CN.gbk
export G_BROKEN_FILES=1
export LC_COLLATE=C

開啟sina網站

./webkittest http://www.sina.com

 

結論:

 沒有優化的webkit在beagleboard(600MHZ)執行sina網站需要接近一分鐘。