changes: Default rear camera when first time

This commit is contained in:
2025-10-08 23:01:18 -06:00
parent b3b7ddee63
commit 1299da1a1a

View File

@@ -79,15 +79,39 @@ function HomePageContent() {
useEffect(() => {
const initializeCamera = async () => {
try {
// First request permissions to get stable deviceIds
const permissionStream = await navigator.mediaDevices.getUserMedia({ video: true });
permissionStream.getTracks().forEach(track => track.stop()); // Stop immediately
// Check if there's a stored preference first
const storedDeviceId = localStorage.getItem('selectedCameraDeviceId');
let targetStream: MediaStream;
if (storedDeviceId) {
// User has a saved preference, use it
console.log('Using stored camera preference:', storedDeviceId);
targetStream = await navigator.mediaDevices.getUserMedia({
video: { deviceId: { exact: storedDeviceId } }
});
} else {
// No preference - try to use back/environment camera
console.log('No stored preference - requesting back camera (facingMode: environment)');
try {
targetStream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: 'environment' }
});
} catch (err) {
// Fallback: facingMode might not be supported, use default
console.log('facingMode not supported, using default camera');
targetStream = await navigator.mediaDevices.getUserMedia({ video: true });
}
}
// Stop the stream temporarily to enumerate devices
targetStream.getTracks().forEach(track => track.stop());
// Now enumerate devices - deviceIds will be stable after permission granted
const devices = await navigator.mediaDevices.enumerateDevices();
const videoInputs = devices.filter(d => d.kind === 'videoinput');
setVideoDevices(videoInputs); // Always populate the dropdown
setVideoDevices(videoInputs);
if (videoInputs.length === 0) {
setCameraStatus('no_devices');
return;
@@ -95,16 +119,30 @@ function HomePageContent() {
// Load history
setHistory(getHistory());
// Try to use stored device, otherwise use first available
const storedDeviceId = localStorage.getItem('selectedCameraDeviceId');
const targetDevice = (storedDeviceId && videoInputs.find(d => d.deviceId === storedDeviceId))
|| videoInputs[0];
setSelectedDeviceId(targetDevice.deviceId);
localStorage.setItem('selectedCameraDeviceId', targetDevice.deviceId);
await startStream(targetDevice.deviceId);
// Find which camera was actually used
const activeTrack = targetStream.getVideoTracks()[0];
const activeDeviceId = activeTrack?.getSettings().deviceId;
let finalDevice: MediaDeviceInfo;
if (activeDeviceId && videoInputs.find(d => d.deviceId === activeDeviceId)) {
// Found the device that was actually used
finalDevice = videoInputs.find(d => d.deviceId === activeDeviceId)!;
console.log('Using camera:', finalDevice.label || 'Unknown');
} else {
// Fallback: try to find back camera by label
const backCameraKeywords = ['back', 'rear', 'trasera', 'environment', 'facing back'];
finalDevice = videoInputs.find(d =>
backCameraKeywords.some(keyword => d.label.toLowerCase().includes(keyword))
) || videoInputs[0];
console.log('Fallback to camera:', finalDevice.label || 'Unknown');
}
setSelectedDeviceId(finalDevice.deviceId);
localStorage.setItem('selectedCameraDeviceId', finalDevice.deviceId);
await startStream(finalDevice.deviceId);
} catch (err) {
// Permission denied or no camera
console.error('Error accessing camera or enumerating devices:', err);