Creating a Camera App - Developer Diary #Day0
Key Takeaways
Builds a photography app that works offline using Chrome APIs and JavaScript
Full Transcript
hey everyone my name is matt scales and with Google's web developer relations team I'm building a web app at the moment and I'd like to share with you my process for building the app as well as talking about any problems that I have and anything interesting to learn along the way so let's take a look at what I'm building so here we can see a prototype of my camera on screen at the moment is the photos that I've already taken as well as a photo I've imported mostly my face because that's what I have have around when I'm developing and we have the ability here to either upload a photo or drag and drop it in or use the camera on the device to actually take a new photo on a mobile phone we're going to be adding in capabilities to do all of the things that your camera is capable of like firing the flash or changing the ISO or changing where the focus point is on the screen at the moment I've only got the ability to change the mirroring for selfie mode so let's take a photo and now we're into edit mode you know we have a 30 standard set of filters here things that you'd see in any photo editing yet so I've got saturation and I'm using WebGL to render the filter effects in real time as you move the slider as we go on we're gonna be adding in lots more features to the app we're gonna start by changing the camera settings when we actually take the photo so going to be able to use on a mobile device will be able to use things like auto white balance we'll be able to use change the focus point or actually fire the flash we're going to be adding in new filters as particularly like named filters a set of filters where you click on it and it does a whole bunch of things all at once we're going to try make that really smooth and really fast and we'll be adding in all of these things for video so we have to capture a video and then live preview the video with the effects added and create the output video there on the device so if that sounds interesting to you please join me again to hear more about that and thank you for watching thanks for watching if you like to see more of our videos click here and see you again Cheers you
Original Description
In this video, Mat Scales talks you through how to build a photography app that works offline. Over the coming weeks Mat will talk you through the code you need to build your very own camera app.
Next episode to be released on 9th October!
Subscribe to the Chrome Developers channel for the latest videos here: http://goo.gl/LLLNvf
Check out the code here: https://goo.gl/Kvrsor
Watch other Developer Diaries, including how to build a website here:
https://goo.gl/sYoGKT
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Chrome for Developers · Chrome for Developers · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
Web Directions Code 2015 round up
Chrome for Developers
Maintainable Code - HTTP203
Chrome for Developers
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
The Guardian - Supercharged
Chrome for Developers
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
The Future of JavaScript - HTTP203
Chrome for Developers
Data Binding 101 -- Polycasts #28
Chrome for Developers
The Guardian part 2 - Supercharged
Chrome for Developers
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
Binding to Objects -- Polycasts #30
Chrome for Developers
Player FM - Supercharged
Chrome for Developers
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
Jake Beats Wikipedia - HTTP203
Chrome for Developers
Supercharged Observers! -- Polycasts #32
Chrome for Developers
Jai's Web blog - Supercharged
Chrome for Developers
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
Google+ Performance Improvement Comparison
Chrome for Developers
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
Binding to Arrays -- Polycasts #35
Chrome for Developers
HTTP2 - HTTP203
Chrome for Developers
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
Call For Submissions - Supercharged
Chrome for Developers
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers
More on: API Design
View skill →Related Reads
📰
📰
📰
📰
AI And The Rise Of The Bit Economy: A Structural Shift
Forbes Innovation
2026 Is the Year Everyone Is Redesigning Themselves. Are You?
Medium · AI
EU tech chief and Tim Cook hold ‘constructive’ talks as Siri AI stays blocked in Europe
The Next Web AI
Sonnet 5 launches: Opus performance at lower cost
Dev.to · The Dev Signal
🎓
Tutor Explanation
DeepCamp AI