カメラストリーム配信

カメラモジュール用にmjpg-streamerをインストールします。インストール済みの場合は「ラズベリーパイにUSBカメラを接続した状態で起動します。」移行を実施します。

mjpg-streamerに必要なモジュールをインストールします。

sudo apt-get update
sudo apt-get install build-essential imagemagick libv4l-dev libjpeg-dev cmake -y

mjpg-streamerのソースをダウンロードします。

mkdir ~/mjpg
cd ~/mjpg
git clone https://github.com/jacksonliam/mjpg-streamer.git
cd mjpg-streamer/mjpg-streamer-experimental

インストールします。

make
sudo make install

ラズベリーパイにUSBカメラを接続した状態で起動します。

cd ~/mjpg/mjpg-streamer/mjpg-streamer-experimental/
sudo bash start.sh

起動できない場合は以下コマンドUSBカメラが接続できているか確認します。

ls -l /dev/video0

以下URLでブラウザで確認する。 http://[Raspbery PiのIPアドレス]:8080

※IPアドレス部はifconfigで確認

ifconfig wlan0

環境設定

config/local_env.yml を作成して環境情報を設定します。

VIDEO_STREAM_URL: 'http://[Raspbery PiのIPアドレス]'
VIDEO_STREAM_PORT: '8080'

config/application.rb を修正し、loacl_env.ymlファイルを環境情報に設定するよう修正します。

require_relative "boot"

require "rails/all"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Myapp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.1

    # Configuration for the application, engines, and railties goes here.
    #
    # These settings can be overridden in specific environments using the files
    # in config/environments, which are processed later.
    #
    # config.time_zone = "Central Time (US & Canada)"
    # config.eager_load_paths << Rails.root.join("extras")
    # ↓追加
    config.before_configuration do
      env_file = File.join(Rails.root, 'config', 'local_env.yml')
      YAML.load(File.open(env_file)).each do |key, value|
        ENV[key.to_s] = value
      end if File.exists?(env_file)
    end
    # ↑追加
  end
end

ラジコン画面修正

app/views/top/show.html.erb を修正して、カメラストリーミング画面を追加します。

<%= javascript_pack_tag 'top/mortor', 'data-turbolinks-track': 'reload' %>
<h1>RadioControll</h1>

<!--↓追加 -->
<!--環境設定情報のURLとポート -->
<img src="<%="#{ENV['VIDEO_STREAM_URL']}:#{ENV['VIDEO_STREAM_PORT']}/?action=stream" %>" />
<!--↑追加 -->


<div class="controller-left">
  <div class="cross-layout">
    <button id="forward" class="position-top btn cross-key-btn"><span class="top-mark">▲</span></button>
    <button id="left" class="position-left btn cross-key-btn"><span class="left-mark">▲</span></button>
    <button id="breake" class="position-center btn cross-key-btn"><span class="center-mark">●</span></button>
    <button id="right" class="position-right btn cross-key-btn"><span class="right-mark">▲</span></button>
    <button id="back" class="position-bottom btn cross-key-btn"><span class="bottom-mark">▲</span></button>
  </div>
</div>

※IPアドレス部はifconfigで確認

ifconfig wlan0

動作確認

動作確認をします。ターミナルを3つ立ち上げます。

処理を終了する場合はそれぞれCtrl + Cで終了します。

1つめ

cd ~/RadioControl
rbenv sudo bundle exec rails mortorcontrol_server:wake_up

2つめ

cd ~/RadioControl
bundle exec rails server -b 0.0.0.0

3つめ

cd ~/mjpg/mjpg-streamer/mjpg-streamer-experimental/
sudo bash start.sh

今操作しているPCでWebブラウザを起動して、<先ほど調べたIP>:3000 にアクセスします。ラジコン操作画面にカメラの映像が表示されていることを確認します。

回答ソースの例はこちら

※ラジコンAPI、ラジコン画面、カメラストリーム配信の対応が入った回答ソースです。