Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paxapos/av-inputs
stencil js component for adding an <input /> style component that stores a File (picture) from webcam. Showing a video preview.
https://github.com/paxapos/av-inputs
Last synced: about 2 months ago
JSON representation
stencil js component for adding an <input /> style component that stores a File (picture) from webcam. Showing a video preview.
- Host: GitHub
- URL: https://github.com/paxapos/av-inputs
- Owner: paxapos
- License: mit
- Created: 2023-03-08T11:53:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-02T19:53:06.000Z (about 1 year ago)
- Last Synced: 2024-10-30T16:51:38.491Z (about 2 months ago)
- Language: HTML
- Size: 19.8 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# input-file-from-webcam
stencil.js component that shows the webcam and allow you to take pictures easily and changes from to back camera with one click
```html
```
# How it works?
just add:
npm install https://github.com/alevilar/input-file-from-webcam
```js
const elInputFileFromWebcam = document.getElementById("my-input");
elInputFileFromWebcam.addEventListener("click", (ev) => {
elInputFileFromWebcam.takePic().then( (pic) => console.info("here is your picture", pic))
});
```
# Properties
## width
defaults to 460px
in canvas you must set always the width
## height
defaults to 460px
in canvas you must set always the height
## facing-mode
we uses "user" or "environment" but you have others. If you don't write this property. the element will change facinbg Mode each time you click the element
For more FacingModel optiones you cant read here https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode#value
## callback for drawing on canvas
you can override the default behaviour by adding a callback function here.
if you put something here. will execute this function for doing a canvas.drawImage
you must call
ctx.drawImage(this.elVideo, left, top, imgSize, imgSize, 0,0, this.canvas.width, this.canvas.height)
inside your function
we are just bypassing the callback function
```js
let ctx = this.canvas.getContext('2d');
functionCallback.call(ctx, elVideo, left, top, imgSize, imgSize, 0,0, this.canvas.width, this.canvas.height);
```js
# Methods
## takePic
you can easily take a picture by calling this method in your element
```js
elInputFileFromWebcam.takePic().then( (pic) => console.info("here is your picture", pic))
```
## toggleCamera
Change front or back camera
```js
elInputFileFromWebcam.toggleCamera()
```
# Events
## pictureTaken
returns a File
```js
elInputFileFromWebcam.addEventListener("pictureTaken", (pic) => console.info("here is my pic from callback", pic))
```
## facingModeChanged
returns a ConstrainDOMString each time a FacingModel was changed
```js
elInputFileFromWebcam.addEventListener("facingModeChanged", (fm) => console.info("here is your facing Mode now", fm))
```