snapwat?

snapwat is a demo to showcase Progressive Web App capabilities. The app lets you doodle and add emojis on top of photos or your live camera feed, then save and/or share your creation!

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)! For a best practices guide for getUserMedia, see: developers.google.com/web/fundamentals/native-hardware/capturing-images/

How to use it

• First, choose whether to use/take a photo, or switch on your camera.
• You can tap 'Tools' to switch between the pencil (default), brush and emoji stamp.
• Tap 'Options' to set the pencil/brush colour and size. Draw over the photo/camera view as you wish.
• For emojis, select one from the emoji menu and touch on the photo/camera view to stamp it as a sticker.
• Tap and drag an emoji to move it 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!

Browser Support

So far I have tested it in:

• Samsung Internet for Android
• Chrome for Android
• iOS Safari (until v11 introduces getUserMedia support, you 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!)

Tech

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!)

Local development

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.

Snapwat the name

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...

Further reading

• Things I learned making a PWA for 'super selfies'
• Chrome Developers guide on capturing images.

Credits and Thanks

• 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!)

Contact

Please tweet me or email: peter dot oshaughnessy at gmail dot com.

Licence

MIT