Livebook 0.8.1 でカメラ撮影が簡単にできる #Elixir

はじめに

2023/01/19 に Livebook の 0.8.1 がリリースされました

追加機能の一つに、カメラからの画像取得があるので紹介します

Livebook 公式はこちら

セットアップ

Livebook で Kino と StbImage （画像表示用）をインストールします

表示用のモジュールは他のもの（evisionなど）でもOKです

Mix.install([
  {:kino, "~> 0.8"},
  {:stb_image, "~> 0.6"}
])

画像入力の作成

画像入力を作成します

image_input = Kino.Input.image("CAMERA")

Open camera のボタンが表示されます

注意点

Chrome で http://0.0.0.0:8080 など、ローカルで Livebook を開いている場合、 Open camera のボタンをクリックしても何も動きません

ブラウザのコンソールログを見ると、以下のようなエラーが出ています

Uncaught TypeError: Cannot read properties of undefined (reading 'getUserMedia')
    at Xe.renderCameraList (app.js:2:3588375)
    at HTMLButtonElement.<anonymous> (app.js:2:3586544)

Chrome は HTTP 通信時にカメラ入力を許さないようになっています

なので、 ngrok を使ってローカルの Livebook と HTTPS 通信します

ngrok の使い方については以下 @mininobu さんの記事を参照してください

ngrok を実行して、下に表示される HTTPS の URL を開き、 Livebook の認証トークン（Livebook 起動時に表示されている [Livebook] Application running at http://0.0.0.0:8080/?token=<ここの値>）を入力してください

当然、上の HTTP の方にアクセスしてもカメラは使えません

$ ngrok http 8080
...
Forwarding                    http://xxxx-xxx-xxx-xxx-xxx.ngrok.io -> http://localhost:8080
Forwarding                    https://xxxx-xxx-xxx-xxx-xxx.ngrok.io -> http://localhost:8080

この状態であれば先に進めます

カメラの許可

Open camera ボタンをクリックすると、ブラウザの右上にカメラの使用許可を求めるダイアログが表示されます（ブラウザによって挙動は異なります）

「許可する」や「Allow」などのボタンをクリックしてください

2回目以降はダイアログは表示されません

カメラ撮影

カメラの選択肢が表示されるので、使いたいカメラを選択します

そうするとカメラ映像が表示され、ボタンが Take photo と Cancel になります

Take photo をクリックすると、そのときの映像が静止画になります

画像の表示

Kino.Input.read() で画像を読み込みます

StbImage の場合は以下のようにして画像を表示します

image_input
|> Kino.Input.read()
|> then(&StbImage.new(&1.data, {&1.height, &1.width, 3}))

まとめ

簡単にカメラ映像を使えるようになったので、色々なことに応用できそうですね