Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
camera-preview-component
Advanced tools
Camera preview component which can be used for scanning barcodes
This component opens the camera using getUserMedia
. We can use third-party libraries to add extra frame analysing functions like barcode scanning to it.
Online demo which scans barcodes using Dynamsoft Barcode Reader.
In your HTML, add the component:
<camera-preview></camera-preview>
You can define the props and events like this:
const cameraElement = document.querySelector('camera-preview');
const onOpened = () => {
console.log("opened");
}
const onClosed = () => {
console.log("closed");
}
cameraElement.addEventListener("opened",onOpened);
cameraElement.addEventListener("closed",onClosed);
cameraElement.drawOverlay = true;
cameraElement.desiredCamera = "founder";
cameraElement.facingMode = "environment";
cameraElement.active = true;
cameraElement.desiredResolution = {width:1280,height:720};
You can get the inner video
element using the getVideoElement
method:
const video = await cameraElement.getVideoElement();
You can take a photo using the takePhoto
method:
const blob = await cameraElement.takePhoto(true); //pass true to try to use the ImageCapture API if supported
You can learn more about the usage by checking out the demos.
Put a script tag similar to this
<script type="module">
import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/camera-preview-component/dist/esm/loader.js';
defineCustomElements();
</script>
in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc
Run npm install camera-preview-component --save
Put a script tag similar to this
<script type="module">
import { defineCustomElements } from 'node_modules/camera-preview-component/dist/esm/loader.js';
defineCustomElements();
</script>
in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc
npm install camera-preview-component --save
import camera-preview-component;
How to specify which camera to use?
desiredCamera
prop. If one of the camera's name contains it, then it will be used. You can get the devices list using the getAllCameras
method.facingMode
prop. Set it to environment
to use the back camera. Set it to user
to use the front camera. Please note that this is not supported on Desktop.You can use the two props together.
FAQs
Camera preview component which can be used for scanning barcodes
We found that camera-preview-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.