Demo

• English README Change Log
• 中文 说明 更新日志

---

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

ManonLoki 🤔 💻

ligaojin 💻

Drecc 💻

hc-tec 💻

QZQ 💻

Midori 💻 📖

chenguang shao 💻

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