This tutorial walks through how to create a prototype that accesses your desktop or laptop camera, and capture an image from it.

Here is a sample, which you can copy into your own account: https://app.atomic.io/d/3dCsTF5zyaoc

Step 1: set up elements

Add a rectangle on the canvas for where you would like the camera to display the live image. Make the rectangle 225 wide by 169 high. Rename it to: ‘video target’

Add another rectangle on the canvas for where you would like the captured image(s) to display, and rename it to: ‘snapshot target’. 

Step 2: add code to page

On timer after 50ms , add the following code: 

// SETTING UP THE VIDEO – note the small delay in the timer to ensure everything sets up correctly first.
// Target an element (by node ID) and then add a video element to it.
var el = document.getElementsByClassName("NODE-ID-VIDEO-TARGET")[0];
video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('width', 225);
video.setAttribute('height', 169);
el.appendChild(video);

/* Set up the constraints */var facingMode = "user";
// Can be 'user' or 'environment' to access back or front cameravar
constraints = {  audio: false,  video: {   facingMode: facingMode  }};

/* Stream it to video element */
global.window.navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {  video.srcObject = stream;});

Step 3: locate and replace the node ID for the video target

We now need to replace the placeholder text in the code we just added with the node ID of the specific element that will act as our camera. 

First we need to identify the unique ‘Node ID’: Select the video target rectangle, then in the bottom right of the properties panel is the node ID. Copy this into to clipboard.

Next, replace the NODE-ID-VIDEO-TARGET in the code from step 2 above with the node ID. 

Step 4: add capture button & code to take photo

Add an element/group to act as a ‘capture’ button. 

Select all of the elements that make up the button, and convert them to a container (either mask or scrolling will work for this purpose), or you can convert them to a group and then a container. 

Select the new button on the canvas, and then add an action on ‘click or tap’ to run the follow JavaScript:

// TAKE THE PHOTO
// Target the element where you want to display the photos; give it some styling.
imgContainer = document.getElementsByClassName("NODE-ID-SNAPSHOT-TARGET")[0];
imgContainer.style.overflowX = "visible";
imgContainer.style.overflowY = "scroll";
imgContainer.style.padding = "50px 30px"// Capture a still from the video using a canvas element.canvasEl = document.createElement('canvas');
context = canvasEl.getContext("2d");
canvasEl.setAttribute('width', 94);
canvasEl.setAttribute('height', 70);
context.drawImage(video, 0, 0, 94, 70);

// capturing the stilldataURL = canvasEl.toDataURL();
// converting the still image to an encoded string// Create an image to put the image data in.img = document.createElement('img');
img.setAttribute('src', dataURL);

// Append the new image to the container where you want to display the photos; give the stills some styling.
imgContainer.appendChild(img);
img.style.float = "left";
img.style.border = "3px solid white";
img.style.boxSizing = "border-box";
img.style.margin = "2px";
img.style.boxShadow = "3px 3px 6px rgba(0,0,0,0.3)";
img.style.transform = "rotate(" + (Math.random()*30 - 15) + "deg)";

Step 5: add clear button & code to activate

Just as we did for the capture button in step 4, we’ll now add an element/group to act as a ‘clear’ button. 

Select all of the elements that make up the button, and convert them to a container (either mask or scrolling will work for this purpose), or you can convert them to a group and then a container. 

Select the new button on the canvas, and then add an action on ‘click or tap’ to run the follow JavaScript:

// CLEAR THE PHOTOS
// Target the element where you want to display the photos; clear the contents.
imgContainer = document.getElementsByClassName("NODE-ID-SNAPSHOT-TARGET")[0];
imgContainer.style.overflowX = "visible";
imgContainer.style.overflowY = "scroll";
imgContainer.style.padding = "50px 30px";
imgContainer.innerHTML = "";

Step 6: locate and replace the node ID for the snapshot target

Just as we did in step 3, we now need to replace the placeholder text in the code we just added in steps 4 and 5 with the node ID of the specific element that will act as our snapshot target. 

First we need to identify the unique ‘Node ID’: Select the snapshot target rectangle, then in the bottom right of the properties panel is the node ID. Copy this into to clipboard.

Next, replace the NODE-ID-SNAPSHOT-TARGET in the code in step 4 and step 5 above with the node ID. 

Step 7: Test it out! 

That’s it! Use the keyboard shortcut Command + Enter, or select ‘Preview’ to test things out. 

Did this answer your question?