Published on <a href="https://blog.prototypr.io/make-a-camera-web-app-tutorial-part-1-ec284af8dddf?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Aaron Benjamin 
Learn how to make a Camera app with HTML, CSS, and JavaScript
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vjg--K-oz9UrvQPNGoVuVg.png">Image by <a href="http://www.laughandpee.com/">Ryan McGuire</a> / <a href="https://gratisography.com">https://gratisography.com</a>
This tutorial will walk you through creating a camera app that runs in your phone’s browser. (Like magic)
In Part 1, we’ll cover:
<ol>
<li>Setting up the project</li>
<li>Creating a working camera app that can take a picture</li>
<li>Testing your camera app on your phone</li>
</ol>
Some notes:
<ul>
<li>As of right now, only the Safari browser supports camera access on iOS</li>
<li>The camera can only be accessed from pages using TSL/HTTPS (More info below)</li>
</ul>
Let’s get started…
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FVarW8M9eEha1y%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Fyeah-happy-happiness-VarW8M9eEha1y&#038;image=https%3A%2F%2Fmedia0.giphy.com%2Fmedia%2FVarW8M9eEha1y%2F200.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="246" frameborder="0"><a href="https://medium.com/media/85c5aa02431c9080dbfa369f54a20df5/href">https://medium.com/media/85c5aa02431c9080dbfa369f54a20df5/href</a></iframe>
<h3>Setup</h3>
Create a new folder on your computer named camera-app.
<img alt="" src="https://cdn-images-1.medium.com/max/291/1*zKSoo9o2dmeTiirHrKyuOQ.png">
Open that folder in your favorite text editor. I’m going to use <a href="https://www.sublimetext.com/3">Sublime Text 3</a>.
Create 3 new documents and save them as index.html, style.css, and app.js.
<h3>HTML</h3>
Setup a basic HTML document using the following template:
<pre>&lt;!doctype html&gt;</pre>
<pre>&lt;html lang=”en”&gt;</pre>
<pre>&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
<pre>&lt;!-- Name of your awesome camera app --&gt; &lt;title&gt;Camera App&lt;/title&gt; </pre>
<pre>&lt;!-- Link to your main style sheet--&gt; &lt;link rel="stylesheet" href="style.css"&gt; &lt;/head&gt;</pre>
<pre>&lt;body&gt;</pre>
<pre>&lt;!-- Reference to your JavaScript file --&gt; &lt;script src="app.js"&gt;&lt;/script&gt; </pre>
<pre>&lt;/body&gt;</pre>
<pre>&lt;/html&gt;</pre>
Next, we’ll create the basic parts of the camera.
Inside the &lt;body&gt; tag, create a &lt;main&gt; element with an ID of camera.
<pre>&lt;!-- Camera --&gt; &lt;main id="camera"&gt; &lt;/main&gt;</pre>
Inside the &lt;main id=”camera”&gt;, create a &lt;canvas&gt; element with the ID of camera&#8211;sensor.
Similar to a real camera sensor, the canvas element will grab a frame from the video stream when we tell it to, and draw it to the next element we’ll create.
<pre>&lt;!-- Camera --&gt; &lt;main id="camera"&gt;</pre>
<pre> &lt;!-- Camera sensor --&gt; &lt;canvas id="camera--sensor"&gt;&lt;/canvas&gt;</pre>
<pre>&lt;/main&gt;</pre>
Next, create a &lt;video&gt; element with the ID camera&#8211;view and add autoplay and playsinline.
The video element will access the device’s camera and display the video stream.
<pre>&lt;!-- Camera --&gt; &lt;main id="camera"&gt;</pre>
<pre> &lt;!-- Camera view --&gt; &lt;video id="camera--view" autoplay playsinline&gt;&lt;/video&gt; &lt;!-- Camera sensor --&gt; &lt;canvas id="camera--sensor"&gt;&lt;/canvas&gt;</pre>
<pre>&lt;/main&gt;</pre>
Create an &lt;img&gt; element with the ID camera&#8211;output and the source set to //:0 (using //:0 as the source will prevent the empty image icon from showing without the browser showing a security warning).
The img element will display the picture after it’s taken.
<pre>&lt;!-- Camera --&gt; &lt;main id="camera"&gt; &lt;!-- Camera sensor --&gt; &lt;canvas id="camera--sensor"&gt;&lt;/canvas&gt;</pre>
<pre> &lt;!-- Camera view --&gt; &lt;video id="camera--view" autoplay playsinline&gt;&lt;/video&gt;</pre>
<pre> &lt;!-- Camera output --&gt; &lt;img src="https://:0" alt="" id="camera--output"&gt;</pre>
<pre>&lt;/main&gt;</pre>
The last piece we need is a button to snap a picture with.
Create a &lt;button&gt; element with an ID of camera&#8211;trigger and add Take a picture inside of it (or whatever you want to label your button) .
<pre>&lt;!-- Camera --&gt; &lt;main id="camera"&gt;</pre>
<pre> &lt;!-- Camera sensor --&gt; &lt;canvas id="camera--sensor"&gt;&lt;/canvas&gt; &lt;!-- Camera view --&gt; &lt;video id="camera--view" autoplay playsinline&gt;&lt;/video&gt; &lt;!-- Camera output --&gt; &lt;img src="https://:0" alt="" id="camera--output"&gt;</pre>
<pre> &lt;!-- Camera trigger --&gt; &lt;button id="camera--trigger"&gt;Take a picture&lt;/button&gt;</pre>
<pre>&lt;/main&gt;</pre>
Your HTML document should look like this:
<pre>&lt;html lang=”en”&gt;</pre>
<pre>&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
<pre> &lt;!-- Name of your awesome camera app --&gt; &lt;title&gt;Camera App&lt;/title&gt;</pre>
<pre> &lt;!-- Link to your main style sheet--&gt; &lt;link rel="stylesheet" href="style.css"&gt; &lt;/head&gt;</pre>
<pre>&lt;body&gt;</pre>
<pre> &lt;!-- Camera --&gt; &lt;main id="camera"&gt;</pre>
<pre> &lt;!-- Camera sensor --&gt; &lt;canvas id="camera--sensor"&gt;&lt;/canvas&gt;</pre>
<pre> &lt;!-- Camera view --&gt; &lt;video id="camera--view" autoplay playsinline&gt;&lt;/video&gt;</pre>
<pre> &lt;!-- Camera output --&gt; &lt;img src="https://:0" alt="" id="camera--output"&gt;</pre>
<pre> &lt;!-- Camera trigger --&gt; &lt;button id="camera--trigger"&gt;Take a picture&lt;/button&gt;</pre>
<pre> &lt;/main&gt;</pre>
<pre> &lt;!-- Reference to your JavaScript file --&gt; &lt;script src="app.js"&gt;&lt;/script&gt;</pre>
<pre>&lt;/body&gt;</pre>
<pre>&lt;/html&gt;</pre>
You did it! The HTML part is complete…on to CSS!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2Fl4Jz6ejzyQzK8t2Xm%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Ffergie-l4Jz6ejzyQzK8t2Xm&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fl4Jz6ejzyQzK8t2Xm%2Fgiphy.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="244" frameborder="0"><a href="https://medium.com/media/88277893ff55b9c957528655bbe7d740/href">https://medium.com/media/88277893ff55b9c957528655bbe7d740/href</a></iframe>
<h3>CSS</h3>
To make sure everything is laid out correctly and looks snazzy, we’ll add some styles to the page with the style.css file we created.
Inside your style.css file, add a selector for html, body and set the margin and padding to 0. This will make sure there’s no unplanned spacing in the viewport. Set the width and height to 100%.
<pre>html, body{ margin: 0; padding: 0; height: 100%; width: 100%: }</pre>
Next, we’ll need to fit the elements we created to the screen.
Add a selector for #camera, #camera&#8211;view, #camera&#8211;sensor, #camera&#8211;output and set the position property to fixed. Set the width and height to 100%. Set object-fit to cover so that the video takes up the whole screen.
<pre>#camera, #camera--view, #camera--sensor, #camera--output{ position: fixed; height: 100%; width: 100%: object-fit: cover; }</pre>
Since we’re shooting on a phone using the “selfie” camera, we’ll want to mirror the image to make it feel more natural.
<pre>#camera--view, #camera--sensor, #camera--output{ transform: scaleX(-1); filter: FlipH; }</pre>
Set the position property for #camera&#8211;trigger to fixed and add some other style (see below) to center it on the bottom of the screen.
<pre>#camera--trigger{ width: 200px; background-color: black; color: white; font-size: 16px; border-radius: 30px; border: none; padding: 15px 20px; text-align: center; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); position: fixed; bottom: 30px; left: calc(50% - 100px); }</pre>
Last, we’ll add some styling for the image after it’s taken…
<pre>.taken{ height: 100px!important; width: 100px!important; transition: all 0.5s ease-in; border: solid 3px white; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); top: 20px; right: 20px; z-index: 2; }</pre>
Your style.css file should look like this…
<pre>html, body{ margin: 0; padding: 0; height: 100%; width: 100%; }</pre>
<pre>#camera, #camera--view, #camera--sensor, #camera--output{ position: fixed; height: 100%; width: 100%; object-fit: cover; }</pre>
<pre>#camera--view, #camera--sensor, #camera--output{ transform: scaleX(-1); filter: FlipH; }</pre>
<pre>#camera--trigger{ width: 200px; background-color: black; color: white; font-size: 16px; border-radius: 30px; border: none; padding: 15px 20px; text-align: center; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); position: fixed; bottom: 30px; left: calc(50% - 100px); }</pre>
<pre>.taken{ height: 100px!important; width: 100px!important; transition: all 0.5s ease-in; border: solid 3px white; box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2); top: 20px; right: 20px; z-index: 2; }</pre>
All set with CSS. Let’s write some JavaScript…
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2FCV61LRKyQf6P6%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fgiphy.com%2Fgifs%2Flove-sheldon-bazinga-CV61LRKyQf6P6&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FCV61LRKyQf6P6%2F200.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="278" frameborder="0"><a href="https://medium.com/media/2d083269d5a8b5d82b30dd5ca57117cd/href">https://medium.com/media/2d083269d5a8b5d82b30dd5ca57117cd/href</a></iframe>
<h3>JavaScript</h3>
The JavaScript file will pull everything together and make the magic happen. Open up your app.js file and lets get busy.
First, we need create a variable for our constraints (or settings) for the video stream. We want to default to the camera facing the user (You can set facingMode to &#8220;environment&#8221; if you’d rather default to the rear camera). We also want to tell the browser we don’t need audio from the device.
At the top of the app.js file, write…
<pre>var constraints = { video: { facingMode: "user" }, audio: false };</pre>
Next, we need to define constants for all of the parts we created.
On the next line, write…
<pre>const cameraView = document.querySelector("#camera--view"), cameraOutput = document.querySelector("#camera--output"), cameraSensor = document.querySelector("#camera--sensor"), cameraTrigger = document.querySelector("#camera--trigger")</pre>
Now that we’ve gathered all the pieces we need, we need to create a function — we’ll call it cameraStart — that will access the camera and stream the video to the camera&#8211;view element we created.
This code uses the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a> method to access the camera using the constraints we defined. We’ll make cameraView the source for the stream. We’ll also add a .catch to make sure an error is reported if the camera doesn’t work.
<pre>function cameraStart() { navigator.mediaDevices .getUserMedia(constraints) .then(function(stream) { track = stream.getTracks()[0]; cameraView.srcObject = stream; }) .catch(function(error) { console.error("Oops. Something is broken.", error); }); }</pre>
Once we have a video stream to work with, we can program the button to grab a frame from the stream that we’ll use as our image output.
<pre>cameraTrigger.onclick = function() { cameraSensor.width = cameraView.videoWidth; cameraSensor.height = cameraView.videoHeight; cameraSensor.getContext("2d").drawImage(cameraView, 0, 0); cameraOutput.src = cameraSensor.toDataURL("image/webp"); cameraOutput.classList.add("taken"); };</pre>
Last, we’ll need to initiate the cameraStart function when the window is finished loading. That’ll look like this…
<pre>window.addEventListener("load", cameraStart, false);</pre>
Altogether, your app.js file should look like this…
<pre>// Set constraints for the video stream var constraints = { video: { facingMode: "user" }, audio: false };</pre>
<pre>// Define constants const cameraView = document.querySelector("#camera--view"), cameraOutput = document.querySelector("#camera--output"), cameraSensor = document.querySelector("#camera--sensor"), cameraTrigger = document.querySelector("#camera--trigger")</pre>
<pre>// Access the device camera and stream to cameraView function cameraStart() { navigator.mediaDevices .getUserMedia(constraints) .then(function(stream) { track = stream.getTracks()[0]; cameraView.srcObject = stream; }) .catch(function(error) { console.error("Oops. Something is broken.", error); }); }</pre>
<pre>// Take a picture when cameraTrigger is tapped cameraTrigger.onclick = function() { cameraSensor.width = cameraView.videoWidth; cameraSensor.height = cameraView.videoHeight; cameraSensor.getContext("2d").drawImage(cameraView, 0, 0); cameraOutput.src = cameraSensor.toDataURL("image/webp"); cameraOutput.classList.add("taken"); };</pre>
<pre>// Start the video stream when the window loads window.addEventListener("load", cameraStart, false);</pre>
<h3>Hosting</h3>
Let’s test our app!
First, we need to host it on a secure HTTPS server. You can do this locally on your machine if you like…but that’s another tutorial.
We’re going to use GitHub pages.
<ul>
<li>It’s free</li>
<li>It’s pretty easy to use</li>
<li>It offers HTTPS</li>
</ul>
The first thing you need to do (if you haven’t already) is <a href="https://github.com/join">create a GitHub account</a>.
When you’re registered and signed in, find the green “New repository” button. and give it a click.
<img alt="" src="https://cdn-images-1.medium.com/max/265/1*Ig6_39WfORVt3za-oSGQzA.png">
Give your repository a name. I’ll call mine camera-app. Make sure you check the box that says “Initialize this repository with a README”.
<img alt="" src="https://cdn-images-1.medium.com/max/769/1*aIG3x8_nx5Flv2o-t-i9wA.png">
After you click “Create repository”, select “Upload files” from the tool bar.
<img alt="" src="https://cdn-images-1.medium.com/max/446/1*PeB5hqHjPbkOs-aqohI44A.png">
Upload the files we created to your GitHub repository by selecting them and clicking “Commit changes”.
<img alt="" src="https://cdn-images-1.medium.com/max/1011/1*6lyDmFRX5vbhNhokt5FT9w.png">
When the files are committed, you should see them in your repository.
<img alt="" src="https://cdn-images-1.medium.com/max/993/1*NQTxJMsyUaziHT5zAwDVjw.png">
The next step is to setup GitHub pages.
Click the “Settings” tab at the top.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JMbB6HD3pAy1ZhaUf34BFA.png">
In the GitHub pages section, select master branch from the menu and click “Save”.
<img alt="" src="https://cdn-images-1.medium.com/max/770/1*0rso4tejkGIDBOQERW4Guw.png">
From your computer or mobile device, visit <a href="https://yourGitHubUsername.github.io/camera-app">https://</a><a href="https://yourGitHubUsername.github.io/camera-app">yourGitHubUsername.github.io/camera-app</a>
You should be able to see your working camera app. Take a selfie!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2Fnc2hDu6pYz6EM%2Ftwitter%2Fiframe&amp;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fnc2hDu6pYz6EM%2Fgiphy.gif&#038;image=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2Fnc2hDu6pYz6EM%2F200.gif&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=giphy" width="435" height="213" frameborder="0"><a href="https://medium.com/media/8a655244048173bbe7cbc185b5595f5f/href">https://medium.com/media/8a655244048173bbe7cbc185b5595f5f/href</a></iframe>
<blockquote>You can find these files on GitHub at <a href="https://github.com/abenjamin765/camera-app">https://github.com/abenjamin765/camera-app</a></blockquote>
<h4>In Part 2, we’ll cover…</h4>
<ol>
<li>Creating &amp; using an App Icon</li>
<li>Toggling the front and back cameras on a phone</li>
<li>Saving a picture</li>
</ol>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ec284af8dddf" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/make-a-camera-web-app-tutorial-part-1-ec284af8dddf">Make a Camera Web App — Tutorial / Part: 1</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Make a Camera Web App — Tutorial / Part: 1

Top Stories