How to Capture Image using Web Camera in JSP only (Without using Servlet) and save it into MS SQL Server

Question

I want to capture the image using web camera and store it into MS SQL Server database.

I am able to capture the image using web camera but right now i am trying to pass the image to next page but could not get the image on next jsp to process the image.

Code to capture image

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Web  camera - Testing</title>

    <script>

        // Put event listeners into place
        window.addEventListener("DOMContentLoaded", function () {
            // Grab elements, create settings, etc.
            var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
                    videoObj = {"video": true},
            errBack = function (error) {
                console.log("Video capture error: ", error.code);
            };

            // Put video listeners into place
            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia(videoObj, function (stream) {
                    video.src = stream;
                    video.play();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia(videoObj, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    video.play();
                }, errBack);
            } else if (navigator.mozGetUserMedia) { // WebKit-prefixed
                navigator.mozGetUserMedia(videoObj, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    video.play();
                }, errBack);
            }

            // Trigger photo take
            document.getElementById("snap").addEventListener("click", function () {
                context.drawImage(video, 0, 0, 213, 160);
                document.getElementById('canvasImg').src = canvas.toDataURL("image/png");

//                    document.getElementById('video').style.display = "none";  // hide the live image video portin after click on take picture
            });



        }, false);

    </script>



</head>
<body>
    <h1>Capture Image using Camera!</h1>

    <!--
     Ideally these elements aren't created until it's confirmed that the 
     client supports video/camera, but for the sake of illustrating the 
     elements involved, they are created with markup (not JavaScript)
    -->
    <video id="video" width="213" height="160" autoplay></video>
    <button id="snap">Capture Photo</button>

    <form action="savetesting.jsp" method="post">
        <canvas id="canvas" width="213" height="160"  name="ImageFile1" style="display: none;"></canvas>

        <img id="canvasImg" name="ImageFile"><img>
        <input type="reset" value="Reset"/>
        <input type="submit" value="Submit"/>

    </form>

</body>
</html>

but now i am trying to get the captured image using

request.getParameter("ImageFile");

but could not succeed.

Please help me out with this issue, How to get the image on next page then i will try to save the image in MS SQL Server Database but only using JSP (without using Servlet).

Answer 1

Neither canvas nor img are form input fields, even when placed inside form tag. Add

<input type="hidden" name="ImageData" id="ImageData" />

to your form, and

document.getElementById('ImageData').value = canvas.toDataURL("image/png");

to the click event handler of the snap button.

Then, in JSP, get the image data (in the data URI format) using

String imageData = request.getParameter("ImageData");

and process them using javax.xml.bind.DatatypeConverter as described in Convert DataURL image to image file in java

How to Capture Image using Web Camera in JSP only (Without using Servlet) and save it into MS SQL Server

Question

1 answers

solution1
1 ACCPTED 2016-08-03 07:31:22

How to Capture Image using Web Camera in JSP only (Without using Servlet) and save it into MS SQL Server

Question

1 answers

solution1 1 ACCPTED 2016-08-03 07:31:22

solution1
1 ACCPTED 2016-08-03 07:31:22