网络摄像头在 node.js 运行时不显示答案

【问题标题】：Webcam doesn't display when node.js it's running网络摄像头在 node.js 运行时不显示
【发布时间】：2016-06-02 23:36:26
【问题描述】：

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

但是当我从 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>

【问题讨论】：

从外观上看，你的服务器不服务2/webcam.min.js。

标签： javascript node.js webcam

【解决方案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');
});

这样任何人都无法通过浏览http://localhost:3000/app.js获得您的app.js代码

【讨论】：