bensonruan / Webcam Easy
Licence: mit
javascript access webcam stream and take photo
Stars: ✭ 79
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Webcam Easy
Eslint Plugin Node
Additional ESLint's rules for Node.js
Stars: ✭ 740 (+836.71%)
Mutual labels: npm, npm-package, npm-module
Cpx
A cli tool to watch and copy file globs.
Stars: ✭ 394 (+398.73%)
Mutual labels: npm, npm-package, npm-module
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+2400%)
Mutual labels: npm, npm-package, npm-module
Npm Run All
A CLI tool to run multiple npm-scripts in parallel or sequential.
Stars: ✭ 4,496 (+5591.14%)
Mutual labels: npm, npm-package, npm-module
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+224.05%)
Mutual labels: npm, npm-package, npm-module
Homebridge Wol
A Wake on Lan plugin for Homebridge
Stars: ✭ 150 (+89.87%)
Mutual labels: npm, npm-package, npm-module
Jsonexport
{} → 📄 it's easy to convert JSON to CSV
Stars: ✭ 208 (+163.29%)
Mutual labels: npm, npm-package, npm-module
Darkmode.js
🌓 Add a dark-mode / night-mode to your website in a few seconds
Stars: ✭ 2,339 (+2860.76%)
Mutual labels: npm, npm-package, npm-module
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-35.44%)
Mutual labels: npm, npm-package, npm-module
Singlespotify
🎵 Create Spotify playlists based on one artist through the command line
Stars: ✭ 254 (+221.52%)
Mutual labels: npm, npm-package, npm-module
React Ckeditor
CKEditor component for React with plugin and custom event listeners support
Stars: ✭ 124 (+56.96%)
Mutual labels: npm, npm-package, npm-module
Tplink Cloud Api
A node.js npm module to remotely control TP-Link smartplugs (HS100, HS110) and smartbulbs (LB100, LB110, LB120, LB130) using their cloud web service (no need to be on the same wifi/lan)
Stars: ✭ 96 (+21.52%)
Mutual labels: npm, npm-package, npm-module
Rando.js
The world's easiest, most powerful random function.
Stars: ✭ 659 (+734.18%)
Mutual labels: npm, npm-package, npm-module
Event Target Shim
An implementation of WHATWG EventTarget interface, plus few extensions.
Stars: ✭ 89 (+12.66%)
Mutual labels: npm, npm-package, npm-module
Ts ci
✅ Continuous integration setup for TypeScript projects via GitHub Actions.
Stars: ✭ 225 (+184.81%)
Mutual labels: npm, npm-package, npm-module
Eslint Plugin Vue
Official ESLint plugin for Vue.js
Stars: ✭ 3,592 (+4446.84%)
Mutual labels: npm, npm-package, npm-module
Packagephobia
⚖️ Find the cost of adding a new dependency to your project
Stars: ✭ 1,110 (+1305.06%)
Mutual labels: npm, npm-package, npm-module
Vanilla Framework
From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
Stars: ✭ 476 (+502.53%)
Mutual labels: npm, npm-package
Synp
Convert yarn.lock to package-lock.json and vice versa
Stars: ✭ 510 (+545.57%)
Mutual labels: npm, npm-package
Webcam Easy JS
This is a javascript library for accessing webcam stream and taking photos.
You can easily add it as a module to your own app.
- Streaming webcam on desktop computer or mobile
- Switch back or front cameras on mobile
- Take pictures and be able to download.
Live Demo
https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript/
Installation
Use Git Clone
git https://github.com/bensonruan/webcam-easy.git
OR Use NPM
npm install webcam-easy
Usage
1. Include script tag in html
<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>
or Import into javascript
import Webcam from 'webcam-easy';
2. Place elements in HTML
<video id="webcam" autoplay playsinline width="640" height="480"></video>
<canvas id="canvas" class="d-none"></canvas>
<audio id="snapSound" src="audio/snap.wav" preload = "auto"></audio>
3. Call constructor in javascript
const webcamElement = document.getElementById('webcam');
const canvasElement = document.getElementById('canvas');
const snapSoundElement = document.getElementById('snapSound');
const webcam = new Webcam(webcamElement, 'user', canvasElement, snapSoundElement);
4. Start Webcam
webcam.start()
.then(result =>{
console.log("webcam started");
})
.catch(err => {
console.log(err);
});
5. Take Photo
var picture = webcam.snap();
6. Stop Webcam
webcam.stop();
Functions
-
start(startStream) : start streaming webcam
- get permission from user
- get all video input devices info
- select camera based on facingMode
- start stream
startStream is optional parameter, default value is true
-
stop() : stop streaming webcam
-
stream() : start streaming webcam to video element
-
snap() : take photo from webcam
-
flip() : change Facing mode and selected camera
Properties
- facingMode : 'user' or 'enviroment'
- webcamList : all available camera device
- webcamCount : number of available camera device
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].