https://github.com/simonrolph/photo-to-api-app
Takes a picture, sends it to an API
https://github.com/simonrolph/photo-to-api-app
Last synced: about 1 month ago
JSON representation
Takes a picture, sends it to an API
- Host: GitHub
- URL: https://github.com/simonrolph/photo-to-api-app
- Owner: simonrolph
- Created: 2025-01-27T11:00:28.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T11:08:47.000Z (4 months ago)
- Last Synced: 2025-04-09T22:58:24.332Z (about 1 month ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Photo --> API minimal web app
This is a lightweight web application that allows users to take a photo using their device's camera and upload the captured image to an API. Initial starting code was generated by ChatGPT
## Features
- Access the device's camera directly from the browser.
- Capture a still image from the live video stream.
- Preview the captured photo.
- Upload the photo to a specified API endpoint.
## Requirements
- A modern browser that supports `getUserMedia` (e.g., Chrome, Firefox, Edge, Safari).
- The device must have a camera.
- HTTPS is required for accessing the camera on most browsers.
## How to Use
1. **Open the App**: Load the `index.html` file in a browser.
2. **Grant Camera Permission**: Allow the browser to access your camera when prompted.
3. **Capture Photo**: Click the "Capture Photo" button to take a picture.
4. **Upload Photo**: Click the "Send Photo" button to upload the captured image to the API.
5. **View Status**: The status message will display whether the upload was successful or failed.
## File Structure
```
Camera-Capture-App/
|-- index.html # The main HTML file for the application.
```
## Customisation
### Changing the API Endpoint
To change the API where the image is uploaded, update the following line in the `index.html` file:
```javascript
const apiUrl = 'https://your-api-endpoint.com/upload';
```
Replace `'https://your-api-endpoint.com/upload'` with the URL of your API endpoint.
### Adjusting Image Format
The app captures images in PNG format by default. To change the format, modify this line:
```javascript
const photo = canvas.toDataURL('image/png');
```
Replace `'image/png'` with `'image/jpeg'` or any other supported format.
## Troubleshooting
- **Camera Not Accessible**: Ensure the browser has permission to access the camera. If using a laptop, ensure no other application is using the camera.
- **Upload Fails**: Verify the API endpoint is correct and supports receiving the image data.
- **HTTPS Requirement**: The app must be served over HTTPS (or localhost) for the camera to work on most browsers.
## Known Limitations
- The app does not store or cache the image locally.
- No advanced image editing or cropping features are provided.