Java Servlet writing image in infinite loop

Question

I am writing an image file in my Java servlet. As it is getting it's data from a webcam I want to write to the file in an infinite loop to keep the image up to date.

I'm embedding the image file in my webpage, and using a JavaScript function to read the image every second. I start the servlet with a button in my webpage, which sends off a GET.

My problem is, and this may be obvious, that the servlet runs it's infinite writing loop and the image is not updated on the page. I can see in my file explorer that the image is written to constantly, but it's not updated on my page. I know that the JS function is being called as I tested it by writing the current time to the page, which was updating.

How can I get the image to be updated without this infinite loop?

Webpage:

<html>
    <head>
    <title>Webcam CCTV</title>
    </head>
    <body>
        <img id='feed' src="img/frame.jpg" width='600' />
        <form method="GET"
            action="startCCTV.do">
            <br><br>
            <center>
                <input type="SUBMIT"? value='Start'/>
            </center>
        </form>
        <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
        <script src="js/main.js"></script>
    </body>
 </html>

main.js:

window.setInterval(function updateFrame() {
    $("#feed").attr('src', 'img/frame.jpg');
}, 1000);

Controller:

public class CCTVStart extends HttpServlet {

    public void doGet(HttpServletRequest request,
            HttpServletResponse response)
            throws IOException, ServletException {

        String contextPath = getServletContext().getRealPath("/");

        ImageCapturer ic = new ImageCapturer(contextPath);
        ic.captureImage();
    }
}

Model:

public class ImageCapturer {

    private String mContextPath;

    public ImageCapturer(String contextPath) {

        mContextPath = contextPath;
    }

    public void captureImage() throws IOException {

        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);

        FileOutputStream os = new FileOutputStream(
                new File(mContextPath + "myLog.txt"));

        os.write("\nStarting capture...".getBytes());
        os.close();

        VideoCapture camera = new VideoCapture(0);
        Mat frame = new Mat();

        camera.read(frame);

        if (!camera.isOpened()) {
            return;
        }

        while (true) {
            if (camera.read(frame)) {
                imwrite(mContextPath + "img\\frame.jpg", frame);
            }
        }
    }
}

You are setting the image to what ever image was loaded with the page `'img/frame.jpg'`. You need to make a call to the server to get the updated image. — Ken, May 19 '17 at 14:43
@Ken I am retrieving the new image every second, but the issue was the browser was caching it. I think I should call the servlet every so often instead of the infinite loop in the servlet though. — petehallw, May 19 '17 at 15:02
Yes, like I said, you were grabbing the image that was already loaded (cached) and you needed to actually make a call to the server to get the updated image. — Ken, May 19 '17 at 15:08

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

1

I would guess that your browser is caching the original image and so subsequent calls to refresh it don't re-pull the image from the server. Instead the image in the browser cache is used. Hence the image on the web page remains the same.

There is a great tip here for forcing a refresh. Hope it helps.

edited May 23 '17 at 12:10

Community

1
1

answered May 19 '17 at 14:53

Tom Mac

9,693
3
25
35

Thanks that did actually solve my issue! I think my method is still a bit poor but it's kind of working for now (the image sometimes disappears, likely because it's being written to at the time of trying to refresh it...). – petehallw May 19 '17 at 15:00

Java Servlet writing image in infinite loop

1 Answers1