changes: Default rear camera when first time
This commit is contained in:
70
app/page.tsx
70
app/page.tsx
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user