28

ノードを介してウェブカメラにアクセスしようとした経験のある人はいますか? これに関する以前の試みを見つけることができないようです。

少し拡張すると、nodeJSサーバーが実行されており、ノードが実行されている同じボックスでWebカメラにアクセスできるようにしたい（実際には、ノードをクライアント実装として使用しています）。私がやりたかったいくつかのこと - ウェブカメラから画像を取得する、または、別のサーバーにパイプして他のクライアントにストリーミングするウェブカメラへのストリームを取得できれば最高です ;)

これを行う方法を知っている人はいますか？

ありがとう

4

5 に答える 5

15

Web カメラの操作に関しては、Node.js に固​​有のものはないと思います。使用している言語やサーバーに関係なく、概念は一般的に同じです。関連するハードウェアとそのハードウェアへのインターフェイスが、ソリューションを定義する必要があります。

最も単純なケースは、Web カメラに含まれるソフトウェアによって定期的にディスクに保存される個々のスナップショットを提供することです。または、ローカル プロセスまたはプログラムを呼び出してスナップショットをオンデマンドで保存するシステム コールを作成することもできます。次に、最新のスナップショットを定期的に更新する Node.js を使用してページを提供できます。

または、オペレーティング システム ( DirectShow、Windows Image Acquisition、IKPictureTaker、V4L2など) に合わせたコントローラーを使用して Web カメラ ハードウェアと直接やり取りし、 Node.js をトランスポート メカニズムとして使用してライブ ビデオ ストリームを作成することもできます。

ウェブカメラにネットワーク インターフェイスがあり、既にストリーミング サーバーを提供している場合は、代わりに、nginx や Apache などを使用して、リバース プロキシ ソリューションを検討することをお勧めします。これは、 nginx を使用して VLC でフォーマットされた Web カメラ ストリームをプロキシするソリューションです。

これは、個々のフレームを取得し、画像データをエンコードし、websockets を使用してクライアント ページのキャンバス要素に画像データをプッシュし、 Node.js を中間サーバーとして使用することで、ビデオ ストリームをキャプチャするクリエイティブなソリューションです。

于 2012-05-31T17:16:43.787 に答える
1

私は puppeteer (chrome headless browser) に基づいた独自のライブラリに取り組んでいるので、100% 移植性があり、問題なく動作します (ビデオ サイズ 480x320 の場合、私のマシンでは 40fps): https://www.npmjs.com/package/camera -キャプチャ. ビデオ ストリームとコマンド ライン API を使用するさまざまな方法があります。非常に新しいプロジェクトなので、フィードバックは大歓迎です。

于 2019-09-26T23:15:45.897 に答える
-4

ノード アプリケーションで Web にアクセスするのは非常に簡単で、それを行うには html5 getUserMedia() メソッドを使用するだけです。リーミング部分は非常に簡単です。ここに完全なコードがあります。

ステップ 1. Web カメラにアクセスしている 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 をたどり、クリック画像を保存してください - TrinityTuts

于 2016-01-05T10:32:09.650 に答える