index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Raspberry Pi Camera</title>
    <script src="/socket.io/socket.io.js"></script>
    <style type="text/css">
        body {
            background-color: #0b97c4;
        }

        #container {
            width: 50%;
            margin: 0 auto;
        }

        #container p {
            width: 100%;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        document.onreadystatechange = function () {
            var state = document.readyState
            if (state == 'complete') {
                var imageCount = 0;
                var socket = io();
                socket.on('image', function(message) {
                    document.getElementById("image").src = 'data:image/jpg;base64,' + message;
                    document.getElementById("caption").innerHTML = 'Image #' + ++imageCount;
                });
            }
        }
    </script>
</head>
<body>
<div id="container">
    <img width="640" height="480" id="image">
    <p id="caption">Image #0</p>
</div>
</body>
</html>