当 node.js 为运行时网络摄像头不显示

Question

我有一个脚本可以从我的网络摄像头拍照。当我运行在本地或在在线服务器中查看时，它工作正常。

但是当我运行来自 node.js 的 html 文件时，它不显示我的网络摄像头的视图。

如何解决？

我在节点中的服务器：

// 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');
});

我的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>

Answer 1

您的程序似乎正在为每个请求（针对 html、图标、脚本等）发送 index.html 的内容。也许尝试使用 express 来正确提供静态文件：

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

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

它比您想要的编写方式更容易，因为要使您的脚本正常工作，您必须根据 request 对象手动路由请求以正确发送脚本和不同的资产，确保处理 MIME 类型，路径 ../.. 等

您可能还想将静态文件（html、css、js）移动到其他目录，例如 static 并像这样更改 app.js：

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

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

这样一来，任何人都无法通过浏览至以下网址获得您的 app.js 代码：http://localhost:3000/app.js

当 node.js 为 运行 时网络摄像头不显示

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

javascript

node.js

webcam

当 node.js 为运行时网络摄像头不显示