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

RasPi:MJPG-streamer動画配信で遊んでみた♬

More than 1 year has passed since last update.

mjpg-stream-javascript2.jpg
RasPiで物体検出しようかなと思い立ち。。。

とりあえず、USBカメラを入手して使ってみた。
もちろんRasPiCameraもついているが、ここにUSBカメラをつなげて、どうにかなるか。。

とりあえず、DL使った物体検出は環境も性能も難しいので、以下の二つをやってみたので、記録しておこうと思う。

1.MJPG-streamerを使って、Wifi内動画配信
2.OpenCVを使って、動画処理と保存
どちらもほぼまんま動いたので苦労はしなかった!

今回は、1のMJPG-streamerで遊んでみたを記載する。

MJPG-streamerを使って、Wifi内動画配信

参考サイトのとおり、インストールすると動く。
【参考】
第8回: MJPG-streamerのインストール
Raspberry Pi でWebカメラ (4) M-JPEG streamerをつかったストリーミング配信
Raspberry Piでwebカメラの映像を配信する方法(MJPG-streamer編)

枝葉は異なるが、参考サイトは全て同じ手順で実施しているので、以下で動く。
ポイントはどこにインストールしたいかをあらかじめ決めて、Dirを作成しておくことです。

$ cd ~
$ mkdir mjpg-streamer
$ cd mjpg-streamer

その後、以下のコマンドを実行してください。

$ sudo apt-get install subversion libjpeg-dev imagemagick
$ svn co https://mjpg-streamer.svn.sourceforge.net/svnroot/mjpg-streamer mjpg-streamer
$ cd mjpg-streamer/mjpg-streamer
$ make
$ sudo install
start_server.sh
#!/bin/sh

PORT="8080" #ポート番号
ID="xxxx" #IDは好きなもの
PW="xxxxxxxx" #パスワード
SIZE="640x480" #画面サイズ
FRAMERATE="20" #フレームレート
export LD_LIBRARY_PATH=/usr/local/lib
./mjpg_streamer \
    -i "input_uvc.so -f $FRAMERATE -r $SIZE -d /dev/video0 -y -n" \
    -o "output_http.so -w /usr/local/www -p $PORT -c $ID:$PW"

$ sh start_server.shを実行すると、RasPiのコンソールは以下のような表示が表れます。

$ sh start_server.sh
MJPG Streamer Version: svn rev: 3:172
 i: Using V4L2 device.: /dev/video0
 i: Desired Resolution: 640 x 480
 i: Frames Per Second.: 20
 i: Format............: YUV
 i: JPEG Quality......: 80
 o: www-folder-path...: /usr/local/www/
 o: HTTP TCP port.....: 8080
 o: username:password.: xxxx:xxxxxxxx
 o: commands..........: enabled

そして、ブラウザから
http://xxx.xxx.xxx.xxx:8080
にアクセスし、usernameとpasswordを入力すると以下の画像が表れます。
MJPG-streamer.jpg

因みに、アクセスはWifiでつながっている他のPCからもできました。
つまり、遠隔で離れたRasPiのUSBカメラで簡単に監視できるということです。

あと、これを今度は外部のインターネットからアクセスするには、参考のRaspberry Piでwebカメラの映像を配信する方法(MJPG-streamer編)後半に記載されている方法で配信できます。

残念ながら、ウワンにはルータ設定ができませんでしたが、以下のJavascript.htmlでWifi内からアクセスできました。

javascript.html
var imageNr = 0;
var finished = new Array();

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.src = "http://192.168.0.15:8080?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

function imageOnload() {
  this.style.zIndex = imageNr;
  while (1 < finished.length) {
    var del = finished.shift();
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  createImageLayer();
}

<body onload="createImageLayer();">
    <div id="webcam"><noscript><img src="http://192.168.0.15:8080?action=snapshot" /></noscript></div>
</body>

action=snapshotとなっているが、これで滑らかなfpsで配信できている。
mjpg-stream-javascript.jpg

まとめ

・mjpg-streamerでRasPi利用のUSBカメラで動画配信できた
・これ使うと簡単に室内外監視ができそう

・外部ネットからのアクセスやりたいなぁ~

おまけ

この画面の左をクリックして、それぞれを表示して、Hintsにあるhereをクリックすると、htmlなどのサンプルが表示される。
使い方自由だ!

そして、Javascriptのときは、fps表示されている。

Runtime info:
120 ms (8.3 fps)
Avg28 : 137 ms (7.3 fps)

・Static

static_simple.html
<html>
  <head>
    <title>MJPG-Streamer - Static Example</title>
    <!-- refresh page after a few seconds, this works nearly in every browser -->
    <meta http-equiv="refresh" content="10" />
  </head>
  <body>
    <center>
      <img src="/?action=snapshot" alt="This is a static snapshot" />
    </center>
  </body>
</html>

・Stream

stream_simple.html
<html>
  <head>
    <title>MJPG-Streamer - Stream Example</title>
  </head>
  <body>
    <center>
      <img src="/?action=stream" />
    </center>
  </body>
</html>

・Javascript

javascript_simple.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MJPEG-Streamer</title>
</head>
<script type="text/javascript">

/* Copyright (C) 2007 Richard Atterer, richardยฉatterer.net
   This program is free software; you can redistribute it and/or modify it
   under the terms of the GNU General Public License, version 2. See the file
   COPYING for details. */

var imageNr = 0; // Serial number of current image
var finished = new Array(); // References to img objects which have finished downloading
var paused = false;

function createImageLayer() {
  var img = new Image();
  img.style.position = "absolute";
  img.style.zIndex = -1;
  img.onload = imageOnload;
  img.onclick = imageOnclick;
  img.src = "/?action=snapshot&n=" + (++imageNr);
  var webcam = document.getElementById("webcam");
  webcam.insertBefore(img, webcam.firstChild);
}

// Two layers are always present (except at the very beginning), to avoid flicker
function imageOnload() {
  this.style.zIndex = imageNr; // Image finished, bring to front!
  while (1 < finished.length) {
    var del = finished.shift(); // Delete old image(s) from document
    del.parentNode.removeChild(del);
  }
  finished.push(this);
  if (!paused) createImageLayer();
}

function imageOnclick() { // Clicking on the image will pause the stream
  paused = !paused;
  if (!paused) createImageLayer();
}

</script>
<body onload="createImageLayer();">

<div id="webcam"><noscript><img src="/?action=snapshot" /></noscript></div>

</body>
</html>

RasPi安定化のためにdphys-swapfileサイズを変更する

動かしながらの普通のText編集やviだと書込みエラーが出た。。。
以下で書込みまで編集して再起動できました。

$ sudo service dphys-swapfile stop
$ cat /etc/dphys-swapfile 
...
CONF_SWAPSIZE=100
$ sudo nano /etc/dphys-swapfile 
$ cat /etc/dphys-swapfile 
...
CONF_MAXSWAP=4096
...
$ sudo service dphys-swapfile start

【参考】
ラズパイ(Raspbian Jessie)とスワップメモリ容量の変更(環境設定の続き)
Raspberry Piでいろいろ。【その2 -> Swap領域設定、パスワード変更、パッケージ更新】

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした