Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 & JavaScript: resolution or size of
HTML5 provides two approaches for capturing photos from mobile devices with different levels of control over image resolution and size.
HTML Media Capture
The simplest approach uses HTML's capture attribute with accept="image/*" on input elements to access the device camera.
<!DOCTYPE html>
<html>
<head>
<title>HTML Media Capture</title>
</head>
<body>
<h3>Capture Photo with HTML</h3>
<input type="file" accept="image/*" capture="environment" id="camera">
<br><br>
<img id="preview" style="max-width: 300px; display: none;">
<script>
document.getElementById('camera').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const preview = document.getElementById('preview');
preview.src = e.target.result;
preview.style.display = 'block';
console.log('Image captured, size:', file.size, 'bytes');
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
Limitations: This method cannot control image resolution or size - it uses the device's default camera settings.
Media Capture Streams (getUserMedia API)
The getUserMedia API provides programmatic access to the camera with full control over capture constraints including resolution, frame rate, and camera selection.
<!DOCTYPE html>
<html>
<head>
<title>Media Capture Streams</title>
</head>
<body>
<h3>Capture with Size Control</h3>
<video id="video" width="320" height="240" autoplay></video>
<br><br>
<button onclick="capturePhoto()">Take Photo</button>
<br><br>
<canvas id="canvas" width="320" height="240" style="display: none;"></canvas>
<img id="photo" style="max-width: 320px; display: none;">
<script>
let stream;
// Start camera with specific resolution
async function startCamera() {
try {
const constraints = {
video: {
width: { ideal: 640 },
height: { ideal: 480 },
facingMode: 'environment' // Use back camera
}
};
stream = await navigator.mediaDevices.getUserMedia(constraints);
document.getElementById('video').srcObject = stream;
console.log('Camera started with constraints:', constraints.video);
} catch (error) {
console.error('Error accessing camera:', error);
}
}
function capturePhoto() {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
// Draw video frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// Convert to image
const photoData = canvas.toDataURL('image/jpeg', 0.8); // 80% quality
document.getElementById('photo').src = photoData;
document.getElementById('photo').style.display = 'block';
console.log('Photo captured with resolution:', canvas.width, 'x', canvas.height);
}
// Start camera when page loads
startCamera();
</script>
</body>
</html>
Comparison
| Feature | HTML Media Capture | getUserMedia API |
|---|---|---|
| Size Control | No | Yes |
| Resolution Control | No | Yes |
| Browser Support | Good (95%+) | Moderate (85%+) |
| Implementation | Simple HTML | JavaScript required |
| Preview | No live preview | Live camera preview |
Key Constraints for getUserMedia
Common video constraints for controlling capture quality:
const constraints = {
video: {
width: { min: 320, ideal: 640, max: 1920 },
height: { min: 240, ideal: 480, max: 1080 },
frameRate: { ideal: 30, max: 60 },
facingMode: 'user', // 'user' for front, 'environment' for back
resizeMode: 'crop-and-scale'
}
};
Conclusion
Use HTML Media Capture for simple photo uploads without size control. Choose getUserMedia API when you need to specify resolution, provide live preview, or control image compression for optimal file sizes.
842 Views
