@ableroy1996/camera-js
v1.0.0
Published
@ableroy1996/camera-js is a lightweight JavaScript package that enables easy integration of camera functionality into any web application. It allows you to open the camera, take multiple photos, and retrieve them for use in your application.
Readme
@ableroy1996/camera-js
@ableroy1996/camera-js is a lightweight JavaScript package that enables easy integration of camera functionality into any web application. It allows you to open the camera, take multiple photos, and retrieve them for use in your application.
Installation
Install the package using npm:
npm install @ableroy1996/camera-jsUsage
Follow these steps to integrate @ableroy1996/camera-js into your web application:
1. Import the Package
import Camera from '@ableroy1996/camera-js';2. Initialize the Camera
Create a container in your HTML where the camera feed will be displayed:
<div id="camera-container" style="width: 100%; height: auto;"></div>Then, initialize the camera in your JavaScript:
const camera = new Camera();3. Open the Camera
Call the openCamera method to open the camera in the specified container:
await camera.openCamera('camera-container');4. Take Photos
Use the clickPhoto method to capture a photo. This will return a base64-encoded image string:
const photo = camera.clickPhoto();
console.log(photo); // Logs the base64-encoded image data5. Retrieve All Photos
Call the getPhotos method to retrieve all photos taken in the current session:
const photos = camera.getPhotos();
console.log(photos); // Array of base64-encoded images6. Stop the Camera
To release the camera and stop the feed, use the stopCamera method:
camera.stopCamera();Example Integration
Here’s a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ableroy1996/camera-js Example</title>
</head>
<body>
<div id="camera-container" style="width: 100%; height: auto;"></div>
<button id="take-photo">Take Photo</button>
<button id="stop-camera">Stop Camera</button>
<div id="photos"></div>
<script type="module">
import Camera from '@ableroy1996/camera-js';
const camera = new Camera();
// Open camera
await camera.openCamera('camera-container');
// Take photo
document.getElementById('take-photo').addEventListener('click', () => {
const photo = camera.clickPhoto();
const img = document.createElement('img');
img.src = photo;
document.getElementById('photos').appendChild(img);
});
// Stop camera
document.getElementById('stop-camera').addEventListener('click', () => {
camera.stopCamera();
});
</script>
</body>
</html>API Reference
openCamera(containerId: string): Promise<void>
Opens the camera and displays the feed in the specified container.
- containerId: ID of the HTML container where the camera feed will be displayed.
clickPhoto(): string
Captures a photo from the camera feed and returns a base64-encoded image string.
getPhotos(): string[]
Returns an array of all photos taken during the current session.
stopCamera(): void
Stops the camera feed and releases resources.
License
MIT