bensonruan / webcam-easy Goto Github PK

View Code? Open in Web Editor NEW

231.0 10.0 110.0 509 KB

javascript access webcam stream and take photo

Home Page: https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript

License: MIT License

JavaScript 100.00%

webcam webcam-streaming webcam-capture javascript npm npm-package npm-module webcamera computer-vision

webcam-easy's Introduction

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

Support me

webcam-easy's People

Contributors

Stargazers

Watchers

Forkers

rmkasendwa rilla bhaskarnil29 rishabh-karmakar isakatirci elviskankola1 nathandaniels nemra1 silky catalyst0 tekinaggul swipswaps luchn49 adamski10 msefatullah cessatl lucasvieira2902 derrimahendra seyidaniels claudiainbytes abhijitdalavi sohoscripts amitkr6211 exxistance tk6ix9ine confidence1851 a-d-king budirs86 leone25 jwhittle933 jianghuaw thainguyenit bestpika webstorage119 brettneese szundi omk802 emmanueletukudo fabiojwalter untszlung frcomarinromero danielkoohmarey cornzi vikashchoudahry felipefrizeiropd jatin711-debug vladgaidukov sangjiexun nofloor lottetekulve rdhuht angelcabrera-nr denex elduks lcsouzamenezes cathysarisky hussnainpucit ricardoalexander datnguyen293 uyefe firvida eka0789 dongshik ojo-anu onkar-singh cviana66 ethanliew copy-ninja1 atomosdovini ledcomsa ray-riyad gormih mv-gh arpixnet lwolyn trandx r2rajan glls biancamaciel2021 valesul-shopping 89817245 pjain8889 eduardosmarcal hapyr fabian295 zanhaipeng groupsifer bitsnaps 3dhead noelani-rose lydia0423 sergeyderyabin omarlamzah cliffordcheefoon haythamdahri sky8652 bvsantos unreal0901 fisal77 allvie

webcam-easy's Issues

why in my code "environment" parameter doesn't work to solve reverse problems

the code always streaming video reversed, i tried webcam.flip() or set the 'environment' parameter to webcam but doesn't work:
const webcam = new Webcam(webcamElement, 'environment', canvasElement);

is anybody solved this problem?

Changing Aspect Ratio?

Is there a way to change the aspect ratio of the image? Since I need the image to be 1x1 (480x480px).

width and height of video element are not consistant with the canvas element

After the image is captured from the video element and drawn into canvas the width and height of the canvas should have been the same as the video element according to this. But that is not the case.

Letters are reversed

Hi,
Please help me, how to fix a letters are reversed bug after snap a picture.
Thank you.

App freezes after clicking picture in Android

Hey, your library is really useful for my project - Thank you so much.

But after the latest chrome update (with the latest Chrome version (90.0.4430.91), the app freezes after clicking the photo in Android, not able to use it. The library was working fine before the update.

Can you please check on it?

Thanks!

Your demo doesn't open environment cam on iOS Safari

I can't switch to back-facing camera on iOS Safari using this example:

https://bensonruan.com/how-to-access-webcam-and-take-photo-with-javascript/#webcam-easyjs_demo

Also, none of my implementations are able to address 'environment' setting on iOS Safari inside the constructor.

camera focus option

is it possible to get a camera focus option? the images seem blurred and out of focus

Custom file type

Is possible to choose file type? Right now method snap return png img, but I need it as jpg.

NotReadableError: Could not start video source

Hi,
I'm having trouble using the library for some Android devices, and it throws NotReadableError: Could not start video source error message in Chrome even though all permissions are provided.

Chrome ver. 92.0.4515
Samsung Note 10+

Thank you.

Android webview front camera

Hi,

I tried to to use the library in Android webview. Despite using 'environment' facing mode it is showing front camera instead of rear. Did someone solve this issue?

Thanks,
Mark

The library doesn't work in Firefox or Microsoft Edge

I am trying to use the library in Firefox and Microsoft Edge, but it displays an error "MediaStreamError" in Firefox and doesn't work in Microsoft Edge.

Can't access to webcam-easy with localhost

Hi, today I encounter a CORS issue when using webcam-easy.

I use the CDN <script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>.

It worked great yesterday, but today I got CORS issue.

I was developing on MacBook Pro/iPhone 12 iOS 15.4.1 with the latest Chrome installed.

Thanks.

can't access rear cam on android 12?

Hello, I have a problem when accessing rear cam on android 12.
When I flip to rear cam, it's always blank. Any solutions?

accessing the device torch || flash light

Is it possible to turn on the device flash light?

i followed this link:
https://codepen.io/adamrifai/pen/YLxjKa

and tested it, it turns on the flash light, but the flash light is attached to the camera event.. Is it possible to have this function added?

Greets.

How do I switch cameras?

If I have multiple webcams/video inputs, how do I specify which one to use? Right now, it defaults to the first one found.

Calling webcam functions results in multiple browser prompts for access in chrome

Calling webcam.start with default args of stream = true, the stream call results in two separate prompts to the user to allow access to the webcam in Chrome. Is there a way to request permissions from the user only once for the lifetime of the webcam object? This is the result of the navigator.mediaDevices.getUserMedia(this.getMediaConstraints()) call in both functions. In the stream function the this._streamList should be checked, and if not empty, simply use the existing stream object.

overflow-y

Hello,

I use the camera like a popup. But after closing the camera I lost the scrollbar.

There a 2 $('body').css('overflow-y','hidden'); but no restores.

And a $('body').css('overflow-y','visible'); in cameraStopped() or ('#exit-app') dosn,t restore the scrollbar.

But Thanks for the app

save to base64