Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Tessel 2とUSBカメラを接続してみよう

Tessel 2ではじめるお手軽IoT 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/12/22 14:00

 Web系の知識でかんたんに操作できる初心者向けのマイコンボードTessel 2を使って、JavaScriptでのIoTを試してみます。ハードウェアに詳しくないWeb系エンジニアでもIoTシステムを体験できます。

目次

対象読者

 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コマンドで、最新のものにアップデートしておいてください。

Tessel 2とUSBカメラ
Tessel 2とUSBカメラ

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行です。

リスト1 index.js
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」を使って、かんたんな監視カメラページを作ってみましょう。

リスト2 express.js
// 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を作成します。

リスト3 index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>監視カメラ</title>
  </head>
  <body>
    ただいま監視中です...<br /><img src="/stream">
  </body>
</html>

 なお、このようなJSファイル以外をTessel 2に配置する場合は、プロジェクト内の.tesselincludeファイルに、次のようにパス名を記述しておきます。

リスト4 .tesselinclude
public/index.html

 t2 run express.jsコマンドで、実行します。サンプルは、ごくシンプルなHTTPページですが、工夫すれば、Tessel 2を本格的な監視カメラとして利用することができるでしょう。

監視カメラページ
監視カメラページ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 高江 賢(タカエ ケン)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Tessel 2ではじめるお手軽IoT
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5