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. The list of supported demos for each platform can be found in the BUILD.gn file, also a summary of the tests is provided in the table below (where Y means tested, N means not supported, and blank means not yet tested).
3. Feel free to submit new demos for PR or migrate these demos to other chromium versions.
4. Due to limited resources, the project updates its kernel once a year, approximately every 10 versions.

Demo list:

Name	Description	Target Version	Windows	Linux/Android
demo_exe	The simplest demo to demonstrate gn and create your own exe	M141	Y
demo_log	Demo log library	M141	Y
demo_task_thread_pool	Demonstrate the use of thread pool ThreadPool	M141	Y
demo_task_executor	Demonstrate using the message loop SingleThreadTaskExecutor	M141	Y
demo_task_thread	Demonstrates the use of a task in a new thread	M141	Y
demo_callback_(once|repeating)	Demo Bind&Callback related content	M141	Y
demo_linktest	Demonstrates incorrect use of gn causing link errors	M120
demo_mojo_single_process	Demonstrate the use of the mojo library in a single process	M141	Y
demo_mojo_multiple_process	Demonstrate the use of the mojo library in multiple processes	M141	Y
demo_mojo_multiple_process_binding	Demonstrate using the binding layer of the mojo library in multiple processes	M141	Y
demo_mojo_child_process	Demonstrate using the mojo library to connect via parent and directly communicate between two child process	M141	Y
demo_services	Demonstrate the use of services and multi-process architecture based on mojo	M91
demo_ipc	Demonstrate the use of IPC interface based on mojo	M120
demo_mojo_v8	Demonstrate the use of js to access the mojo interface	M141	Y
demo_memory	Demonstrate the use of SharedMemory	M141	Y
demo_tracing_console	Demonstrate using Trace to output to the console	M141	Y
demo_tracing_perfetto	Demonstrate the output of Trace as Json format (used to interface with perfetto)	M141	Y
demo_tracing_perfetto_content	Demonstrate how the content module is connected to perfetto	M141	Y
demo_resources	Demo resources related content, including grit, l10n, pak, etc.	M141	Y
demo_gl	Demonstrate using //ui/gl for GPU rendering	M141	Y
demo_viz_gui	Demonstrate using viz to display the GUI interface	M141	Y
demo_viz_offscreen	Demonstrate using viz for off-screen rendering	M141	Y
demo_viz_gui_gpu	Demonstrate the use of viz for hardware accelerated rendering	M80		Y
demo_viz_layer	Demonstrate the use of viz for interactive rendering	M80		Y
demo_viz_layer_offscreen	Demonstrate using VIZ's CopyOutput interface for off-screen rendering	M80		Y
demo_cc_gui	Demonstrate using cc to display GUI interface	M120
demo_cc_offscreen	Demonstrate using cc for off-screen rendering	M120
demo_views	Demonstrate the use of //ui/views to create UI	M120
demo_apk	Demonstrate the creation of Android applications, the use of base::android::* and JNI	M80		Y
demo_android_skia	Demonstrate the use of Skia for software rendering and hardware rendering on Android	M80		Y
demo_skia	Demonstrate the use of Skia for software rendering and hardware rendering on Windows/Linux	M141*	Y
demo_x11	Demonstrate using X11 to create transparent windows	M80	N	Y
demo_x11_glx	Demonstrate the use of glx in a transparent window	M80	N	Y
demo_x11_egl	Demonstrate the use of egl in a transparent window	M80	N	Y
demo_gin	Demonstrate the use of gin to create a javascript runtime	M120
demo_shell	Demonstrate the use of content api to create a streamlined browser that supports Linux and Android	M80		Y

*: This demo only uses GDI to support software on-screen presentation on Windows platform, Linux platform should support both software and hardware rendering, further testing is needed.

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.

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 💻
Yi Lu 💻

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