diff --git a/mediapipe/docs/images/web_effect.gif b/mediapipe/docs/images/web_effect.gif new file mode 100644 index 000000000..dac8e236b Binary files /dev/null and b/mediapipe/docs/images/web_effect.gif differ diff --git a/mediapipe/docs/images/web_segmentation.gif b/mediapipe/docs/images/web_segmentation.gif new file mode 100644 index 000000000..516a07d6c Binary files /dev/null and b/mediapipe/docs/images/web_segmentation.gif differ diff --git a/mediapipe/docs/web.md b/mediapipe/docs/web.md new file mode 100644 index 000000000..0678269c5 --- /dev/null +++ b/mediapipe/docs/web.md @@ -0,0 +1,26 @@ +## MediaPipe on the Web + +MediaPipe on the Web is an effort to use [WebAssembly](https://webassembly.org/) +to bring MediaPipe graphs, calculators, and related technologies to the web. The +aim is to have all the pieces (ML, rendering, and processing) running directly +in the browser client-side. The official API is under construction, but the core +technology has been proven effective, and we can already show interactive +cross-platform demos using your live webcam. + +![image](images/web_effect.gif) ![image](images/web_segmentation.gif) + +### Hand Tracking (with and without SIMD support) + +For [Chrome Developer Summit 2019](https://developer.chrome.com/devsummit/), we +used this technology to showcase the potential for performance improvements +using Chrome experimental [WebAssembly SIMD](https://github.com/WebAssembly/simd) +support. Below are two different versions of the +[MediaPipe Hand Tracking Example](https://mediapipe.readthedocs.io/en/latest/hand_tracking_desktop.html) + running on the web: + + 1. WebAssembly MVP [demo](https://mediapipe.page.link/cds-ht) running around 5-8 frames per second on Desktop Chrome + + 2. WebAssembly SIMD [demo](https://mediapipe.page.link/cds-ht-simd) running around 15-18 frames per second on *Canary* Chrome for Desktop, which must additionally be launched with the option `--js-flags="--experimental-wasm-simd"` + + +NOTE: This page is a work-in-progress. More to come soon!