Disclaimer: Snapwat is a product of a learning process for me (I'm sharing that as I go) and it's a work in progress. It shouldn't be seen as a best practice guide (yet)!
snapwat is a demo to showcase progressive web app capabilities.
The idea of the app is to let you doodle and add emojis etc. on top of photos or your live camera feed.
- First, choose whether to use/take a photo, or switch on your camera (recommended if your browser has support).
- Select a pencil colour and drawing over the camera view.
- Select an emoji from the emoji menu and touch on the camera view to stamp it as a sticker. Tap and drag to move an emoji around. Pinch an emoji to resize it.
- When you're ready, press the 'next' arrow. The snapwat will be displayed.
- Tap and hold / right-click and choose your device's Save / Download option to save the image. (Unfortunately it doesn't seem possible right now to download the generated file automatically across mobile browsers - more about that here).
- Or press the tweet button and share it directly via the Twitter API. (It will request read/write access for your Twitter account, but it will only ever be used to share your snapwats with your permission. It uses hello.js with their default auth proxy).
- Be sure to share your beautiful creations with the world, hashtag snapwat!
So far I have tested it in:
- Samsung Internet for Android
- Chrome for Android
- iOS Safari (no getUserMedia, but can use input type="file")
- Chrome desktop
For known issues, see the Issues tab.
If you spot other problems, please file an issue (or even better a PR!)
This demo is intended to be as lightweight as possible. However, it would be a shame to avoid all modern tooling and lose out on the latest syntax and JS bundling. So, I'm using Babel to transpile the JavaScript and rollup for module loading.
The WebRTC adapter is used to polyfill the latest MediaDevices promise-based API.
It uses Web Manifest to enable home screen installation and a service worker for offline use. (Yes, you can take a snapwat on an airplane!)
As usual, the best place to begin is:
npm install or yarn
Then to transpile and combine the JavaScript:
npm run build*
(This just runs the rollup commands for the app source code and the service worker script).
To run the app:
npm start*
Or you can use any static web server for the public directory - it's all just front-end.
To watch for changes (in a separate terminal):
npm run watch*
(This just uses watch to rebuild the JS when a change is detected in the src directory).
*NB. You should be able to replace npm with yarn here, but it's not working with yarn v0.15.1.
Sounds like it should work once this gets released.
For reference, I deploy to Github pages using: git subtree push --prefix public origin gh-pages
Snapwat is called Snapwat because it's a snapshot with "pwa" in it - for Progressive Web App. Also, it's abbreviated to SW, like Service Workers. Good eh? It's pronounced "snap what?" to rhyme with snapshot. Any resemblance to other social apps is purely coincidental...
- Emoji images provided free by EmojiOne.
- Icons by Iconic.
- Camera shutter sound by xef6.
- Thanks to Rich Harris for making a rollup cache manifest example for me (and for rollup in general!)
Please tweet me or email: peter dot oshaughnessy at gmail dot com.
MIT