Webcam doesn't display when node.js it's running

I have a script that takes a picture from my webcam. it's working fine when i runs locally or when i see in a online server.

But when i run the html file from the node.js, it doesnt show the view from my webcam.

how to fix that?

MY SERVER IN NODE:

// app.js

var http = require('http');
var fs = require('fs');
sys = require('util');

var server = http.createServer(function(request, response){
  fs.readFile(__dirname + '/index.html', function(err, html){
    console.log("oi");
    response.writeHeader(200, {'Content-Type': 'text/html'});
    response.write(html);
    response.end();
  });
});

server.listen(3000, function(){
  console.log('Executando Servidor HTTP');
});

MY HTML:

    <!DOCTYPE html>
<html>
<head>
<title>Javascript Webcam Demo - <MyCodingTricks/></title>
</head>
<body>

<h3>Demonstrates simple 320x240 capture &amp; display</h3>


<div id="my_camera"></div>

    <!-- A button for taking snaps -->

<form>
        <input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
    </form>


<div id="results" class="well">Your captured image will appear here...</div>

    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="2/webcam.min.js"></script>

    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach( '#my_camera' );
        function take_snapshot() {
            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                // display results in page
                document.getElementById('results').innerHTML =
                    '<h2>Here is your image:</h2>' +
                    '<img src="'+data_uri+'"/>';

                                Webcam.upload( data_uri, 'upload.php', function(code, text) {
                                            // Upload complete!
                                            // 'code' will be the HTTP response code from the server, e.g. 200
                                            // 'text' will be the raw response content
                                });
            } );
        }
    </script>
</body>
</html>

Solution

Your program seems to be sending the content of index.html for every request (for html, icons, scripts, etc.). Maybe try using express to serve static files properly:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname));

app.listen(3000, function(){
  console.log('Executando Servidor HTTP');
});

It's even easier than the way you want to write it, because to make your script work you would have to manually route the requests based on the request object to properly send scripts and different assets, make sure to handle MIME types, paths like ../.. etc.

Also you may want to move your static files (html, css, js) to a different directory like static and change the app.js like this:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/static'));

app.listen(3000, function(){
  console.log('Executando Servidor HTTP');
});

so that no one will be able to get your app.js code by browsing to: http://localhost:3000/app.js