How To Capture Photo Using Webcam In jQuery/JavaScript

Yasin Panwala Oct 15, 2020 1 6.4K

In this article, we will learn how to capture a photo using a webcam or device’s camera in jQuery/JavaScript.

For a better user interface, the capture photo feature is an interesting feature in modern websites and that can be used for many purposes like uploading photo(s) to the server, etc.

Let’s first use HTML code where the user can see their live video and capture his/her photo. We have used jQuery CDN to make it much easier to use JavaScript.

Now create and open the Index.html file and add the code to it.

<!DOCTYPE html>
<html>
<head>
    <style>
        .d-none {
            display: none;
        }
    </style>    
</head>
<body>
    <button type="button" id="btnActivateCamera">Activate Camera</button>
    <button type="button" id="btnDeactivateCamera" class="d-none">Deactivate Camera</button>
    <br />
    <video id="capturevideo" width="230" height="230" class="d-none"></video>
    <br />
    <button type="button" id="btnCapture" class="d-none">Capture</button>
    <hr />
    <canvas id="capturecanvas" width="230" height="230" class="d-none"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

Now create and open the Index.js file and add the code to it.

var videoCapture;
$(document).ready(function () {
    videoCapture = document.getElementById('capturevideo');
});
$(document).on('click', '#btnActivateCamera', function () {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // access video stream from webcam
        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            // on success, stream it in video tag 
            window.localStream = stream;
            videoCapture.srcObject = stream;
            videoCapture.play();
            activateCamera();
        }).catch(e => {
            // on failure/error, alert message. 
            alert("Please Allow: Use Your Camera!");
        });
    }
});
$(document).on('click', '#btnDeactivateCamera', function () {
    // stop video streaming if any
    localStream.getTracks().forEach(function (track) {
        if (track.readyState == 'live' && track.kind === 'video') {
            track.stop();
            deactivateCamera();
        }
    });
});
$(document).on('click', '#btnCapture', function () {
    document.getElementById('capturecanvas').getContext('2d').drawImage(videoCapture, 0, 0, 230, 230);
});
function activateCamera() {
    $("#btnActivateCamera").addClass("d-none");
    $("#btnDeactivateCamera").removeClass("d-none");
    $("#capturevideo").removeClass("d-none");
    $("#btnCapture").removeClass("d-none");
    $("#capturecanvas").removeClass("d-none");
}
function deactivateCamera() {
    $("#btnDeactivateCamera").addClass("d-none");
    $("#btnActivateCamera").removeClass("d-none");
    $("#capturevideo").addClass("d-none");
    $("#btnCapture").addClass("d-none");
    $("#capturecanvas").addClass("d-none");
}

Output: