Demo

中文 README

---

This project is in the process of migrating to chromium version 120(branch 6099), please choose the appropriate branch for your needs and make sure chromium switches to the corresponding branch as well (you will need to run glcient sync to sync the code after the switch). If you are interested in this, please feel free to contact me in the Discussions channel. I have built a WeChat group, used to facilitate technical discussions, if you are interested, welcome to add my WeChat, I will pull you into the discussion group. WeChat:

This project is used to demonstrate how to use some basic mechanisms in chromium, including asynchronous multitasking, mojo, multi-process, viz, cc, gl etc.

Tips:

1. If you are new to chromium, it is recommended to study these demos in order.
2. These demos are ONLY tested on Linux and Android. The list of supported demos for each platform can be found in the BUILD.gn file.
3. The label in front of the demo list below indicates the highest supported chromium version of the demo, e.g. M120 means chromium 120 is supported, demos without labels mean that they are only verified on chromium 80.
4. Feel free to submit new demos for PR or migrate these demos to other chromium versions.
5. Due to limited resources, the project updates its kernel once a year, approximately every 10 versions.

Demo list:

1. [M120] demo_exe: The simplest demo to demonstrate gn and create your own exe;
2. [M120] demo_log: Demo log library;
3. [M120] demo_tracing_console: Demonstrate using Trace to output to the console;
4. [M120] demo_task_thread_pool: Demonstrate the use of thread pool ThreadPool;
5. [M120] demo_task_executor: Demonstrate using the message loop SingleThreadTaskExecutor;
6. [M120] demo_callback: Demo Bind&Callback related content；
7. [M120] demo_linktest: Demonstrates incorrect use of gn causing link errors;
8. [M120] demo_mojo_single_process: Demonstrate the use of the mojo library in a single process;
9. [M120] demo_mojo_multiple_process: Demonstrate the use of the mojo library in multiple processes;
10. [M120] demo_mojo_multiple_process_binding: Demonstrate using the binding layer of the mojo library in multiple processes;
11. [M91] demo_services: Demonstrate the use of servcies and multi-process architecture based on mojo;
12. [M120] demo_ipc: Demonstrate the use of IPC interface based on mojo;
13. [M91] demo_mojo_v8: Demonstrate the use of js to access the mojo interface;
14. [M120] demo_memory: Demonstrate the use of SharedMemory;
15. [M120] demo_tracing_perfetto: Demonstrate the output of Trace as Json format (used to interface with perfetto);
16. [M120] demo_tracing_perfetto_content: Demonstrate how the content module is connected to perfetto;
17. [M120] demo_resources: Demo resources related content, including grit, l10n, pak, etc.;
18. [M120] demo_gl: Demonstrate using //ui/gl for GPU rendering;
19. [M120] demo_viz_gui: Demonstrate using viz to display the GUI interface;
20. [M120] demo_viz_offscreen: Demonstrate using viz for off-screen rendering;
21. demo_viz_gui_gpu: Demonstrate the use of viz for hardware accelerated rendering;
22. demo_viz_layer: Demonstrate the use of viz for interactive rendering;
23. demo_viz_layer_offscreen, demonstrate using VIZ's CopyOutput interface for off-screen rendering;
24. [M120] demo_cc_gui: Demonstrate using cc to display GUI interface;
25. [M120] demo_cc_offscreen: Demonstrate using cc for off-screen rendering;
26. [M120] demo_views: Demonstrate the use of //ui/views to create UI;
27. demo_apk: Demonstrate the creation of Android applications, the use of base::android::* and JNI;
28. demo_android_skia: Demonstrate the use of Skia for software rendering and hardware rendering on Android;
29. [M120] demo_skia: Demonstrate the use of Skia for software rendering and hardware rendering on Linux;
30. demo_x11: Demonstrate using X11 to create transparent windows;
31. demo_x11_glx: Demonstrate the use of glx in a transparent window;
32. demo_x11_egl: Demonstrate the use of egl in a transparent window;
33. [M120] demo_gin: Demonstrate the use of gin to create a javascript runtime;
34. demo_shell: Demonstrate the use of content api to create a streamlined browser that supports Linux and Android;

Documents:

Public documents are in the docs directory, and other documents are in the corresponding directory of the code.

Usage

1. Go to the src directory of chromium and switch to a supported branch, such as 120.0.6099.40 for version 120 or 91.0.4472.144 for version 91 (the last version number does not matter). And run gclient sync to synchronize the code.

2. Run the following command to clone this repository to the src/demo directory and switch to the corresponding branch, e.g. c/120.0.6099 for version 120 or c/91.0.4472 for version 91.

   git clone <address of current repository> demo
   git checkout <the branch>

3. Find the out/Default/args.gn file in your compilation output directory and add the following parameters:

   # add extra deps to gn root
   root_extra_deps = ["//demo"]
   # disable warnings as errors
   treat_warnings_as_errors = false
   
   # If you want to compile the demo of android platform, you need to add the following parameters
   # target_os="android"
   # target_cpu="arm64" # Other architectures can be selected as needed x86, x64, arm, mipsel

4. Run ninja -C out/Default <name in demo list> to generate the required demo (see BUILD.gn), for example using the name demo_exe to generate the demo_exe program. Or use demo to generate all programs.

REPEAT: These demos are ONLY tested on Linux and Android.

TODO

• Add v8 related demo to demonstrate how to inject js objects/methods into v8;
• Improve the documentation of the process initialization part (docs/startup.md);
• Improve the documentation of the UI part (docs/ui.md);
• Improve the documentation of the content module (docs/content.md);
• Improve the documentation of demo_shell (demo_shell/README.md);
• Add demo to demonstrate how to create aar component;
• Add demo to demonstrate how to use aura to create UI interface;
• Add demo to demonstrate how to use PlatformWindow to create UI interface;
• Add demo to demonstrate how to implement off-screen rendering of web pages;
• Add a demo to demonstrate how to inject new JS objects into Blink;
• Add a demo to demonstrate the principle of navigator.mediaDevices.getUserMedia();
• Add a demo to demonstrate the principle of tab capture api;

Changelog

2023.12.24

Migrate some demos to M120, the upgrade is described below:

1. ThreadTaskRunnerHandle was replaced by SingleThreadTaskRunner;
2. The TRACE_* macro enables the perfetto client library by default;
3. mojo enables ipcz by default, and parameters must be passed for multi-process initialization;
4. The gl initialization interface supports selecting GPU;
5. The SharedQuadState::SetAll interface supports setting fast_rounded_corner;
6. viz::TransferableResource supports a clearer distinction between single-plane and multi-plane resources;
7. In order to reduce the number of viz PostTasks, CompositorFrameSinkClient::OnBeginFrame merges the functions of ReclaimResources and DidReceiveCompositorFrameAck;
8. Deleted the SkEncodeImage interface and replaced it with SkXXXEncoder::Encode;
9. Skia moved the DDL-related interfaces to chromium private and renamed them. The public DDL interface will no longer be provided in the future. After the change, only ganesh supports DrawDDL, and graphite does not.

2023.8.24

• Add demo_linktest, demonstrates incorrect use of gn causing link errors;

2023.3.25

• Migrate demo_skia to M110;

2023.3.16

• Migrate demo_views to M110;

2023.3.15

• Migrate demo_cc_offscreen to M110;
• Migrate demo_gin to M110;

2023.3.12

• Migrate demo_viz_gui to M110;

2023.3.11

• Update 110 branch to 5481;

2022.12.4

• Migrate some demo to M110;

2022.4.27

• Add demo_gin，demonstrate how to use gin to create a javascript runtime;

2021.9.13

• Add demo_mojo_v8，demonstrate how to use js in the render process to access the mojo interface provided by the browser process;

2021.9.6

• Migrate demo_views to M91；
• Migrate demo_cc_offscreen to M91；

2021.9.4

• Migrate demo_viz_offscreen to M91；

2021.9.3

• Migrate demo_ipc to M91;
• Migrate demo_services to M91;

2021.8.15

• Migrate demo_gl to M91;

2021.7.29

• Migrate below demos to M91：
  • demo_resources

2021.7.22

• Migrate below demos to M91：
  • demo_memory

2021.7.17

• Migrate below demos to M91：
  • demo_exe
  • demo_tracing_perfetto
  • demo_tracing_perfetto_content
  • demo_messageloop
  • demo_tasks
  • demo_mojo_single_process
  • demo_mojo_multiple_process
  • demo_mojo_multiple_process_binding
• Rename below demos：
  • demo_messageloop to demo_task_executor
  • demo_tasks to demo_task_thread_pool

2020.8.10

• Add demo_gl, the demo uses the //ui/gl module to call GL for rendering;

2020.7.31

• demo_viz_layer_offscreen supports off-screen rendering using the SkiaOutputDeviceOffscreen interface;

2020.7.28

• Add demo_viz_layer_offscreen to demonstrate using VIZ's CopyOutput interface for off-screen rendering;

2020.7.24

• Add demo_viz_layer, demonstrate the use of VIZ for handwriting writing, and support the use of command lines to switch between software and hardware rendering;

2020.7.18

• Add demo_viz_gui_gpu to demonstrate the use of VIZ for hardware accelerated rendering and VIZ Client nesting;

2020.7.15

• Add demo_x11_glx and demo_x11_egl;

2020.7.11

• Add demo_x11 to demonstrate the use of X11 to create transparent windows;
• Update demo_skia, use software rendering by default, support transparent windows, GL rendering supports GL_RGB565 pixel format;

2020.6.28

• Add demo_skia to demonstrate the software/hardware rendering using Skia in Linux;

2020.6.4

• Update demo_android_skia, add multi-thread rendering and frame rate synchronization;

2020.5.31

• Add demo_android_skia to demonstrate the use of Skia in Android for software/hardware rendering;

2020.5.21

• Add demo_tracing_perfetto_content to demonstrate how the content module saves trace to a file, which can be used for chrome://tracing;
• Add demo_tracing documentation demo_tracing;

2020.5.18

• Move demo_tracing to demo_tracing folder and rename it to demo_tracing_console, add Flush function;
• Add demo_tracing_perfetto to demonstrate the integration and use of trace and perfetto;

2020.4.29

• Add demo_cc_gui to demonstrate using cc to display GUI interface;

2020.4.17

• Added TRACE.txt of demo_cc to help understand the runtime behavior of cc;

2020.4.10

• Add demo_cc_offscreen, demonstrate the use of cc for off-screen rendering;

2020.4.6

• Add demo_viz_offscreen, demonstrate using viz for off-screen rendering;
• Modify demo_viz to demo_viz_gui, the function is unchanged;

2020.3.31

• Add demo_viz, demonstrate using viz module;
• Add documentation for viz: viz

2020.3.21

• Add demo_views, demonstrate using //ui/views to develop UI;

2020.3.12

• demo_apk supports JNI to call instance method of C++ class;
• Add document: [browser startup process brief description] (./docs/startup.md)

2020.3.7

• demo_apk supports JNI;
• Add document: demo_apk

2020.3.4

• Add demo_tracing to demonstrate the use of trace;
• Add demo_apk to demonstrate how to use gn to create Android applications;
• Add demo_shell to demonstrate how to use the Content API to create a streamlined browser;

Earlier

Add the following demo and related documents:

• demo_exe: the simplest demo, demonstrate gn and create your own exe;
• demo_log: demonstrate the use of log library;
• demo_tracing: demonstrate the use of Trace;
• demo_tasks: demonstrate the use of thread pool ThreadPool;
• demo_messageloop: demonstrate the use of message loop MessageLoop;
• demo_mojo_single_process: demonstrate the use of mojo library in a single process;
• demo_mojo_multiple_process: demonstrate the use of the mojo library in multiple processes;
• demo_mojo_multiple_process_binding: demonstrate the use of the binding layer of the mojo library in multiple processes;
• demo_services: demonstrate the use of mojo-based servcies and multi-process architecture;
• demo_ipc: demonstrate the use of mojo-based IPC interface;
• demo_memory: demonstrate the use of SharedMemory;

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ManonLoki 🤔 💻

ligaojin 💻

Drecc 💻

hc-tec 💻

QZQ 💻

Midori 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!