OpenCVで動画表示; グレイスケール & 2値化映像を表示する

引き続きOpenCVの練習。

先週までに、画像を取得して変換・表示してみた。

・普通の画像 ・グレイスケール( Gray-Scale )に変換した画像 ・2値化( binary )した画像

3種類とも、表示できる。 そりゃそうだ。

画像オブジェクトに対して操作した結果を、別の画像オブジェクトに格納する。 わかりやすくて助かる。

今回は、画像ではなくwebカメラで動画表示。 カメラが捉えている映像を、画面上に表示する。

サンプルコードを見ると、なんと「画像を撮影する」を無限ループしている!

【 Python OpenCV 】カメラで撮影した動画を、リアルタイムで表示させる – Windows, Mac, Linux 対応 –|Zero-Cheese

そんなんでいいのか、、 当たり前と言えば当たり前か、、 「ぱらぱらマンガ」だもんな。

つまり、こんなコード。

while(cam.isOpened()):
    ret, frame = cam.read()
    cv2.imshow('cam', frame)

わかりやすいが、「こんなんでいいのか?」となる。 それは、カメラ、映像の扱いが直観的なレベルでわかっていない証拠。

まぁ、練習だ。数をこなそう。

当然、「普通の画像」による動画表示は成功したので、 実験としては、「組み合わせ」に挑戦。

・グレイスケールによる動画表示 ・バイナリ(2値化)による動画表示

もちろん成功するわけだが、このステップを踏むのが大事。 「Aができた」「Bができた」ならば、 「AしてBもできる?」と、 自分で考えて、試してみる(そして成功する)。

「成功するはず」「成功するに決まってる」くらいの内容が 精神的にちょうど良い。

負担が少なく、面白がって、余裕を持って取り組めるからだ。

学ぶには(=身につけるには = 変わっていくには)この「余裕」を作るのがコツ。

import cv2

cam = cv2.VideoCapture(1)            # デスクトップPC & USBカメラは、(1)で使えた

while(cam.isOpened()):            # カメラが使える限り、ループ
    ret, frame = cam.read()            # 画像を取得する
    frame_gray = cv2.cvtColor(frame, cv2.COLOR_RGB2GRAY)            # グレイスケールに変換する
    ret, frame_binary = cv2.threshold(frame_gray, 177, 255, cv2.THRESH_BINARY)            # 2値化する
    cv2.imshow('cam', frame_binary)            # 画像を表示する; ループするから動画になる; ぱらぱらマンガ

    if cv2.waitKey(1) & 0xFF == ord('q'):            # キー入力を16進数にして、'q'と等しければ( = 'q'と入力されたら)ループ終了
        break

cam.release()
cv2.destroyAllWindows()

2値化した動画. 1回くらいは許せる.

というわけで、とりあえず、長寿と繁栄を。

サンプルcodeとシミュレータで、スマホアプリの開発スタート

iPhoneアプリAndroidアプリを同時に開発できる、 という楽しそうな技術の実験スタート。

Dart言語によるFlutterフレームワークで、1ソース2アプリの 開発に挑戦。

のんびりやるなら、まずIDEに慣れて、Dart言語を基礎から練習し、 スマホアプリに必要なUIやカメラなどのデバイス操作を学んで、 アプリを開発するところ。

現実的には時間がないので、とりあえずサンプルcodeを走らせ、 実機でビルド・動作確認は今度にしてシミュレータで実行してみる。

たったそれだけでも、本やweb記事に書いてあるのとは 細かい違いがあって、対応しないと走らない。(あたりまえだ)

中身がわからないながらも、「原理的にこうなってるはず」という 認識のもとで、解釈・修正しながら操作して、納得していく。

「たったそれだけ」の作業にとどめたので、困ることはない。 しかしまだ納得していないのは、IDE

ふだんcodeを書くのにテキストエディタを使うことにしており、 余計な設定が増えるIDEは好かんのだが、今回は仕方ないかなぁ、 と諦め姿勢。

そうは言っても、参考にするページによって、Android Studioを使ったり、 Visual Studio Codeを使っていたりするのは、困る。

どっちでも良いなら、多少面倒でも、テキストエディタの方が 何が起きているか把握しやすい。

Android Studioでも、「New Flutter Project」などとするし、 Visual Studio Codeでも、そんなだったような。

そもそもIDEはcodeを書くのを便利にしてくれるツールなのだから、 面倒でもよければ(あるいは自分で便利にできるなら)IDE無しで 問題はないはず。

とりあえずサンプルの「クリックした回数を表示するカウンタ」アプリで、 その辺りを整理しよう。

どんなことが起きているか把握していれば、面倒を避けてIDEを使っていても 自分が何をしているか具体的に想像できて落ち着く。

そうそう、「わかっている」ことは「落ち着く」こと。 理解が及ばず認識が「ぼんやり」していると、「不安」だったり 「無駄にくたびれ」るのが面倒だ。

余計なものをなくして、シンプルな理解と操作を目指しつつ 学習を進めよう。 とりあえず。

Udemy、探しているとちょうどセールになったりして

定価が1万円、2万円を超えるコンテンツが結構あるけれど、 いいタイミングでセールになったりして、95%OFFとかで、 2000円くらいになるから困る。

Flutterで、Firebaseを使って、ML KitでAIアプリを作るという 都合のいいコンテンツが、2400円。

他にもあったが、勢いで買っても見きれないので、 とりあえず1つだけ購入。

www.udemy.com

講師は理学博士だけあって、頭の良さそうな、 しかし、頭がいいものだから、あとちょっとのところで ど素人が引っ掛かって困りそうな、手が止まりそうなところもあり。

まぁインストラクターじゃないから、この構成と ゆっくりしたテンポと、十分はっきりした声で、 コンテンツとしては上等。

まずは手を動かして、叩き込んでいくこと。 とりあえず。

iOSアプリを作るには、macで、デバイスを有線接続するのがわかりやすいこと

iOSアプリを作る、のは楽しそうだし、やってみたいことでもある。 しかし、iPhone持ってるから、ではなく、「mac持ってるから」というのが 自然だろうと思っていた。

しかし、まー無謀というか考えが浅いのか、 見通しが甘いというか見通してないのか、 「iPhone持ってるからiOSアプリ作る」みたいな 展開があって、もーよう言わんわ。

理論上は、クロス開発ということで、 電子工作するときのマイコンプログラミングと 同じようなもん、ではある。

パソコンでコードを書き、実行ファイルを生成して、 マイコンのROMに書き込んで実行。

しかし、マイコンiPhoneでは、規模が何桁も違うと思うが 想像が及ばないんだろうなぁ。

可能だとしても、実機を接続してビルドした方が、 不安材料が少ないと思うんだが。

まぁ実際の問題は、、USBハブかLightning-TypeCケーブルが 無かったため実機を接続できなかっただけ、なんだけれども。

物事はシンプルに。 そして「スムーズは速い」を 実践することだろうね。

とりあえず。

flutterで、ALOHA!(一般的には、"Hello, world!")

iOSアプリにせよ、Androidにせよ、 とりあえず環境を構築して、最初のプログラムを動作させてみる。

しかし、開発記事を色々見ると、細かいことがあれこれ違って 結構面倒。

最初に困るのは、「プロジェクトを作りましょう」みたいなところ。 "Visual Studio Code" を使うのか、"Android Studio" を使うのか。

記事によって、それぞれ「使え」と書いてある。 いいけど、多分どちらでもできるんだろうけど、 言ってしまえば、テキストエディタでもできるんだろうけど、 わかりにくい。

誰かがレビューして、わかりやすく使いやすい記事に、 なったらいいのに。

ということで、わかりやすいサイトを選んで、 シンプルなコードを選んで、 実行。

docs.flutter.dev

伝統的な「Hello, world!」をやってみる。

classの形でアプリを作っていく。 JSON形式みたいに、表示する内容を書いていく。

なるほど。 まぁこうなるよね、という形の一つで、 納得感はある。

納得して、しっかり受け止めたところで、 少しずつ複雑なコードに進む。

そうすれば分かるし、 そうしないと全然理解できん。

しっかり分かるところを足場として、 上に構築していく。

最も簡単な、シンプルな基本から 順番に積み上げていくことを標準として 取り組む習慣がないと、まぁ新しいことは 学べない。

とりあえず。

flutterの開発環境を整える

iOS/androidアプリを開発するために、flutterを利用。 開発環境を整える。自宅のmac(macbookpro; intel

当然?ひょいとはできなかったので、メモ。

  1. flutter sdkをインストールする

https://docs.flutter.dev/get-started/install/macos

  1. 次に、Android Studioをインストールする

  2. flutter doctorを実行して環境を確認する  ここで、issue、3個か4個発生。上から片付ける。

  3. cmdline-tools component is missingエラー 無いものは入れるしかない。

https://zenn.dev/imasaka0909/articles/00ebfaf74f9cea

  1. Android license status unknown flutter doctor --android-licensesで複数(7個くらい)のライセンスに「同意」操作

  2. xcodeをインストール

  3. xcodeコマンドラインツールをインストール xcode-select --install

  4. しかしまだエラーが出るので、対応 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch

  5. cocoapodsをインストール brew install cocoapods  (もっと面倒な方法もどこかに書いてあったが、うまくいかず。結局これ←)

ここまで終えると、flutter doctor してもエラーはなく、さらりと "No issues found!" になる。

うまくいったところだけ書くと簡単だが、実際はweb記事一つでは片付かず。 なんでそうなるかなぁ。誰かが全部ちゃんと書けばいいだけのような気がするが。

なんにせよ、flutterを始める準備ができたっぽい。 実際のコードはまだ書いていないので、書いた段階でエラーに直面、もありうるが。

まぁ多分大丈夫だろう、と言うことで。 とりあえず。

vscodeをインストールする

自宅macに flutter 開発環境を作らねば。 しかしその前に、避けている vscode ( visual studio code )をインストールしよう。

IDEは好まないが、知らないわけにもいかないので、勢いで入れる。 (冷静に考えると、入れたくない気持ちに負けるので)

学生たち、かっこよくVSCodeでコードを書くのは良いが、 ライブラリを使ったり、フレームワークを使ったりすると 途端にコケる。

どんな仕組みで動いているか知らずに、IDEで楽ちんな思いを していると、まぁそうなる。

だから2年しかない学校では、テキストエディタCLIでやるのが良いと 常々言うておるのだが、安易に使うケースが多くて面倒。

憶えやすいURLのサイトからダウンロードして、インストール。

code.visualstudio.com

のんびりVSCodeであれこれ書いてから次にいきたいが、 時間が無いのでそうもいかない。

しかし今日はくたびれてそろそろ限界のため、 とりあえず起動確認まで。