@paxapos/av-inputs v1.0.9
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
<script type="module" src='https://cdn.jsdelivr.net/npm/input-file-from-webcam/dist/esm/input-file-from-webcam.js'></script>
<input-file-from-webcam id="my-input"></input-file-from-webcam>
How it works?
just add:
npm install https://github.com/alevilar/input-file-from-webcam
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
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
elInputFileFromWebcam.toggleCamera()
Events
pictureTaken
returns a File
elInputFileFromWebcam.addEventListener("pictureTaken", (pic) => console.info("here is my pic from callback", pic))
facingModeChanged
returns a ConstrainDOMString each time a FacingModel was changed
elInputFileFromWebcam.addEventListener("facingModeChanged", (fm) => console.info("here is your facing Mode now", fm))