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

![mjpg-stream-javascript2.jpg](https://qiita-image-store.s3.amazonaws.com/0/233744/7645763f-2efd-657e-e33d-b21fdf3c9951.jpeg)
**RasPiで物体検出しようかなと思い立ち。。。**

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

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

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

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

###MJPG-streamerを使って、Wifi内動画配信
参考サイトのとおり、インストールすると動く。
【参考】
・[第8回: MJPG-streamerのインストール](http://blue-black.ink/?page_id=2245)
・[Raspberry Pi でWebカメラ (4) M-JPEG streamerをつかったストリーミング配信](http://blog.wdm.jp/?p=405)
・[Raspberry Piでwebカメラの映像を配信する方法(MJPG-streamer編)](https://www.smartllc.jp/blog/20150222-how-to-stream-webcam-with-mjpgstreamer-on-raspberrypi/)

枝葉は異なるが、参考サイトは全て同じ手順で実施しているので、以下で動く。
ポイントはどこにインストールしたいかをあらかじめ決めて、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](https://qiita-image-store.s3.amazonaws.com/0/233744/86507b9b-46e9-5e86-852b-5fce09a04e1a.jpeg)

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

あと、これを今度は外部のインターネットからアクセスするには、参考の[Raspberry Piでwebカメラの映像を配信する方法(MJPG-streamer編)](https://www.smartllc.jp/blog/20150222-how-to-stream-webcam-with-mjpgstreamer-on-raspberrypi/)後半に記載されている方法で配信できます。

残念ながら、ウワンにはルータ設定ができませんでしたが、以下の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](https://qiita-image-store.s3.amazonaws.com/0/233744/2be119dd-642b-d27c-2dbc-b794c144b8a3.jpeg)

###まとめ
・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）とスワップメモリ容量の変更（環境設定の続き） ](https://a244.hateblo.jp/entry/2016/12/12/010429)
[Raspberry Piでいろいろ。【その2 -> Swap領域設定、パスワード変更、パッケージ更新】](http://inaba.hatenablog.com/entry/2016/12/13/023251)