In this article I will explain with an example, how to switch between front and back camera while capturing image (photo) from WebCam using jQuery in HTML.
 
 
HTML Markup
The HTML Markup consist of:
DIV – For displaying Live Web Camera.
Image – For displaying the captured image.
Button – For capturing the picture using the Web Camera and switch the camera.
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <th align="center"><u>Live Camera</u></th>
        <th align="center"><u>Captured Picture</u></th>
    </tr>
    <tr>
        <td><div id="webcam"></div></td>
        <td><img id="imgCapture" /></td>
    </tr>
    <tr>
        <td align="center" colspan="2">
            <input type="button" id="btnFrontBack" value="Back" />
            <input type="button" id="btnCapture" value="Capture" />
        </td>
    </tr>
</table>
 
 
The jQuery Webcam Plugin implementation
Inside the HTML Markup, the following jQueryand jQuery Webcam.js JS Script files are inherited.
1. jquery.min.js
2. webcam.js
 
Applying the jQuery Webcam.js plugin
Inside the jQuery document ready event handler, the jQuery Webcam.js plugin is applied to the HTML DIV.
Note: For more details on how to using jQuery Webcam.js plugin, please refer my article Capture Image (Photo) from Web Camera (Webcam) using HTML5 and jQuery.
 
Switching the facing mode of Web Camera (Webcam)
When Switch button is clicked, the facingmode of jQuery Webcam.js plugin is switched.
facingMode has following two options:
environment - To access the rear camera.
user - To access the front camera. It is by default if not set.
 
Capturing the Image from Web Camera (Webcam)
The Capture button have been assigned with a jQuery click event handler.
When Capture button is clicked, the Image is captured from Web Camera (Webcam) using the snap function of the jQuery Webcam.js plugin.
Finally, the captured Image data in BASE64 string format is assigned to the HTML Image element.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.js"></script>
<script type="text/javascript">
    $(function () {
        ApplyPlugin();
        $("#btnCapture").click(function () {
            Webcam.snap(function (data_uri) {
                $("#imgCapture")[0].src = data_uri;
            });
        });
 
        $("#btnFrontBack").click(function () {
            $('#btnFrontBack').val($('#btnFrontBack').val() == 'Back' ? 'Front' : 'Back');
            Webcam.reset();
            ApplyPlugin();
        });
    });
 
    function ApplyPlugin() {
        var mode = $('#btnFrontBack').val() == 'Back' ? 'user' : 'environment';
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90,
            constraints: { facingMode: mode }
        });
        Webcam.attach('#webcam');
    }
</script>
 
 
Screenshot
Switch between Front and Back camera in WebCam using jQuery in HTML
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code