SlideShare a Scribd company logo

Embedding WPE WebKit - from Bring-up to Maintenance

Igalia, profile picture
Igalia

The document presents an overview of WPE WebKit, an embeddable web engine focused on Linux-based devices, covering its architecture, installation requirements, and integration with hardware. It outlines the capabilities of WPE WebKit, including multi-process architecture and extensibility, alongside practical implementation examples. The author, Adrian Perez de Castro, is an expert in web engine development and provides insights into the challenges and optimizations for using WPE WebKit in embedded systems.

Technology
1 of 70
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Most read
39
40
41
Most read
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Most read
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Embedded WPE WebKit From Bring-Up to Maintenance Adrian Perez de Castro aperez@igalia.com 1 / 34
About Me CS Engineer, partner of Igalia. Systems person turned web engine developer. WebKit jack of all trades since ~2012. Current focus: platform layer, hardware bringup, release management. I like old computers, too! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 2 / 34
About Igalia Specialized Open Source consultancy, founded in 2001 Fully remote, HQ in A Coruña (Spain). Flat structure. Top contributors to all the main Web Rendering Engines WebKit, Chromium, Gecko and Servo Active contributor to other areas and OSS projects V8, SpiderMonkey, JSC, LLVM, Node.js, GStreamer, Mesa, Linux Kernel... Members of several working groups: W3C, WHATWG, WPT, TC39, OpenJS, Test262, Khronos... Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 3 / 34
Agenda 1. WPE WebKit 101 2. Adding WPE to your device 3. Done! Now what? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 4 / 34
WPE WebKit 101 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 5 / 34
101: What is WebKit Open Source Web Engine: Ingests HTML/CSS/JavaScript/etc. Produces rendered content. Port-able: Port = Adaptation for a specific platform. Runs in more places than one may imagine. The WPE port focuses on Linux-based embedded devices. Multi-process architecture. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 6 / 34
101: Why a Web Engine? Software The Web is eating the world Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded hardware is powerful enough now since ~2013. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded hardware is powerful enough now since ~2013. Prototype and iterate harder, better, faster stronger. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Adaptable, Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Adaptable, Minimal dependencies. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
101: Why WPE WebKit? Available yesterday: Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Distributions: Debian, Ubuntu, Arch. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Distributions: Debian, Ubuntu, Arch. WPE has existed for 6+ years. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
101: Multiprocess WebKit UI Process Embeds a WebKitWebView. This is your browser application. WebProcess: Handles Web content. Many of them, per-site isolation. Network Process Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 10 / 34
Adding WPE to Your Device Act I: Bringup Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 11 / 34
Check List Is my ? hardware supported Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
Check List Is my ? hardware supported Yes It's your lucky day! ☘️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
Check List Is my ? hardware supported Yes It's your lucky day! ☘️ No There are some requirements. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
Check List Minimum OpenGL ES 2.0 Buffer sharing Desirable 64-bit CPU EGL/GLES extensions Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 13 / 34
Check List Minimum OpenGL ES 2.0 Buffer sharing Desirable 64-bit CPU EGL/GLES extensions EGL_KHR_image_base EGL_KHR_surfaceless_context EGL_EXT_image_dma_buf_import EGL_EXT_image_dma_buf_import_modifiers EGL_MESA_image_dma_buf_export Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 13 / 34
Pain Point: GPU Drivers 🖥️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Steadily improving GLESv2 as baseline Zink usable, seldom tested Mesa swrast/llvmpipe Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Steadily improving GLESv2 as baseline Zink usable, seldom tested Mesa swrast/llvmpipe Prefer Open Source drivers 💫 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
Pain Point: “Funny” HW 📟 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Bare metal Exotic connections. Legacy: fbdev 😓. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Bare metal Exotic connections. Legacy: fbdev 😓. Prefer common technologies 💫 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
Adding WPE to Your Device Act II: Browser Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 16 / 34
Choosing a Browser (In increasing order of complexity.) Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
Choosing a Browser (In increasing order of complexity.) Use . Cog Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
Choosing a Browser (In increasing order of complexity.) Use . Cog Use . libcogcore Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
Choosing a Browser (In increasing order of complexity.) Use . Cog Use . libcogcore Roll your own. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
Browser: libcogcore #include <cog/cog.h> static const char *s_starturl = NULL; static WebKitWebView* on_create_view(CogShell *shell, CogPlatform *platform) { WebKitWebViewBackend *view_backend = cog_platform_get_view_backend(platform, NULL, NULL); g_autoptr(WebKitWebView) web_view = g_object_new(WEBKIT_TYPE_WEB_VIEW, "settings", cog_shell_get_web_settings(shell), "web-context", cog_shell_get_web_context(shell), "backend", view_backend, NULL); cog_platform_init_web_view(platform, web_view); webkit_web_view_load_uri(web_view, s_starturl); return g_steal_pointer(&web_view); } int main(int argc, char *argv[]) { g_set_application_name("minicog"); if (argc != 2 && argc != 3) g_error("Usage: %s [URL [platform]]n", argv[0]); s_starturl = cog_uri_guess_from_user_input(argv[1], TRUE, NULL); cog_modules_add_directory(COG_MODULEDIR); g_autoptr(GApplication) app = g_application_new(NULL, G_APPLICATION_DEFAULT_FLAGS); g_autoptr(CogShell) shell = cog_shell_new("minicog", FALSE); g_autoptr(CogPlatform) platform = cog_platform_new(g_getenv("COG_PLATFORM"), NULL); cog_platform_setup(platform, shell, "", NULL); g_signal_connect(shell, "create-view", G_CALLBACK(on_create_view), platform); g_signal_connect_swapped(app, "shutdown", G_CALLBACK(cog_shell_shutdown), shell); g_signal_connect_swapped(app, "startup", G_CALLBACK(cog_shell_startup), shell); g_signal_connect(app, "activate", G_CALLBACK(g_application_hold), NULL); return g_application_run(app, 1, argv); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 18 / 34
Browser: WPE Platform API #include <wpe/webkit.h> int main(int argc, const char *argv[]) { g_autoptr(GMainLoop) loop = g_main_loop_new(NULL, FALSE); g_autoptr(WebKitWebView) view = webkit_web_view_new(NULL); webkit_web_view_load_uri(view, (argc > 1) ? argv[1] : "https://wpewebkit.org"); g_main_loop_run(loop); return EXIT_SUCCESS; } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 19 / 34
Adding WPE to Your Device Act III: Integration Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 20 / 34
Motivation Make Web content talk to your hardware Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
Motivation Make Web content talk to your hardware Local web server! Local web server! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
Motivation Make Web content talk to your hardware Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
Integration: URI Scheme Handler Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } static void handle_echo_scheme(WebKitURISchemeRequest *r) { const char *uri = webkit_uri_scheme_request_get_uri(r); g_autoptr(GBytes) data = g_bytes_new(uri, strlen(uri)); g_autoptr(GInputStream) stream = g_memory_input_stream_new_from_bytes(data); webkit_uri_scheme_request_finish(request, stream, g_bytes_get_size(data), "text/plain"); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } static void handle_echo_scheme(WebKitURISchemeRequest *r) { const char *uri = webkit_uri_scheme_request_get_uri(r); g_autoptr(GBytes) data = g_bytes_new(uri, strlen(uri)); g_autoptr(GInputStream) stream = g_memory_input_stream_new_from_bytes(data); webkit_uri_scheme_request_finish(request, stream, g_bytes_get_size(data), "text/plain"); } Some fine print applies ⚠️CORS Ahead! ⚠️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
Integration: User Script Messages Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } function PairBluetooth(btAddr) { const m = { kind: "pair", target: btAddr }; return window.webkit.messageHandlers.bluetooth.postMessage(m); } // Elsewhere: const device = await PairBluetooth("FD:FD:34:00:00:01"); console.log("Paired with:", device.name); Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } function PairBluetooth(btAddr) { const m = { kind: "pair", target: btAddr }; return window.webkit.messageHandlers.bluetooth.postMessage(m); } // Elsewhere: const device = await PairBluetooth("FD:FD:34:00:00:01"); console.log("Paired with:", device.name); 📨Async Involves message passing Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
Integration: JSC API Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } static void register_print(JSCContext *context) { g_autoptr(JSCValue) func = jsc_value_new_function(context, "print", G_CALLBACK(native_print), NULL, NULL, G_TYPE_NONE, 1, JSC_TYPE_VALUE); jsc_context_set_value(context, "print", func); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } static void register_print(JSCContext *context) { g_autoptr(JSCValue) func = jsc_value_new_function(context, "print", G_CALLBACK(native_print), NULL, NULL, G_TYPE_NONE, 1, JSC_TYPE_VALUE); jsc_context_set_value(context, "print", func); } It works! print(3 + 2); Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
Integration: JSCContext Standalone program: jsc_context_new(). Web process extension In the Web Process: WebKitWebExtension::page-created webkit_script_world_get_default() WebKitScriptWorld::window-object-cleared webkit_frame_get_js_context_for_script_world() In the IU Process (browser): webkit_web_context_set_web_process_extensions_directory() Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 25 / 34
Integration: Resources Blog: . Reference: . Reference: . Reference: . URI Scheme Handlers and Script Messages WPE WebKit API Web Process Extension API JSC API Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 26 / 34
Done, now what? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 27 / 34
Now What? Updates We are trying hard to make updating WPE WebKit hassle-free: Feature each March and September. Documented dependencies , . Recommended . Stable API + ABI. New features typically backwards-compatible. releases policy GCC requirements practices for security updates Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 28 / 34
Should I ship updates? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 29 / 34
Should I ship updates? YES YES YES Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 29 / 34
Updates — Some tips Pick minor releases with security fixes. These rarely break. Consider using WebDriver for automated testing. Avoid patching WPE WebKit, follow upstream if possible. Parallel integration queue that uses development releases. Design your QA for testing updates, too! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 30 / 34
Takeaways 🥡 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 31 / 34
Takeaways 🥡 WPE can fit your needs. Hardware checklist. Prefer OSS drivers. Prefer common hardware. Do ship updates. Avoid rolling your browser. Reuse parts of another. Avoid local HTTP servers. Try easier integration. QA for WPE + Web apps. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 31 / 34
Q&A ℹ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 32 / 34
Bonus Track WPE WebKit can be used headless. The JSC API can be used standalone. Resource usage can be limited with cgroups Memory limits. CPU usage. Hardening: Run as non-root. Use containers/namespaces. Built-in Bubblewrap sandbox. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 33 / 34
34 / 34

More Related Content

PPTX
Integrated, Automated Video Room Systems - Webex Devices - Cisco Live Orlando...
Cisco DevNet
 
PPTX
01 - Velociraptor Installation and Overview.pptx
toundestudies
 
PPTX
01 - Velociraptor Installation and Overview.pptx
toundestudies
 
PDF
Jumping Over the Garden Wall - WPE WebKit on Android
Igalia
 
PPTX
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891
Cisco DevNet
 
PPTX
Migrating GitHub Actions with Nested Virtualization to Cloud Native Ecosystem
Victor Morales
 
PPTX
Migrating GitHub Actions with Nested Virtualization to Cloud Native Ecosystem...
KCD Guadalajara
 
PDF
Improve your Java Environment with Docker
HanoiJUG
 
Integrated, Automated Video Room Systems - Webex Devices - Cisco Live Orlando...
Cisco DevNet
 
01 - Velociraptor Installation and Overview.pptx
toundestudies
 
01 - Velociraptor Installation and Overview.pptx
toundestudies
 
Jumping Over the Garden Wall - WPE WebKit on Android
Igalia
 
Webex Teams Widgets Technical Drill down - Cisco Live Orlando 2018 - DEVNET-3891
Cisco DevNet
 
Migrating GitHub Actions with Nested Virtualization to Cloud Native Ecosystem
Victor Morales
 
Migrating GitHub Actions with Nested Virtualization to Cloud Native Ecosystem...
KCD Guadalajara
 
Improve your Java Environment with Docker
HanoiJUG
 

Similar to Embedding WPE WebKit - from Bring-up to Maintenance (20)

PDF
'DOCKER' & CLOUD: ENABLERS For DEVOPS
ACA IT-Solutions
 
PDF
Docker and Cloud - Enables for DevOps - by ACA-IT
Stijn Wijndaele
 
PPTX
Kubernetes for data scientist
Lukasz Kaluzny
 
PDF
DIY: Computer Vision with GWT.
JooinK
 
PDF
DIY- computer vision with GWT
Francesca Tosi
 
PPTX
Global domination with kentico
Jeroen Fürst
 
PDF
A Love Story with Kubevirt and Backstage from Cloud Native NoVA meetup Feb 2024
Cloud Native NoVA
 
PDF
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia
 
PPTX
Deploying windows containers with kubernetes
Ben Hall
 
PPTX
Moving Kentico Cms To The Azure
Michal Neuwirth
 
PPTX
Advanced coding & deployment for Cisco Video Devices - CL20B - DEVNET-3244
Cisco DevNet
 
PDF
Quebec - 16 November 2022 - Canada CNCF Meetups.pdf
prune1
 
PPTX
Docker Enterprise Workshop - Technical
Patrick Chanezon
 
PDF
WebRTC in WPE/GTK Ports: Current status and challenges
Igalia
 
PPTX
What should you know about Net Core?
Damir Dobric
 
PDF
Webex Devices xAPI - DEVNET_2071 - Cisco Live - San Diego 2019
Cisco DevNet
 
PPTX
Javascript Essentials - Cisco Live Barcelona 2019
Cisco DevNet
 
PDF
Spring on Kubernetes
Jay Lee
 
PDF
Pivotal Platform - December Release A First Look
VMware Tanzu
 
PPT
Benefit of CodeIgniter php framework
Bo-Yi Wu
 
'DOCKER' & CLOUD: ENABLERS For DEVOPS
ACA IT-Solutions
 
Docker and Cloud - Enables for DevOps - by ACA-IT
Stijn Wijndaele
 
Kubernetes for data scientist
Lukasz Kaluzny
 
DIY: Computer Vision with GWT.
JooinK
 
DIY- computer vision with GWT
Francesca Tosi
 
Global domination with kentico
Jeroen Fürst
 
A Love Story with Kubevirt and Backstage from Cloud Native NoVA meetup Feb 2024
Cloud Native NoVA
 
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia
 
Deploying windows containers with kubernetes
Ben Hall
 
Moving Kentico Cms To The Azure
Michal Neuwirth
 
Advanced coding & deployment for Cisco Video Devices - CL20B - DEVNET-3244
Cisco DevNet
 
Quebec - 16 November 2022 - Canada CNCF Meetups.pdf
prune1
 
Docker Enterprise Workshop - Technical
Patrick Chanezon
 
WebRTC in WPE/GTK Ports: Current status and challenges
Igalia
 
What should you know about Net Core?
Damir Dobric
 
Webex Devices xAPI - DEVNET_2071 - Cisco Live - San Diego 2019
Cisco DevNet
 
Javascript Essentials - Cisco Live Barcelona 2019
Cisco DevNet
 
Spring on Kubernetes
Jay Lee
 
Pivotal Platform - December Release A First Look
VMware Tanzu
 
Benefit of CodeIgniter php framework
Bo-Yi Wu
 
Ad

More from Igalia (20)

PDF
Life of a Kernel Bug Fix
Igalia
 
PDF
Unlocking the Full Potential of WPE to Build a Successful Embedded Product
Igalia
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PDF
Collective Funding, Governance and Prioritiation of Browser Engine Projects
Igalia
 
PDF
Don't let your motivation go, save time with kworkflow
Igalia
 
PDF
Solving the world’s (localization) problems
Igalia
 
PDF
The Whippet Embeddable Garbage Collection Library
Igalia
 
PDF
Nobody asks "How is JavaScript?"
Igalia
 
PDF
Getting more juice out from your Raspberry Pi GPU
Igalia
 
PDF
WebRTC support in WebKitGTK and WPEWebKit with GStreamer: Status update
Igalia
 
PDF
Demystifying Temporal: A Deep Dive into JavaScript New Temporal API
Igalia
 
PDF
CSS :has() Unlimited Power
Igalia
 
PDF
Device-Generated Commands in Vulkan
Igalia
 
PDF
Current state of Lavapipe: Mesa's software renderer for Vulkan
Igalia
 
PDF
Vulkan Video is Open: Application showcase
Igalia
 
PDF
Scheme on WebAssembly: It is happening!
Igalia
 
PDF
EBC - A new backend compiler for etnaviv
Igalia
 
PDF
RISC-V LLVM State of the Union
Igalia
 
PDF
Device-Generated Commands in Vulkan
Igalia
 
PDF
Downstream challenges
Igalia
 
Life of a Kernel Bug Fix
Igalia
 
Unlocking the Full Potential of WPE to Build a Successful Embedded Product
Igalia
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
Collective Funding, Governance and Prioritiation of Browser Engine Projects
Igalia
 
Don't let your motivation go, save time with kworkflow
Igalia
 
Solving the world’s (localization) problems
Igalia
 
The Whippet Embeddable Garbage Collection Library
Igalia
 
Nobody asks "How is JavaScript?"
Igalia
 
Getting more juice out from your Raspberry Pi GPU
Igalia
 
WebRTC support in WebKitGTK and WPEWebKit with GStreamer: Status update
Igalia
 
Demystifying Temporal: A Deep Dive into JavaScript New Temporal API
Igalia
 
CSS :has() Unlimited Power
Igalia
 
Device-Generated Commands in Vulkan
Igalia
 
Current state of Lavapipe: Mesa's software renderer for Vulkan
Igalia
 
Vulkan Video is Open: Application showcase
Igalia
 
Scheme on WebAssembly: It is happening!
Igalia
 
EBC - A new backend compiler for etnaviv
Igalia
 
RISC-V LLVM State of the Union
Igalia
 
Device-Generated Commands in Vulkan
Igalia
 
Downstream challenges
Igalia
 
Ad

Recently uploaded (20)

PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
PDF
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Encapsulation theory and applications.pdf
gurumoop
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
KodekX | Application Modernization Development
KodekX
 
PPTX
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOFTTECHHUB
 
Unlocking AI with Model Context Protocol (MCP)
Brian McKeiver
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
23bcla24
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Encapsulation theory and applications.pdf
gurumoop
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
KodekX | Application Modernization Development
KodekX
 
Programs and apps: productivity, graphics, security and other tools
4mqw9zch22
 

Embedding WPE WebKit - from Bring-up to Maintenance

  • 1. Embedded WPE WebKit From Bring-Up to Maintenance Adrian Perez de Castro aperez@igalia.com 1 / 34
  • 2. About Me CS Engineer, partner of Igalia. Systems person turned web engine developer. WebKit jack of all trades since ~2012. Current focus: platform layer, hardware bringup, release management. I like old computers, too! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 2 / 34
  • 3. About Igalia Specialized Open Source consultancy, founded in 2001 Fully remote, HQ in A Coruña (Spain). Flat structure. Top contributors to all the main Web Rendering Engines WebKit, Chromium, Gecko and Servo Active contributor to other areas and OSS projects V8, SpiderMonkey, JSC, LLVM, Node.js, GStreamer, Mesa, Linux Kernel... Members of several working groups: W3C, WHATWG, WPT, TC39, OpenJS, Test262, Khronos... Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 3 / 34
  • 4. Agenda 1. WPE WebKit 101 2. Adding WPE to your device 3. Done! Now what? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 4 / 34
  • 5. WPE WebKit 101 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 5 / 34
  • 6. 101: What is WebKit Open Source Web Engine: Ingests HTML/CSS/JavaScript/etc. Produces rendered content. Port-able: Port = Adaptation for a specific platform. Runs in more places than one may imagine. The WPE port focuses on Linux-based embedded devices. Multi-process architecture. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 6 / 34
  • 7. 101: Why a Web Engine? Software The Web is eating the world Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
  • 8. 101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
  • 9. 101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded hardware is powerful enough now since ~2013. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
  • 10. 101: Why a Web Engine? Software The Web is eating the world “There is an app a website for that.” Embedded hardware is powerful enough now since ~2013. Prototype and iterate harder, better, faster stronger. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 7 / 34
  • 11. 101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
  • 12. 101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
  • 13. 101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Adaptable, Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
  • 14. 101: Why WPE WebKit? Platformless WebKit port. Designed to be embeddable: Extensible, Adaptable, Minimal dependencies. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 8 / 34
  • 15. 101: Why WPE WebKit? Available yesterday: Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
  • 16. 101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
  • 17. 101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Distributions: Debian, Ubuntu, Arch. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
  • 18. 101: Why WPE WebKit? Available yesterday: Build systems: Yocto, Buildroot, PTXdist; Distributions: Debian, Ubuntu, Arch. WPE has existed for 6+ years. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 9 / 34
  • 19. 101: Multiprocess WebKit UI Process Embeds a WebKitWebView. This is your browser application. WebProcess: Handles Web content. Many of them, per-site isolation. Network Process Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 10 / 34
  • 20. Adding WPE to Your Device Act I: Bringup Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 11 / 34
  • 21. Check List Is my ? hardware supported Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
  • 22. Check List Is my ? hardware supported Yes It's your lucky day! ☘️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
  • 23. Check List Is my ? hardware supported Yes It's your lucky day! ☘️ No There are some requirements. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 12 / 34
  • 24. Check List Minimum OpenGL ES 2.0 Buffer sharing Desirable 64-bit CPU EGL/GLES extensions Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 13 / 34
  • 25. Check List Minimum OpenGL ES 2.0 Buffer sharing Desirable 64-bit CPU EGL/GLES extensions EGL_KHR_image_base EGL_KHR_surfaceless_context EGL_EXT_image_dma_buf_import EGL_EXT_image_dma_buf_import_modifiers EGL_MESA_image_dma_buf_export Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 13 / 34
  • 26. Pain Point: GPU Drivers 🖥️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
  • 27. Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
  • 28. Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Steadily improving GLESv2 as baseline Zink usable, seldom tested Mesa swrast/llvmpipe Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
  • 29. Pain Point: GPU Drivers 🖥️ Wayland/DMA-BUF support Lack of OpenGL ES 3+ Vulkan-only drivers Unusable driver Steadily improving GLESv2 as baseline Zink usable, seldom tested Mesa swrast/llvmpipe Prefer Open Source drivers 💫 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 14 / 34
  • 30. Pain Point: “Funny” HW 📟 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
  • 31. Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
  • 32. Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
  • 33. Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Bare metal Exotic connections. Legacy: fbdev 😓. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
  • 34. Pain Point: “Funny” HW 📟 Not 32-bpp RGB565 incantation. DMA-BUF. Little testing. Rotated/Flipped Works on Wayland. Okay-ish on DRM/KMS. Bare metal Exotic connections. Legacy: fbdev 😓. Prefer common technologies 💫 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 15 / 34
  • 35. Adding WPE to Your Device Act II: Browser Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 16 / 34
  • 36. Choosing a Browser (In increasing order of complexity.) Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
  • 37. Choosing a Browser (In increasing order of complexity.) Use . Cog Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
  • 38. Choosing a Browser (In increasing order of complexity.) Use . Cog Use . libcogcore Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
  • 39. Choosing a Browser (In increasing order of complexity.) Use . Cog Use . libcogcore Roll your own. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 17 / 34
  • 40. Browser: libcogcore #include <cog/cog.h> static const char *s_starturl = NULL; static WebKitWebView* on_create_view(CogShell *shell, CogPlatform *platform) { WebKitWebViewBackend *view_backend = cog_platform_get_view_backend(platform, NULL, NULL); g_autoptr(WebKitWebView) web_view = g_object_new(WEBKIT_TYPE_WEB_VIEW, "settings", cog_shell_get_web_settings(shell), "web-context", cog_shell_get_web_context(shell), "backend", view_backend, NULL); cog_platform_init_web_view(platform, web_view); webkit_web_view_load_uri(web_view, s_starturl); return g_steal_pointer(&web_view); } int main(int argc, char *argv[]) { g_set_application_name("minicog"); if (argc != 2 && argc != 3) g_error("Usage: %s [URL [platform]]n", argv[0]); s_starturl = cog_uri_guess_from_user_input(argv[1], TRUE, NULL); cog_modules_add_directory(COG_MODULEDIR); g_autoptr(GApplication) app = g_application_new(NULL, G_APPLICATION_DEFAULT_FLAGS); g_autoptr(CogShell) shell = cog_shell_new("minicog", FALSE); g_autoptr(CogPlatform) platform = cog_platform_new(g_getenv("COG_PLATFORM"), NULL); cog_platform_setup(platform, shell, "", NULL); g_signal_connect(shell, "create-view", G_CALLBACK(on_create_view), platform); g_signal_connect_swapped(app, "shutdown", G_CALLBACK(cog_shell_shutdown), shell); g_signal_connect_swapped(app, "startup", G_CALLBACK(cog_shell_startup), shell); g_signal_connect(app, "activate", G_CALLBACK(g_application_hold), NULL); return g_application_run(app, 1, argv); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 18 / 34
  • 41. Browser: WPE Platform API #include <wpe/webkit.h> int main(int argc, const char *argv[]) { g_autoptr(GMainLoop) loop = g_main_loop_new(NULL, FALSE); g_autoptr(WebKitWebView) view = webkit_web_view_new(NULL); webkit_web_view_load_uri(view, (argc > 1) ? argv[1] : "https://wpewebkit.org"); g_main_loop_run(loop); return EXIT_SUCCESS; } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 19 / 34
  • 42. Adding WPE to Your Device Act III: Integration Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 20 / 34
  • 43. Motivation Make Web content talk to your hardware Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
  • 44. Motivation Make Web content talk to your hardware Local web server! Local web server! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
  • 45. Motivation Make Web content talk to your hardware Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 21 / 34
  • 46. Integration: URI Scheme Handler Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
  • 47. Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
  • 48. Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } static void handle_echo_scheme(WebKitURISchemeRequest *r) { const char *uri = webkit_uri_scheme_request_get_uri(r); g_autoptr(GBytes) data = g_bytes_new(uri, strlen(uri)); g_autoptr(GInputStream) stream = g_memory_input_stream_new_from_bytes(data); webkit_uri_scheme_request_finish(request, stream, g_bytes_get_size(data), "text/plain"); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
  • 49. Integration: URI Scheme Handler static void configure_web_context(WebKitWebContext *context) { webkit_web_context_register_uri_scheme(context, "echo", (WebKitURISchemeRequestCallback) handle_echo_scheme, NULL /* userdata */, NULL /* destroy_notify */); } static void handle_echo_scheme(WebKitURISchemeRequest *r) { const char *uri = webkit_uri_scheme_request_get_uri(r); g_autoptr(GBytes) data = g_bytes_new(uri, strlen(uri)); g_autoptr(GInputStream) stream = g_memory_input_stream_new_from_bytes(data); webkit_uri_scheme_request_finish(request, stream, g_bytes_get_size(data), "text/plain"); } Some fine print applies ⚠️CORS Ahead! ⚠️ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 22 / 34
  • 50. Integration: User Script Messages Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
  • 51. Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
  • 52. Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
  • 53. Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } function PairBluetooth(btAddr) { const m = { kind: "pair", target: btAddr }; return window.webkit.messageHandlers.bluetooth.postMessage(m); } // Elsewhere: const device = await PairBluetooth("FD:FD:34:00:00:01"); console.log("Paired with:", device.name); Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
  • 54. Integration: User Script Messages static void configure_content_manager(WebKitUserContentManager *mgr) { webkit_user_content_manager_register_script_message_handler_with_reply( mgr, "bluetooth", NULL); g_signal_connect(mgr, "script-message-with-reply-received::bluetooth", G_CALLBACK(handle_bluetooth), NULL); } static gboolean handle_bluetooth(WebKitUserContentManager *mgr, JSCValue *value, WebKitScriptMessageReply *reply) { g_autoptr(JSCValue) result = /* ... */; webkit_script_message_reply_return_value(reply, result); } function PairBluetooth(btAddr) { const m = { kind: "pair", target: btAddr }; return window.webkit.messageHandlers.bluetooth.postMessage(m); } // Elsewhere: const device = await PairBluetooth("FD:FD:34:00:00:01"); console.log("Paired with:", device.name); 📨Async Involves message passing Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 23 / 34
  • 55. Integration: JSC API Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
  • 56. Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
  • 57. Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } static void register_print(JSCContext *context) { g_autoptr(JSCValue) func = jsc_value_new_function(context, "print", G_CALLBACK(native_print), NULL, NULL, G_TYPE_NONE, 1, JSC_TYPE_VALUE); jsc_context_set_value(context, "print", func); } Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
  • 58. Integration: JSC API static void native_print(JSCValue *value) { g_autofree char *value_string = jsc_value_to_string(value); printf("%sn", value_string); } static void register_print(JSCContext *context) { g_autoptr(JSCValue) func = jsc_value_new_function(context, "print", G_CALLBACK(native_print), NULL, NULL, G_TYPE_NONE, 1, JSC_TYPE_VALUE); jsc_context_set_value(context, "print", func); } It works! print(3 + 2); Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 24 / 34
  • 59. Integration: JSCContext Standalone program: jsc_context_new(). Web process extension In the Web Process: WebKitWebExtension::page-created webkit_script_world_get_default() WebKitScriptWorld::window-object-cleared webkit_frame_get_js_context_for_script_world() In the IU Process (browser): webkit_web_context_set_web_process_extensions_directory() Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 25 / 34
  • 60. Integration: Resources Blog: . Reference: . Reference: . Reference: . URI Scheme Handlers and Script Messages WPE WebKit API Web Process Extension API JSC API Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 26 / 34
  • 61. Done, now what? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 27 / 34
  • 62. Now What? Updates We are trying hard to make updating WPE WebKit hassle-free: Feature each March and September. Documented dependencies , . Recommended . Stable API + ABI. New features typically backwards-compatible. releases policy GCC requirements practices for security updates Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 28 / 34
  • 63. Should I ship updates? Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 29 / 34
  • 64. Should I ship updates? YES YES YES Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 29 / 34
  • 65. Updates — Some tips Pick minor releases with security fixes. These rarely break. Consider using WebDriver for automated testing. Avoid patching WPE WebKit, follow upstream if possible. Parallel integration queue that uses development releases. Design your QA for testing updates, too! Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 30 / 34
  • 66. Takeaways 🥡 Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 31 / 34
  • 67. Takeaways 🥡 WPE can fit your needs. Hardware checklist. Prefer OSS drivers. Prefer common hardware. Do ship updates. Avoid rolling your browser. Reuse parts of another. Avoid local HTTP servers. Try easier integration. QA for WPE + Web apps. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 31 / 34
  • 68. Q&A ℹ Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 32 / 34
  • 69. Bonus Track WPE WebKit can be used headless. The JSC API can be used standalone. Resource usage can be limited with cgroups Memory limits. CPU usage. Hardening: Run as non-root. Use containers/namespaces. Built-in Bubblewrap sandbox. Embedded WPE WebKit Adrian Perez de Castro, 2024-04-17 33 / 34