Question

有没有人有尝试通过节点访问网络摄像头的经验？我似乎无法在此找到任何先前的尝试。

要扩展一点 - 我有一个nodeJS服务器正在运行，我希望能够在运行节点的同一个盒子上访问网络摄像头（所以我真的使用节点作为客户端实现）。我想做的一些事情 - 从网络摄像头获取图像，或者，如果我可以获得流向另一台服务器并流式传输到其他客户端的网络摄像头，那就太棒了。）

有谁知道如何做到这一点？

由于

Answer 1

在使用网络摄像头时，我认为没有任何特定于Node.js的概念，无论您使用何种语言或服务器，概念通常都是相同的。所涉及的硬件和该硬件的接口应该是您的解决方案的定义。

最简单的情况是提供由网络摄像头附带的软件定期保存到磁盘的各个快照，或者您可以a system call调用local process或program来保存按需快照。然后，您可以使用定期刷新最新快照的Node.js来提供页面。

或者，您可以使用为操作系统定制的控制器（DirectShow，Windows Image Acquisition，IKPictureTaker，V4L2等）直接与网络摄像头硬件连接，并且使用Node.js作为传输机制创建live video stream。

如果您的网络摄像头具有网络接口并且已经提供了流媒体服务器，您可能需要查看反向代理解决方案，例如使用nginx或Apache。 Here is a solution其中nginx用于代理由VLC格式化的网络摄像头流。

Here is a creative solution that captures a video stream by taking individual frames, encoding the image data, and using websockets to push the image data to a canvas element on a client page，使用Node.js作为中间服务器。

Answer 2

我还没有潜入这个，但你可以使用Python来使用OpenCV。

然后你可以使用node-python从Node调用python。

http://opencv-python-tutroals.readthedocs.org/en/latest/py_tutorials/py_gui/py_video_display/py_video_display.html

https://www.npmjs.com/package/node-python

如果一切都在Windows上运行，可以选择使用.Net和C＃与摄像头对话，然后使用edge.js进行.Net调用。

Edge.Js现在通过Mono支持linux，你只需要运行一个可以提供单声道包的Linux发行版，或者自己构建单声道。

Answer 3

可以将OpenCV与Node一起使用来访问您的相机......本文将为您提供基本概述。 https://community.risingstack.com/opencv-tutorial-computer-vision-with-node-js/

另一种方法是在npm存储库上通过 camera 进行搜索，你会发现许多处理网络摄像头的模块。

Answer 4

还可以使用node.js库node-webcam

Webcam.capture( "test_picture", function( err, data ) {} );

但是我想它是fswebcam的简单包装。

Answer 5

我正在基于puppeteer（无头Chrome浏览器）开发自己的库，因此100％可移植并且可以正常工作（对于40x320的视频尺寸，在我的机器中为40fps）：https://www.npmjs.com/package/camera-capture。也有使用视频流和命令行API的不同方式。非常新的项目，因此非常欢迎反馈。

Answer 6

在节点应用程序中访问web非常简单我们只需要使用html5 getUserMedia（）方法来做到这一点而且扩展部分非常容易，这里是完整代码请节点我使用快速框架：

第1步。我在其中访问网络摄像头的layout.jade文件

extends layout
block content
  div(class="container" id="Cool" ng-app="mainApp" ng-controller="formController")
    h2.blue.red#header("property"="pValue") Capture your image from webcam
    div.row
     div.col-md-6
       video#video(autoplay='')
     div.col-md-6
       canvas#canvas(width='640', height='480')
    div
      button#snap Capture
      button#new New
      button(id="upload" ng-click="uploadImage()") Upload


  script(type="text/javascript").
   // Put event listeners into place
      window.addEventListener("DOMContentLoaded", function() {
      // Grab elements, create settings, etc.
      var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      video = document.getElementById("video"),
      videoObj = { "video": true },
      errBack = function(error) {
      console.log("Video capture error: ", error.code);
      };
      // Put video listeners into place
      if(navigator.getUserMedia) { // Standard
      navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
      }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
      navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.URL.createObjectURL(stream);
      video.play();
      }, errBack);
      } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
      navigator.mozGetUserMedia(videoObj, function(stream){
      video.src = window.URL.createObjectURL(stream);
      video.play();
      }, errBack);
      }
      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
      context.drawImage(video, 0, 0, 640, 480);
      // Littel effects
      //$('#video').fadeOut('slow');
      $('#canvas').fadeIn('slow');
      //$('#snap').hide();
      //$('#new').show();
      // Allso show upload button
      //$('#upload').show();
      });
      // Capture New Photo
      document.getElementById("new").addEventListener("click", function() {
      //$('#video').fadeIn('slow');
      //$('#canvas').fadeOut('slow');
      //$('#snap').show();
      //$('#new').hide();
      });
      // Upload image to sever
      document.getElementById("upload").addEventListener("click", function(){
      var dataUrl = canvas.toDataURL();
       console.log(dataUrl);

      });
      }, false);   
   var mainApp = angular.module("mainApp", []);
   mainApp.controller("formController", function($scope, $http) {
       $scope.uploadImage = function () {
         var request = $http({
            method: "post",
            url:  "/captureImage",
            data: {
               base64: document.getElementById("canvas").toDataURL()
            },
            headers: { 'Content-Type': 'application/json' }
          });
        request.success(function (data) {
          console.log(data);
        });
        request.error(function(serverResponse, status, headers, config) {
           alert("failure");
        });
      };
   });

第2步。我的路线文件，我在其中提交或保存上传的图片

router.get('/captureImage', function(req, res, next) {
    res.render('captureImage', { title: 'Capture Image and upload' });
});

router.post('/captureImage', function(req, res, next) {
    //console.log("FormData "+ req.body.base64);
    var base64Data = req.body.base64.replace(/^data:image\/png;base64,/, "");
    fs.writeFile("uploads/out.png", base64Data, 'base64', function(err) {
        if(err){
            console.log(err);
            }else{
            res.send(JSON.stringify({'status': 1, 'msg': 'Image Uploaded'}));
        }
    });
});

有关完整教程，请点击链接Accessing WebCam with NodeJS and save click image - TrinityTuts

使用NodeJS访问WebCam

6 个答案: