Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Enable rear camera with HTML5

Javascript Web Development Front End Scripts

To enable the rear camera in HTML5, you need to access the device's camera sources and specify which camera to use. This is particularly useful on mobile devices that have both front and rear cameras.

Getting Available Camera Sources

First, use the MediaDevices.enumerateDevices() method to get all available media devices:

<!DOCTYPE html>
<html>
<head>
    <title>Rear Camera Access</title>
</head>
<body>
    <video id="video" width="320" height="240" autoplay></video>
    <button onclick="startRearCamera()">Start Rear Camera</button>
    
    <script>
        async function getRearCamera() {
            try {
                const devices = await navigator.mediaDevices.enumerateDevices();
                const videoDevices = devices.filter(device => device.kind === 'videoinput');
                
                // Find rear camera (usually has 'back' or 'rear' in label)
                const rearCamera = videoDevices.find(device => 
                    device.label.toLowerCase().includes('back') || 
                    device.label.toLowerCase().includes('rear')
                );
                
                return rearCamera ? rearCamera.deviceId : videoDevices[0]?.deviceId;
            } catch (error) {
                console.error('Error getting devices:', error);
                return null;
            }
        }
        
        async function startRearCamera() {
            const rearCameraId = await getRearCamera();
            
            if (rearCameraId) {
                const constraints = {
                    video: {
                        deviceId: { exact: rearCameraId },
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }
                };
                
                try {
                    const stream = await navigator.mediaDevices.getUserMedia(constraints);
                    document.getElementById('video').srcObject = stream;
                } catch (error) {
                    console.error('Error accessing rear camera:', error);
                }
            }
        }
    </script>
</body>
</html>

Alternative Method Using facingMode

On mobile devices, you can use the facingMode constraint to specify the rear camera:

<!DOCTYPE html>
<html>
<head>
    <title>Rear Camera with facingMode</title>
</head>
<body>
    <video id="video" width="320" height="240" autoplay></video>
    <button onclick="startCamera()">Start Rear Camera</button>
    
    <script>
        async function startCamera() {
            const constraints = {
                video: {
                    facingMode: { exact: "environment" }  // "environment" = rear camera
                }
            };
            
            try {
                const stream = await navigator.mediaDevices.getUserMedia(constraints);
                document.getElementById('video').srcObject = stream;
            } catch (error) {
                console.error('Rear camera not available, trying default:', error);
                
                // Fallback to any available camera
                try {
                    const fallbackStream = await navigator.mediaDevices.getUserMedia({ video: true });
                    document.getElementById('video').srcObject = fallbackStream;
                } catch (fallbackError) {
                    console.error('No camera available:', fallbackError);
                }
            }
        }
    </script>
</body>
</html>

Camera Facing Mode Options

facingMode Value Description Typical Use
"user" Front-facing camera Selfies, video calls
"environment" Rear-facing camera Photos of surroundings
{ exact: "environment" } Force rear camera only When rear camera is required

Error Handling

Always include proper error handling when accessing camera devices:

<script>
    async function handleCameraAccess() {
        try {
            // Request permission first
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            
            // Stop initial stream
            stream.getTracks().forEach(track => track.stop());
            
            // Now get rear camera
            const rearConstraints = {
                video: { facingMode: { exact: "environment" } }
            };
            
            const rearStream = await navigator.mediaDevices.getUserMedia(rearConstraints);
            document.getElementById('video').srcObject = rearStream;
            
        } catch (error) {
            if (error.name === 'NotAllowedError') {
                alert('Camera permission denied');
            } else if (error.name === 'NotFoundError') {
                alert('No rear camera found');
            } else {
                console.error('Camera error:', error);
            }
        }
    }
</script>

Conclusion

Use facingMode: "environment" for mobile devices or enumerate devices to select specific cameras. Always include error handling for better user experience when accessing camera hardware.

Updated on: 2026-03-15T23:18:59+05:30

372 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements