LoginSignup
48
55

More than 5 years have passed since last update.

@MuAuan(ムー ウワン)

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

Last updated at Posted at 2018-05-18

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

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

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

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

今回は、１の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領域設定、パスワード変更、パッケージ更新】

48
55
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
48
55