8
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Raspberry piに接続したWebカメラの映像をiOSのアプリで表示させる

Last updated at Posted at 2018-03-07

同じLANに接続されたRaspberry PiおよびiOSデバイスでWebカメラの映像をiPadで
表示するものです.
監視カメラの映像をiPadで閲覧するといったことに有用であると考えます.

#使用機器
1.RaspberryPi 3
2.Webカメラ Logicool c270

#使用ソフト
1.mjpg-streamer(動画ストリーミングソフトウェア)
2.Xcode(iPadアプリ開発)

#インストール手順

mjpg-steamerをインストールする

###最新のパッケージを取得

sudo  apt-get update

###subversion,libjpeg-dev,imagemagickをインストール

sudo apt-get install subversion libjpeg-dev imagemagick

###ソースファイルの取得

svn co https://svn.code.sf.net/p/mjpg-streamer/code/mjpg-streamer mjpg-streamer

###make

cd mjpg-streamer
make

#動画ストリーミングソフトウェアの起動

sudo ./mjpg_streamer -i "./input_uvc.so -f 10 -r 320x240 -d /dev/video0 -y -n" -o "./output_http.so -w ./www -p 8080"

#iPadアプリ開発

##View Controller にWebViewを配置する
図1.png
##ViewController.swiftにControlキーを押しながら配置したWebviewをドラック&ドロップ
図2.png
##以下のようにコーディングする

ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()
        loadCamView()
    }

    func loadCamView(){
        var url: String = "http://[Raspberry pi のアドレス]:8081/javascript_simple.html"
        let requestURL = NSURL(string: url)
        let req = NSURLRequest(URL: requestURL!)

        MonitorWebView.loadRequest(req)
    }

##http通信を許可する

こちらのサイトを参考にしてください.
【swift】http通信を許可する方法
http://fukatsu.tech/permit-http-ios

##ビルドする
図3.png

#参考文献
WEBカメラで動画ストリーミング
http://www.hiramine.com/physicalcomputing/raspberrypi/webcamstreaming.html
Raspberry piとApacheとWebカメラで外部から見られる監視カメラを作った話。
http://qiita.com/CST_negi/items/a329cc98fb1aa33f33d3
Raspberry Piでwebカメラの映像を配信する方法(MJPG-streamer編)
https://www.smartllc.jp/blog/20150222-how-to-stream-webcam-with-mjpgstreamer-on-raspberrypi/

8
14
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
8
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?