Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
48
Help us understand the problem. What is going on with this article?
@MuAuan

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

More than 3 years have 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領域設定、パスワード変更、パッケージ更新】

48
Help us understand the problem. What is going on with this article?
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
MuAuan
2021年為になる記事にする 記事420いいね2000フォロワー200 2020年;いい記事を書く 記事359/350いいね1590/1500フォロワ ー144/150 2019年 記事275/300いいね1035/1000フォロワー97/100 2018年 記事140/200いいね423/500フォロワー48/50 7/8/2018 記事90いいね227フォロワー25

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
48
Help us understand the problem. What is going on with this article?