Recently, calculator vision has been a hot topic, which enable applications to evangelize new, engaging user experiences. In social club to bring calculator vision to the browser, one of the key element is being able to admission the webcam with JavaScript.

To contribute to the estimator vision open source community, I had built a npm module chosen 'webcam-like shooting fish in a barrel', which provides an easy to apply JavaScript module that tin can access webcam and take photo. You can try it yourself in the below demo.

  • ane Webcam-easy.js demo
  • 2 GitHub repository
  • three How to use webcam-easy.js
    • iii.ane # Stride one : Include webcam-easy.js
    • three.two # Pace ii : Identify elements in HTML
    • 3.3 # Step 3 : Initialize webcam object
    • 3.4 # Step iv : Beginning Webcam
    • iii.v # Stride 5 : Snapshot
    • three.half dozen # Step half dozen : End webcam
    • iii.seven Mobile front end & dorsum camera support
  • 4 How I implemented webcam-easy.js
    • 4.one Check browser support
    • four.ii Go media devices and stream
      • 4.ii.1 enumerateDevices()
      • iv.2.2 getUserMedia()
      • 4.ii.iii Mirror webcam
  • five Conclusion

Webcam-easy.js demo

If y'all are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)

Fail to start camera, please allow permision to access camera.
If you are browsing through social media built in browsers, you would demand to open the page in Sarafi (iPhone)/ Chrome (Android)

GitHub repository

Yous can download the complete lawmaking of the above demo in the link below:

Webcam Like shooting fish in a barrel JS

This is a javascript library for accessing webcam stream and taking photos.
You can hands add together information technology as a module to your own app.

How to use webcam-easy.js

webcam-easy.js a JavaScript module I built for accessing webcam stream, it tin can allows us to capture a picture from the webcam. Below are the major features for webcam-easy.js:

  • Streaming webcam on desktop figurer or mobile
  • Switch dorsum or forepart cameras on mobile
  • Accept pictures and be able to download.

You tin easily add it as a module to your ain application. If you are edifice an web-app that need to access webcam in the browser, this is for you! I will testify you footstep past stride educational activity beneath of how to use this module.

# Step i : Include webcam-easy.js

Offset of all, simply include the script webcam-easy.min.js in the <head> section of the html file.

<html>   <head>     <script type="text/javascript" src="https://unpkg.com/webcam-piece of cake/dist/webcam-piece of cake.min.js"></script>   </head>

Or you tin can install information technology via npm for use in a TypeScript / ES6 projection

npm install webcam-easy            
import Webcam from 'webcam-easy';

# Footstep 2 : Place elements in HTML

The next affair we volition need to do is to add the html elements below

  • webcam video element
  • canvass chemical element for capture picture
  • optional audio element for the snap sound 
<video id="webcam" autoplay playsinline width="640" top="480"></video> <canvas id="canvas" form="d-none"></sail> <audio id="snapSound" src="audio/snap.wav" preload = "auto"></audio>

# Pace 3 : Initialize webcam object

Then, nosotros will initialize the Webcam object, the constructor accepts below parameters

  • webcamElement – the webcam <video> html element
  • facingMode – 'user' or 'element', default value is 'user'
  • canvasElement & snapSoundElement are optional
const webcamElement = certificate.getElementById('webcam'); const canvasElement = document.getElementById('canvas'); const snapSoundElement = document.getElementById('snapSound'); const webcam = new Webcam(webcamElement, 'user', canvasElement, snapSoundElement);

# Step four : Start Webcam

Past calling the webcam.start() function, the browser will ask user permission to access the camera, once it is allowed, it will start steaming the webcam to the video element. 

webcam.start()    .then(result =>{       panel.log("webcam started");    })    .catch(err => {        console.log(err);    });

# Step five : Snapshot

Just callwebcam.snap() function to capture snapshot of the webcam. The part returns adata URI containing a representation of the image in the format of PNG. By setting the an html <a> link's 'href' aspect to the prototype data return, the user can download and save the snapshot.

let motion-picture show = webcam.snap(); document.querySelector('#download-photo').href = picture;

# Footstep 6 : Stop webcam

You likewise want the user to exist able to stop their webcam, just call the webcam.finish() part.

Mobile front & dorsum camera back up

webcam-like shooting fish in a barrel.js not only work for desktop webcam, information technology also support mobile front and dorsum camera besides. When you initialize the Webcam object, you lot can pass the facingMode parameter, while 'user' represent the front end photographic camera that facing the user, and 'environs' represent the back camera.

You tin also telephone call the webcam.flip() to switch between front and dorsum camera.

$('#cameraFlip').click(function() {     webcam.flip();     webcam.start();   });

How I implemented webcam-easy.js

Hither, I would besides like to share some technical details of how I implemented this JavaScript module. I had checkout another open up source webcam JS libraries, and find some works on desktop but not on mobile, some works merely on front camera but not on rear camera, some is not mirroring the webcam… Beneath I am going to prove you how I overcome those challenges.

Cheque browser support

Most of the modern browsers do support webcam access on desktop/laptop, but unfortunately, not including IE.

As of Chrome 47, the getUserMedia API cannot be chosen from insecure origins. It means for security reason, the url required to be in https protocol, http url can not access webcam.

Some other important matter to know is on iPhone/iPad, just Safari tin access webcam, all other browser apps like Chrome or other social media build in browsers tin can not access webcam. On Android phones, webcam works fine in Chrome app.

Get media devices and stream

All the functionalities are exposed by the MediaDevices object, which is returned bynavigator.mediaDevices. MediaDevices has two methods, enumerateDevices() andgetUserMedia().

enumerateDevices()

Returns a Hope giving access to an array ofMediaDeviceInfo objects for bachelor devices. Information technology non simply contain video inputs, but also audio inputs. The MediaDeviceInfo objects contains some valuable information, beneath are the properties of the object

  • deviceId – an identifier for the represented device.
  • groupId – a grouping identifier. Two devices have the aforementioned group identifier if they belong to the same physical device — for case a monitor with both a born camera and a microphone.
  • kind – an enumerated value that is either"videoinput","audioinput" or"audiooutput"
  • label –  a characterization describing this device (for instance "Forepart camera", "Back camera").

If you only want to think the video input, filter by the kind property.

navigator.mediaDevices.enumerateDevices()   .then(getVideoInputs)   .catch(errorCallback);  function getVideoInputs(mediaDevices){       mediaDevices.forEach(mediaDevice => {         if (mediaDevice.kind === 'videoinput') {           this._webcamList.push(mediaDevice);         }       }); }

I observe out that before the user grant permission to admission the webcam, the MediaDeviceInfo objects go return does not expose any information, both the deviceId and label would exist empty.

getUserMedia()

Returns a Promise that gives access to aMediaStream. And user will be prompt to grant access to webcam. And then you can ready the video html element's srcObject to be the stream, and phone call play() to commencement streaming the webcam.

navigator.mediaDevices.getUserMedia(this.getMediaConstraints())   .then(stream => { 	  this._webcamElement.srcObject = stream; 	  this._webcamElement.play();   })   .take hold of(error => { 	 //...   });

And make certain the video html element had include autoplay and playsinline property.

<video id="webcam" autoplay playsinline></video>

Mirror webcam

Every bit an expected user experience, when you are streaming a user facing webcam, the image should mirror what'southward captured. You can reach this by utilize the transform style. 

if(this._facingMode == 'user'){     this._webcamElement.manner.transform = "scale(-1,1)"; }

Conclusion

If you are edifice a computer vision web-app that demand to admission the webcam, consider using webcam-easy.js JavaScript module, it will relieve yous a lot of time. Then you can do all sort of cool things like real-time face detection, real-time object tracking, movement detection…

Cheers for reading. If you like this article, please share on Facebook or Twitter. Let me know in the comment if you accept whatsoever questions. Follow me on GitHub and Linkedin.