Author: Frederik Wessberg (frra@itu.dk), June 2017
EmojiChat is live at https://itu.dk/people/frra/EmojiChat
EmojiChat is a based on a simple concept: It tracks your and head position and facial expressions in real-time and puts an Emoji on top of your head that represents your current mood.
EmojiChat use a variety of modern web technologies:
- It is Offline-First. It uses a Service-Worker for precaching static assets and loads even when you are offline. It ships a custom-built offline-first, decentralized client-to-client database
SyncDB
for data persistence based on IndexedDB. - It is Mobile-First and fully responsive. It is built from the ground-up to look and feel great on mobile devices and treats Mobile as separate compile-target.
- It follows the Material Design specification strictly. All elements, such as the
AppBarComponent
,CardComponent
,RippleComposite
andFloatingButtonComponent
are custom and thorough implementations of the spec. - It is fully vanilla, entirely built using built-in browser and EcmaScript APIs and data structures such as:
- Web Components: It uses Custom Elements, encapsulates components using the Shadow DOM and stamps markup using HTML templates.
- WebGL: It uses WebGL for rendering the recognized facial model.
- Web Workers: It computes emotions and facial expressions using Web Workers to keep the UI thread clean.
- Service Workers: It precaches all static assets using a ServiceWorker so the app can load and work even when you're offline.
- CSS Custom Properties: It embraces CSS reusability and maintainability using CSS variables/CSS Custom Properties.
- Intersection- and Mutation Observers: It tracks visible gallery items in just a few lines of code using the native IntersectionObserver and MutationObserver APIs.
- Web Animations: It uses the native Web Animations API for fluent, optimized animations.
- Pointer Events: It uses the unified Pointer Events spec for tracking pointer device events, rather than using traditional Mouse- and Touch-events.
- AOT Compilation: It dedupes CSS selectors
Because of this, EmojiChat only works in Chrome, Opera and Safari for the time being. While Safari is supported, Chrome and Opera will provide the best user experience for this showcase.
- Clone this repository using
git clone
from your terminal (or download it here). cd
into the directory.- Run
npm install
.
All dependencies will now be installed. You're now able to build the app!
After installing the dependencies, there's a variety of build-scripts you can run:
npm run build
ornpm run b
: Generates a development bundle for both mobile and desktop devices.npm run build:desktop
ornpm run b:desktop
: Generates a development bundle for only desktop devices.npm run build:mobile
ornpm run b:mobile
: Generates a development bundle for only mobile devices.npm run build:production
ornpm run b:production
: Generates a production bundle for both mobile and desktop devices. All files will be minified and gzipped, and all component styles will be deduped and minified using PostCSS and CSSNano. All:hover
selectors will be stripped from the mobile bundle.npm run build:desktop:production
ornpm run b:desktop:production
: Generates a production bundle for only desktop devices. All files will be minified and gzipped, and all component styles will be deduped and minified using PostCSS and CSSNano.npm run build:mobile:production
ornpm run b:mobile:production
: Generates a development bundle for only mobile devices. All files will be minified and gzipped, and all component styles will be deduped and minified using PostCSS and CSSNano. All:hover
selectors will be stripped from the bundle.npm run sw:precache
: Generates a service-worker file of all assets and associated hashes. Run this script whenever your assets change.
All of the build
scripts also have equal watch
or w
variants for the same purpose, except they watch the source files and recompiles when something changes.
All of the watch
scripts also have equal serve
or s
variants which serves a simple custom development server so you can easily work from localhost.
The shared gallery is pretty unique. Every picture taken by any EmojiChat user will end up in this gallery. Only the one who took the picture can remove it again. The data persistence model is fully decentralized. There is no remote database. Rather, you communicate with other clients currently connected to EmojiChat to replicate and distribute your local database contents so that the gallery contents are the same between all of you.