Open Camera for Image upload in HTML

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 30, 2025 12:19 PM
Forum: HTML and CSS
Replies: 1
Views: 208

Hi all,

How to open camera for image upload in HTML?

When i click a button camera should open and i will capture an image. Then the captured image will be used for uploading.

Download FREE API for Word, Excel and PDF in ASP.Net

Mudassar

0 1

Reply
User: Mudassar
Replied: on Apr 02, 2025 01:36 AM
Report

Hi makenzi.exc,

Refer below example.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        table { border: 1px solid #ccc; }
        table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
        table th, table td { padding: 5px; border-color: #ccc; }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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 () {
            Webcam.set({
                width: 320,
                height: 240,
                image_format: 'jpeg',
                jpeg_quality: 90
            });
            Webcam.attach('#webcam');
            $("#btnCapture").click(function () {
                Webcam.snap(function (data_uri) {
                    $("#imgCapture")[0].src = data_uri;
                });
            });
        });
    </script>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="webcam"></div>
            </td>
            <td>
                <img id="imgCapture" />
            </td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <input type="button" id="btnCapture" value="Capture" />
            </td>
        </tr>
    </table>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Open Camera for Image upload in HTML

Company

Explore

Follow us

Contact Us