MJPG-streamer カメラをブラウザから起動／終了させる

ブラウザからON/OFF出来るボタンを付けてみました。

C言語でラッパープログラム作成

プログラムを置く任意の場所に移動

cd tool

cd tool

起動用プログラム

起動用ファイルを作成

vi mjpg-streamer_open.c

1	vi mjpg-streamer_open.c

記述、保存

#include <stdlib.h>

int main(void){
  setuid(0);
  system("LD_LIBRARY_PATH=/usr/local/lib mjpg_streamer -i \"/usr/local/lib/input_uvc.so -y -r 640x480 -f 15 -d /dev/video0 -y\" -o \"/usr/local/lib/output_http.so -p 8081 -w www -c BASIC認証のID:BASIC認証のパスワード\" -b");
  return 0;
}

#include <stdlib.h>

int main(void){

setuid(0);

system("LD_LIBRARY_PATH=/usr/local/lib mjpg_streamer -i \"/usr/local/lib/input_uvc.so -y -r 640x480 -f 15 -d /dev/video0 -y\" -o \"/usr/local/lib/output_http.so -p 8081 -w www -c BASIC認証のID:BASIC認証のパスワード\" -b");

return 0;

}

コンパイル

sudo gcc -o mjpg-streamer_open mjpg-streamer_open.c

1	sudo gcc -o mjpg-streamer_open mjpg-streamer_open.c

SUID（Set User ID）

sudo chmod +s mjpg-streamer_open

1	sudo chmod +s mjpg-streamer_open

起動出来るかテスト

./mjpg-streamer_open

1	./mjpg-streamer_open

終了用プログラム

起動用ファイルを作成

vi mjpg-streamer_close.c

1	vi mjpg-streamer_close.c

記述、保存

#include <stdlib.h>

int main(void){
  setuid(0);
  system("kill -9 `pidof mjpg_streamer`");
  return 0;
}

#include <stdlib.h>

int main(void){

setuid(0);

system("kill -9 `pidof mjpg_streamer`");

return 0;

}

SUID（Set User ID）

sudo chmod +s mjpg-streamer_close

1	sudo chmod +s mjpg-streamer_close

終了出来るかテスト

./mjpg-streamer_close

1	./mjpg-streamer_close

実行用PHP

任意の場所に作成

mjpg-streamer.php

<?php
$action = $_GET['action'];
$result = `/パス/mjpg-streamer_$action 2>&1`;
echo $result, PHP_EOL;

<?php

$action = $_GET['action'];

$result = `/パス/mjpg-streamer_$action 2>&1`;

echo $result, PHP_EOL;

ブラウザからPHPにアクセスして起動・終了のテスト

HTML

ボタンを作成

<p>
  <span id="cameraOpen" class="button">ON</span>
  <span id="cameraClose" class="button">OFF</span>
</p>

<p>

</p>

JavaScript

<script>
  function postMjpgStreamer(action) {
    var url = '/パス/mjpg-streamer.php?action=' + action; // リクエスト先URL
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState != 4) {
      // リクエスト中
      } else if (xhr.status != 200) {
      // 失敗
        alert('失敗しました。もう一回試してみてね！');
      } else {
      // 取得成功
      alert(xhr.response);
        window.location.reload() ;
      }
    };
    xhr.send(null);
  }

  document.getElementById('cameraOpen').addEventListener('click' ,function() {
    postMjpgStreamer('open');
  }
  ,false);

  document.getElementById('cameraClose').addEventListener('click' ,function() {
    postMjpgStreamer('close');
  }
  ,false);
</script>

function postMjpgStreamer(action) {

var url = '/パス/mjpg-streamer.php?action=' + action; // リクエスト先URL

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function () {

if (xhr.readyState != 4) {

// リクエスト中

} else if (xhr.status != 200) {

// 失敗

alert('失敗しました。もう一回試してみてね！');

} else {

// 取得成功

alert(xhr.response);

window.location.reload() ;

}

};

xhr.send(null);

}

document.getElementById('cameraOpen').addEventListener('click' ,function() {

postMjpgStreamer('open');

}

,false);

document.getElementById('cameraClose').addEventListener('click' ,function() {

postMjpgStreamer('close');

}

,false);

</script>

HTML&JSのデモソースコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MJPG-streamer Button</title>
<meta charset="utf-8">
<meta name="description" content="MJPG-streamer カメラをブラウザから起動／終了させる デモ">
<meta name="author" content="Home Made Garbage">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>

<button type="button" id="cameraOpen">ON</button>
<button type="button" id="cameraClose">OFF</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  function postMjpgStreamer(action) {
    var url = 'mjpg-streamer.php?action=' + action; // リクエスト先URL
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState != 4) {
      // リクエスト中
      } else if (xhr.status != 200) {
      // 失敗
        alert('失敗しました。もう一回試してみてね！');
      } else {
      // 取得成功
      alert(xhr.response);
        window.location.reload() ;
      }
    };
    xhr.send(null);
  }
 
  document.getElementById('cameraOpen').addEventListener('click' ,function() {
    postMjpgStreamer('open');
  }
  ,false);
 
  document.getElementById('cameraClose').addEventListener('click' ,function() {
    postMjpgStreamer('close');
  }
  ,false);
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>MJPG-streamer Button</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

function postMjpgStreamer(action) {

var url = 'mjpg-streamer.php?action=' + action; // リクエスト先URL

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function () {

if (xhr.readyState != 4) {

// リクエスト中

} else if (xhr.status != 200) {

// 失敗

alert('失敗しました。もう一回試してみてね！');

} else {

// 取得成功

alert(xhr.response);

window.location.reload() ;

}

};

xhr.send(null);

}

document.getElementById('cameraOpen').addEventListener('click' ,function() {

postMjpgStreamer('open');

}

,false);

document.getElementById('cameraClose').addEventListener('click' ,function() {

postMjpgStreamer('close');

}

,false);

</script>

</body>

</html>

GitHubにもあげてみました。

MJPG-streamer-Button/index.html at master · homemadegarbage/MJPG-streamer-Button
mjpg-streamer.php の /パス/ の部分を修正して頂ければ、アップロードしてそのまま動く形になっているかと思います。

完成

※ 上記スクリーンショットは、MJPG-Streamer の埋め込み＆ボタンに当ブログ上のCSSが当たっている状態です。デモソースコードではMJPG-Streamerの埋め込みはしておらず、HTMLデフォルトのボタンのみ表示されている状態になります。

MJPG-Streamer の埋め込みについては、こちらの記事に記載しております。

スマホからも・・・

#鼻くそ pic.twitter.com/kJ8oLPJElJ

— HomeMadeGarbage (@H0meMadeGarbage) 2017年2月11日

参考にさせて頂きました