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).

name="ImageFile1" in the form but you getting request.getParameter("ImageFile"); both needs to be uniform! — Narendra Jaggi, Aug 03 '16 at 06:51
i have tried to get the image source using both ImageFile and ImageFile1 but could not get the image source — Karan Chopra, Aug 03 '16 at 07:00
When I use your above code in a file, it opens a blank page. not the webcam ? — Tuhin Subhra Dey, May 25 '17 at 09:54

score 1 · Accepted Answer · edited May 23 '17 at 12:06

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

edited May 23 '17 at 12:06

Community

1
1

answered Aug 03 '16 at 07:31

Jozef Chocholacek

2,874
2
20
25

yes the above code works to get the image source on next page using hidden field. Thank you for the help. Now i m converting the base64 data to byte Array to save the image into Database. – Karan Chopra Aug 03 '16 at 09:53
@KaranChopra Would you mind to accept my answer then? – Jozef Chocholacek Aug 03 '16 at 09:59
now what i want to save the image on web server and then save the image as byte into MS SQL Server Database; – Karan Chopra Aug 03 '16 at 10:38
@KaranChopra See http://stackoverflow.com/questions/18664579/recommended-way-to-save-uploaded-files-in-a-servlet-application for how to save it (it talks about servlets, but it will be the same in JSP), and then http://www.java-tips.org/other-api-tips-100035/69-jdbc/203-how-to-storeretrieve-image-tofrom-sqlserver.html for storing it into MS SQL. – Jozef Chocholacek Aug 03 '16 at 10:50
Btw. I wonder, why you cannot use servlet - it's definitely considered an anti-pattern to have such logic in JSP, as JSPs should be the View part (or a template), not the business logic part. – Jozef Chocholacek Aug 03 '16 at 10:52
actually i have to just integrate that feature in already running project so that's why and the project is made only with HTML, CSS, JavaScript, jQuery, AJAX and JSP. – Karan Chopra Aug 03 '16 at 10:54

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

1 Answers1