Help us understand the problem. What is going on with this article?

Raspberry Pi のカメラモジュールとNode.jsで写真を撮る

More than 3 years have passed since last update.

Raspberry Piのカメラモジュールを使った写真撮影の覚え書きです。Node.jsのexpressを利用します。

環境

  • Raspberry Pi2 ModelB (raspbian-Jessie・Node.js v4.2.4)
  • PLANEX 無線LAN子機 (USBアダプター型) GW-USNANO2A (FFP)
  • Raspberry Pi カメラモジュール Raspberry Pi Camera Board
  • Raspberry Pi カメラモジュール専用 Blackケース

Raspberry Pi カメラモジュール Raspberry Pi Camera Board

カメラモジュール用の保護ケースを取り付けるとこのようになります。

DSC_0008 (1).jpg

基本のコマンドラインツール

Raspberry Piの公式ドキュメントによると、カメラモジュールの静止画は以下のコマンドラインで撮影可能になっています。

ssh
raspistill -o cam.jpg

-o cam.jpgでファイル名を指定して撮影、保存まで簡単に行ってくれます。

その他オプション指定により、画像の大きさ、品質などを指定出来ます。タイムラプス撮影も標準で撮影出来る様になっています。

Node.jsで撮影・プレビュー

bashスクリプトを利用した撮影・プレビューは公式ドキュメントに載っています。今回はブラウザから撮影・プレビューをする為Node.jsのexpressを利用しました。

任意のディレクトリで以下コマンドを実施します。(今回はexpress generatorを利用します。モジュールは導入済みとします。)

ssh
$ express -e camera
$ cd camera && npm install
$ DEBUG=camera:* npm start

これで標準の雛形が作られます。今回は撮影画面をデフォルトのindex.ejsとして、画像のプレビュー画面をpreview.ejsとして追加しました。

基本のファイル構成はそのまま利用します。

Raspberry Pi 2016-03-12 23-07-39.png

routes/index.js
//expressの使用許可
var express = require('express');
var router = express.Router();

//コマンドラインを利用する為child_processの使用許可
var spawn = require('child_process').spawn;

//ホーム画面index.ejsの表示
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Ras Pi Cam' });
});

//シヤッターボタンクリック時の処理
router.get('/shutter', function (req, res) {
  console.log(req.query);
  var id = req.query.id;

var raspistill = spawn('raspistill', [ '-o' , './public/images/raspi.jpg']);

raspistill.stdout.on('data', function (data) {
  console.log('stdout: ' + data);
});

raspistill.stderr.on('data', function (data) {
  console.log('stderr: ' + data);
});

raspistill.on('close', function (code) {
  console.log('child process exited with code ' + code);
});

});


//プレビュー画面preview.ejsの表示
router.get('/preview', function(req, res, next) {
  res.render('preview', { title: 'Ras Pi Cam' });
});

module.exports = router;

express generatorを利用すると、app.jsでクライアント側の面倒な画像ファイル・CSS・jsの読み込み指定をしてくれます。

ここでは撮影用の画面index.jsとプレビュー用の画面preview.ejsの指定と撮影画面でボタンをクリックした際に撮影コマンドraspistillを実行させる処理をこのindex.jsに記述しました。

views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
        <h1 class="text-center h2"><%=title %></h1>
    </header>
    <article class="text-center">
      <button class="btn btn-default" id="shutter">Shutter</button>
      <a class="btn btn-default" role="button" href="/preview">Preview</a>

    </article>
    <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="/javascripts/main.js"></script>
  </body>
</html>

public/javascripts/main.js
$("#shutter").click(function() {
        $.get("http://192.168.0.10:3000/shutter", { id: 'shutter' } );
    });

public/stylesheets/style.css
body {
  margin: 0 auto;
  max-width: 640px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

article{
  padding: 50px;
}

a {
  color: #00B7FF;
}

Ras Pi Cam 2016-03-12 23-25-11.png

シャッターボタンをクリックするとindex.jsにGETリクエストを送信します。

プレビューボタンはpreview.ejsにリンクするようにしました。

views/preview.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
        <h1 class="text-center h2"><%=title %></h1>
    </header>
    <article class="text-center">
      <img class="img-responsive" src="/images/raspi.jpg">
      <br>
      <a class="btn btn-default" href="/" role="button">Back</a>

    </article>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="/javascripts/main.js"></script>
  </body>
</html>


Ras Pi Cam 2016-03-13 00-02-29.png

画像の保存先は./public/images/raspi.jpgとパブリックフォルダに保存します。

表示させる時はexpressのapp.jsでpublicフォルダの読み込み指定をしているので、/images/raspi.jpgで読み込めます。

参考にさせていただきました

Raspberry piのカメラモジュールで撮影した画像をnode.jsで立てたサーバーに表示する

Raspberry PiのカメラモジュールをJavaScript(Node.js)で制御する

PonDad
人工知能愛好家(Artificial Intelligence Hobbyist)
https://pondad.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away