IoT Dev.: Raspberry Pi カメラのリモート制御&画像転送-PubNub編

PubNubを使ったRaspberry Pi カメラのリモート制御は、「Raspberry PiのカメラモジュールをJavaScript(Node.js)で制御する」で説明しましたが、今回は、撮った写真をブラウザにフィードバックして表示してみます。

①Raspberry Pi　開発環境の準備
1.「Raspberry Pi カメラのリモート制御&画像転送-Adafruit IO編」の「Raspberry Pi　開発環境の準備」の手順で、開発環境を準備します。
2.ターミナルを起動し、作業用フォルダに移動して「npm install pubnub」と入力し、「pubnub」モジュールをインストールします。

②プログラムの作成
1.次のJavaScriptコードを入力し、「picam.js」と名前を付けて、作業用フォルダに保存します。

	var publishKey = '<your Publish Key>';
	var subscribeKey = '<your Subscribe Key>';

	var channel1 = "shutter";
	var channel2 = "pic";

	var base64Img = require('base64-img');
	var filename = "picam.jpg";
	var raspistillOption = [ "-w", "320", "-h", "240", "-o", filename];
	var jpegoptimOption = ["--strip-all", "--max=30", filename];

	var spawn = require('child_process').spawn;

	var pubnub = require("pubnub")({
	ssl : true,
	publish_key : publishKey,
	subscribe_key : subscribeKey
	});

	pubnub.subscribe({
	channel : channel1,
	callback : function(message){
	console.log('>', message);
	if(message.action === 'on'){
	var raspistill = spawn('raspistill', raspistillOption);
	raspistill.on('close', function(code, signal){
	var jpegoptim = spawn('jpegoptim', jpegoptimOption);
	jpegoptim.on('close', function(code, signal){
	base64Img.base64(filename,function(err, data){
	if (!err){
	publish(data);
	}
	});
	});
	});
	}
	}
	});

	function publish(data){
	pubnub.publish({
	channel : channel2,
	message : data,
	callback: function(m){console.log(m);},
	error: function(m){console.log(m);}
	});
	}

view raw picam.js hosted with ❤ by GitHub

2.次のHTMLコードを入力し、「camera.html」と名前を付けて、任意場所に保存します。

	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script>
	$(function(){
	var publishKey = '<your Publish Key>';
	var subscribeKey = '<your Subscribe Key>';
	// channel名の設定
	var channel1 = "shutter"
	var channel2 = "pic"

	// PubNub初期化
	var pubnub = PUBNUB.init({
	publish_key : publishKey,
	subscribe_key : subscribeKey
	});

	pubnub.subscribe({
	channel : channel2,
	callback : function(data) {
	var img = new Image();
	img.src = data;
	img.onload = function(){
	$('#main').append(img);
	}
	}
	});

	// データの送信
	function publish(action) {
	var value = {'action': action};
	pubnub.publish({
	channel : channel1,
	message : value,
	callback: function(message){console.log(message);}
	});
	}

	// [ON]ボタンのクリックで文字列「on」を送信
	$('#on-button').click(function(){
	publish('on');
	});
	});

	</script>
	</head>
	<body>
	<button id="on-button">Shutter</button>
	<div id="main"></div>
	</body>
	</html>

view raw camera.html hosted with ❤ by GitHub

<your Publish key>にはPublish Keyを、<your Subscribe key>にはSubscribe Keyを入力します。

③プログラムの実行と動作確認
1.ターミナルを起動し、作業用フォルダに移動します。
2.「sudo node picam.js」と入力します。
3.ブラウザで「camera.html」を開いて、[Shutter]ボタンをクリックします。
4.撮影が実行(カメラモジュールのLEDが点灯)され、写真がブラウザ上に表示されることを確認します。

IoT Dev.

2016年1月13日水曜日

Raspberry Pi カメラのリモート制御&画像転送-PubNub編

0 件のコメント:

コメントを投稿