Home Made Garbage

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

ホーム
電子工作
Raspberry Pi
WordPress
IOT

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

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

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

起動用プログラム

起動用ファイルを作成

記述、保存

コンパイル

SUID(Set User ID)

起動出来るかテスト

終了用プログラム

起動用ファイルを作成

記述、保存

SUID(Set User ID)

終了出来るかテスト

実行用PHP

任意の場所に作成

mjpg-streamer.php

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

HTML 

ボタンを作成

JavaScript

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

GitHubにもあげてみました。

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

完成

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

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

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

スマホからも・・・

参考にさせて頂きました

“MJPG-streamer カメラをブラウザから起動/終了させる” への 4 件のフィードバック

  1. USBカメラをブラウザからON/OFF出来たらなぁと思っていたらこちらに辿り着きました。
    実行用PHPで、ブラウザからPHPにアクセスして、
    mjpg-streamer.php?action=open
    mjpg-streamer.php?action=close
    で、起動・終了のテストは出来たのですが、
    HTMLボタンから出来ません。
    ボタンが表示されませんし、Javascriptも動いていないような気がします。
    mjpg-streamer.phpファイルを置くディレクトリが、
    mjpgstreamerのファイルが置かれている場所が正しいのか?
    webサーバーの公開ディレクトリが正しいのか?
    もう少し詳しく教えてもらえないでしょうか?
    これが出来たら、スナップショットが撮れるボタンも作って、
    その画像も見れるようにしたいなぁと思っております。

    1. 二児のパパさん、コメントありがとうございます。

      HTMLとJSデモソースコードを追記しました。
      また、GitHubにもアップロードしてみました。
      mjpg-streamer.php の /パス/ の部分を修正して頂ければ、ファイルをアップロードしてそのまま動く形になっているかと思います。

      デモソースコードでは、index.html と mjpg-streamer.php が同じ階層で動くようになっています。
      webサーバの公開ディレクトリに、例えば mjpg-streamer-button などディレクトリを作成して頂き、そこに index.html と mjpg-streamer.php をアップロードして頂ければ動くかと思います。

      参考になりましたら幸いです。

  2. デモソースコードありがとうございました。
    うまく出来ました。
    1点訂正がありました。
    20行目の OFF
    ですが、
    id=”cameraOpen”になっています、id=”cameraClose”ですね。

    この流れに従って、
    mjpg-streamer_snapも追加で作り、
    wget -O /保存先/t1_date +%Y%m%d%H%M%S.jpg http://RaspberryPiのアドレス:8080/?action=snapshot

    Javascriptに
    document.getElementById(‘cameraSnap’).addEventListener(‘click’ ,function() {
    postMjpgStreamer(‘snap’);
    }
    ,false);
    を追加して、
    ボタンも
    SNAP
    も追加して、
    スナップショットを撮ったファイルを見れるようにPHPも作成して、
    念願叶いました、ありがとうございました。

    1. お役に立てたようで良かったです!
      ご指摘ありがとうございます、記事とGitの方も修正しました。

      スナップショット の方も作成されたのですね、
      コードもありがとうございます、参考になります✨

コメントを残す

メールアドレスが公開されることはありません。コメントのみでもOKです。

TOP