SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Tessel 2ではじめるお手軽IoT

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

 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を本格的な監視カメラとして利用することができるでしょう。

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
USBカメラの制御(2)

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Tessel 2ではじめるお手軽IoT連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9858 2017/03/02 12:23

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング