対象読者
IoTに興味があり、JavaScriptの基本的な知識がある方を対象とします。
はじめに
Tessel 2にはUSBポートがついていて、PC用の汎用的なUSBモジュールも接続可能です。そこで今回は、USB接続のWebカメラを接続して、画像を表示してみます。
利用できるWebカメラ
Tessel 2で利用できるWebカメラは、UVC（USB Video Class）に準拠したものです。UVCとは、USB機器の標準仕様のひとつで、Webカメラ向けのUSB通信の仕様です。UVCに準拠していれば、（Tessel 2に限らず、多くの環境で）専用のドライバは不要です。
今回のサンプルでは、ロジクール社の「HD Webcam C310」というWebカメラを用いました。
また、Tessel 2のファームウェアは、Ver 0.0.16で動作を確認しています。古いバージョンでは動作しない可能性がありますので、t2 updateコマンドで、最新のものにアップデートしておいてください。
USBカメラの制御（1）
USBカメラの制御についても、前回の気候センサーと同様、npmモジュールが公開されています。ただし、執筆時点では開発途上のため、npmモジュールの公開ページにあるサンプルコードのままでは、うまく動作しないようです。
静止画像と動画の配信
単純に、静止画像と動画を配信するだけなら、ごくシンプルなコードで実現できます。プロジェクト用のフォルダを新規作成し、initコマンドで初期化したあと、npmモジュールをインストールします。
Webカメラを制御するnpmモジュールは、install tessel-avというコマンドでインストールできます。tessel-avという名前のとおり、このモジュールにはWebカメラだけではなく、USB接続のマイク、スピーカーの制御も含まれています。
> mkdir webcam > cd webcam > t2 init > npm install tessel-av
では、index.jsを書き換えてみます。次のように、たったの3行です。
var av = require('tessel-av'); // Webカメラ用モジュールの読み込み
var camera = new av.Camera(); // mjpg_streamerの起動
console.log(camera.url); // 動画配信URLの表示
USBポートにカメラを接続し、t2 run index.jsコマンドで実行します。
プログラムが起動すると、コンソールに、http://XX.XX.XX.XX:8080/?action=streamのようなURLが表示されます。このIPアドレスは、Tessel 2のローカルアドレスですので、そのままブラウザで表示してみましょう。動画が配信されているはずです。
これだけのコードで動画のWeb配信が可能なのは、MJPG-streamerという動画ストリーミングソフトウェアが起動しているからです（Tessel 2の初期のファームウェアでは、MJPG-streamerではなく、FFmpegがインストールされていました）
MJPG-streamerは、その名のとおり、Motion JPEG形式の動画をストリーム配信するためのオープンソースのアプリケーションです。Tessel 2には、HTTP経由の配信が可能なMJPG-streamerのバイナリがインストールされています。
なお、動画だけでなく、http://XX.XX.XX.XX:8080/?action=snapshotとすることで、静止画を取得することもできます
av.Cameraのオプション
Cameraクラスのコンストラクタでは、次のように画像などのオプション指定が可能です。ただし解像度やフレームレートは、USBカメラのハードウェア仕様に依存しますので、カメラの性能以上を指定しても無視されます。
var camera = new av.Camera(
{
dimensions: '1280x720', // 解像度
fps:30, // フレームレート
});
起動時に指定可能なオプションは、次のとおりです。
| オプション | 概要 | デフォルト |
|---|---|---|
| dimensions | 画面解像度（縦×横） | 800×600 |
| fps | フレームレート（1秒あたりのフレーム数） | 30 |
| quality | JPEGのクオリティ（1～100） | 100 |
| port | サーバー用ポート | 8080 |
監視カメラページ
MJPG-streamerに直接アクセスするだけでなく、別途HTTPサーバを起動して表示することもできます。Node.js向けのWebフレームワークである「Express」を使って、かんたんな監視カメラページを作ってみましょう。
// Webカメラ用モジュールの読み込み
var av = require('tessel-av');
var express = require('express');
var app = express();
var server = require('http').Server(app);
var port = 80;
var os = require('os');
var path = require('path');
// mjpg_streamerの起動
var camera = new av.Camera();
server.listen(port, function () {
console.log(`start web site...`);
});
// 静的ファイル用ディレクトリの設定
app.use(express.static(path.join(__dirname, '/public')));
// 動画の表示
app.get('/stream', (request, response) => {
response.redirect(camera.url);
});
監視カメラを表示するページ自体は、静的なHTMLファイルとしています。ここでは、プロジェクトにpublicディレクトリを作成して、その中に次のindex.htmlを作成します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>監視カメラ</title>
</head>
<body>
ただいま監視中です...<br /><img src="/stream">
</body>
</html>
なお、このようなJSファイル以外をTessel 2に配置する場合は、プロジェクト内の.tesselincludeファイルに、次のようにパス名を記述しておきます。
public/index.html
t2 run express.jsコマンドで、実行します。サンプルは、ごくシンプルなHTTPページですが、工夫すれば、Tessel 2を本格的な監視カメラとして利用することができるでしょう。
