document.addEventListener('DOMContentLoaded', function() {
const flashButton = document.getElementById('flashToggleBtn');
let flashOn = false;
// Assuming you already have camera access and video track in your existing code
// This function toggles the flash/torch mode
flashButton.addEventListener('click', async function() {
try {
// Get the active video track from your existing camera functionality
// This is a placeholder - you'll need to adapt this to your existing code
const videoTrack = window.yourExistingVideoStream?.getVideoTracks()[0];
if (!videoTrack) {
console.error('No active video track found');
return;
}
const capabilities = videoTrack.getCapabilities();
// Check if torch is supported on this device
if (!capabilities.torch) {
alert('Flash/torch not supported on this device');
return;
}
// Toggle flash state
flashOn = !flashOn;
// Apply the new torch setting
await videoTrack.applyConstraints({
advanced: [{ torch: flashOn }]
});
// Update button appearance
if (flashOn) {
flashButton.textContent = 'Turn Flash Off';
flashButton.style.backgroundColor = '#ff6b6b'; // Change to active color
} else {
flashButton.textContent = 'Turn Flash On';
flashButton.style.backgroundColor = '#4dabf7'; // Change to inactive color
}
} catch (error) {
console.error('Error toggling flash:', error);
}
});
});
// 1. Add this CSS to your project's Custom Code section in the head tag
// 2. Add this HTML div right before the closing 
tag