<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Camera</title>
<style>
/* Add your custom styles here */
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#video-preview {
width: 100%;
max-width: 300px;
border: 2px solid #000;
border-radius: 8px;
}
.camera-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.control-button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #000;
}
#capture-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#captured-image {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Web Camera</h1>
<video id="video-preview" autoplay></video>
<div class="camera-controls">
<button class="control-button" id="switch-camera-button">
<i class="fas fa-sync"></i>
</button>
<button class="control-button" id="capture-button">
<i class="fas fa-camera"></i> Capture Image
</button>
</div>
<canvas id="captured-image"></canvas>
<script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
<script>
const videoPreview = document.getElementById('video-preview');
const switchCameraButton = document.getElementById('switch-camera-button');
const captureButton = document.getElementById('capture-button');
const capturedImageCanvas = document.getElementById('captured-image');
let currentCamera = 'environment';
// Check if the browser supports the getUserMedia API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Access the camera
navigator.mediaDevices.getUserMedia({ video: { facingMode: currentCamera } })
.then(stream => {
// Display the video preview
videoPreview.srcObject = stream;
})
.catch(error => {
console.error('Error accessing the camera:', error);
});
} else {
console.error('getUserMedia is not supported in this browser.');
}
// Switch between front and rear camera
switchCameraButton.addEventListener('click', () => {
currentCamera = currentCamera === 'environment' ? 'user' : 'environment';
navigator.mediaDevices.getUserMedia({ video: { facingMode: currentCamera } })
.then(stream => {
// Stop the current stream
const tracks = videoPreview.srcObject.getTracks();
tracks.forEach(track => track.stop());
// Display the new camera stream
videoPreview.srcObject = stream;
})
.catch(error => {
console.error('Error switching camera:', error);
});
});
// Capture image when the capture button is clicked
captureButton.addEventListener('click', () => {
// Create a canvas element to draw the captured image
const context = capturedImageCanvas.getContext('2d');
capturedImageCanvas.width = videoPreview.videoWidth;
capturedImageCanvas.height = videoPreview.videoHeight;
// Draw the current video frame onto the canvas
context.drawImage(videoPreview, 0, 0, capturedImageCanvas.width, capturedImageCanvas.height);
// Show the captured image
capturedImageCanvas.style.display = 'block';
// Optional: Save the captured image
// const imageDataURL = capturedImageCanvas.toDataURL();
// console.log('Captured image data URL:', imageDataURL);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Camera</title>
<style>
/* Add your custom styles here */
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#video-preview {
width: 100%;
max-width: 300px;
border: 2px solid #000;
border-radius: 8px;
}
.camera-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.control-button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #000;
}
#capture-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#captured-image {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Web Camera</h1>
<video id="video-preview" autoplay></video>
<div class="camera-controls">
<button class="control-button" id="switch-camera-button">
<i class="fas fa-sync"></i>
</button>
<button class="control-button" id="capture-button">
<i class="fas fa-camera"></i> Capture Image
</button>
</div>
<canvas id="captured-image"></canvas>
<script src="https://kit.fontawesome.com/your-font-awesome-kit.js" crossorigin="anonymous"></script>
<script>
const videoPreview = document.getElementById('video-preview');
const switchCameraButton = document.getElementById('switch-camera-button');
const captureButton = document.getElementById('capture-button');
const capturedImageCanvas = document.getElementById('captured-image');
let currentCamera = 'environment';
// Check if the browser supports the getUserMedia API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Access the camera
navigator.mediaDevices.getUserMedia({ video: { facingMode: currentCamera } })
.then(stream => {
// Display the video preview
videoPreview.srcObject = stream;
})
.catch(error => {
console.error('Error accessing the camera:', error);
});
} else {
console.error('getUserMedia is not supported in this browser.');
}
// Switch between front and rear camera
switchCameraButton.addEventListener('click', () => {
currentCamera = currentCamera === 'environment' ? 'user' : 'environment';
navigator.mediaDevices.getUserMedia({ video: { facingMode: currentCamera } })
.then(stream => {
// Stop the current stream
const tracks = videoPreview.srcObject.getTracks();
tracks.forEach(track => track.stop());
// Display the new camera stream
videoPreview.srcObject = stream;
})
.catch(error => {
console.error('Error switching camera:', error);
});
});
// Capture image when the capture button is clicked
captureButton.addEventListener('click', () => {
// Create a canvas element to draw the captured image
const context = capturedImageCanvas.getContext('2d');
capturedImageCanvas.width = videoPreview.videoWidth;
capturedImageCanvas.height = videoPreview.videoHeight;
// Draw the current video frame onto the canvas
context.drawImage(videoPreview, 0, 0, capturedImageCanvas.width, capturedImageCanvas.height);
// Show the captured image
capturedImageCanvas.style.display = 'block';
// Optional: Save the captured image
// const imageDataURL = capturedImageCanvas.toDataURL();
// console.log('Captured image data URL:', imageDataURL);
});
</script>
</body>
</html>
👍1