• スポンサードリンク

Surface/SurfaceTexture経由で受け取った映像を表示できるDrawableを作ってみた

Android

たぶんほとんどの人は使うことのないシリーズ第二弾(^o^)/

Surface/SurfaceTexture 経由で受け取った映像を表示できる Drawable を作ってみたのだ👀
ソースコードはGitHub上のリポジトリにあるぞよSurfaceDrawable

Androidのアプリでカメラ映像や再生した動画を表示するには SurfaceView/GLSurfaceView/TextureView/VideoView などを使うのが普通です。でも色んな大人の事情で Drawable で表示できたらいいなって思ったことはありませんか?さきちゃんはあります。
ということで、 Surface/SurfaceTexture 経由で受け取った映像を表示できる Drawable を作ってみました。名付けて✨✨✨ SurfaceDrawable✨✨✨

ところで Drawable へ何かを表示しようとすると draw(Canvas)メソッドが呼び出された時に Canvas に対して描画する必要があります。そして Canvas へ映像を描画するには Canvas#drawBitmap系メソッドを使うしかありません。つまりな Surface/SurfaceTexture を経由してテクスチャとして受け取った映像を Bitmap に変換してから Canvas へ描画することになります。つまり処理の流れとしては次のようになります。

  1. Drawable 内で Surface/SurfaceTexture 生成
  2. Surface/SurfaceTexture が映像を受け取ったことを通知してもらえるように OnFrameAvailableListenerをセット
  3. カメラ等から Surface/SurfaceTexture 経由で映像を受け取ることができるように設定(これは Drawable 外での処理)
  4. Surface/SurfaceTexture が映像受け取った時に SurfaceTexture#updateTexImage/#getTransformMatrixを呼び出す
  5. どげんかして Bitmap に映像を読み込む
  6. Drawable#draw(Canvas)が呼ばれた時に映像を読み込んだBitmapを Canvas#drawBitmap 系メソッドで描画する

簡単ですね、1-2時間もあれば実装できるでしょう。
ということおしまい…じゃないよ💦

実装する自体はそうたいしたことはないものの、それぞれを実装するにはいぃっぱいの予備知識が必要なうえに、実際に自分で最初から作ってみればわかるのですが、意外とハマる部分があるのです。例えば、「 Drawable 内で Surface/SurfaceTexture 生成」と簡単に書いていますが、好き勝手にどこでも Surface/SurfaceTexture を生成できるわけではありませんし、「どげんかして Bitmap に映像を読み込む」といっても下調べせずには自力で実装できない人も多いでしょう。

1.Drawable内で Surface/SurfaceTexture 生成する

SurfaceTexture が生成できれば Surface(SurfaceTexture)コンストラクタを使って簡単に Surface を生成することができます。でも SurfaceTexture を生成するには…SurfaceTexture @ Android DevelopersPublic constructorsを見れば分かる通りtexNameというのが必要です。texNameってなんぞやねんというとOpenGL|ESでのテクスチャ名/テクスチャハンドルです。つまり SurfaceTexture を生成するにはOpenGL|ESの処理を実行できる状態でないとだめということになります。OpenGL|ESの処理を実行できる状態というのはGLコンテキストが存在するスレッド上で実行すること…スレッド上でGLコンテキストがコンテキストを生成するには…あれれ~💫

OpenGL|ESの処理を実行できるようにする

専門用語を専門用語で説明するというドツボな状態に💦面倒くさいので詳細は各自でグルグルしてもらうとして、おおよその処理を書くと次のようになります。

  • ワーカースレッドを実装する
  • ワーカースレッド上でEGLを使ってEGLコンテキストを生成する
  • EGLコンテキストを使ってGLコンテキストを生成する
  • OpenGL|ES関係の処理はこのワーカースレッド上で実行する
  • 必要がなくなったらGLコンテキスト・EGLコンテキストを破棄する

ちなみに、 GLSurfaceView の場合はここらの面倒な処理をあらかじめ実行して必要なタイミングでコールバックしてくれるので楽ちんだったのですが Drawable 内では GLSurfaceView は使えませんので自前で実装する必要があります。

ということで SurfaceDrawableの該当コードを載せましょう(^o^)/

あれっ!? EglTaskってでてきちゃった💦自分で作ってみればわかるけどここらへんの処理を毎回フレームワークのAPIを叩いて作るのは面倒くさいのであらかじめオレオレヘルパークラス/メソッド作っておくのが常識なのです。まじめに書くとそれだけでシリーズ記事になってしまうので、細かいことをは気にしないでおこう🎶
先の EglTaskGLSurfaceViewで実装されているEGL/GLコンテキストの生成・破棄やワーカースレッド上での実行関係の処理と類似の処理を行うためのヘルパークラスなのです。どうしても気になる人は自分でグルグルするか、ソースコードを見ておくれ、GitHubのリポジトリlibcommon

Surface/Surfacetextureを生成する

気を取り直してSurface/Surfacetextureを生成する部分はこんな感じ、あいかわらずヘルパークラスの呼び出しばかり…
ここで大事なのは次の2つ

  • SurfaceTexture へ引き渡すテクスチャは GL_TEXTURE_EXTERNAL_OES が必須で普通の GL_TEXTURE_2D テクスチャは使用不可
  • Android4.1以降なら SurfaceTexture#setDefaultBufferSize を呼び出してテクスチャバッファサイズを設定しておく

この2つすごく大事、 SurfaceTexture を自前で生成するときには絶対に忘れてはいけない。これはテストに出…ないけど忘れると映像も出なくなるから😁

どげんかしてBitmapに映像を読み込む

2, 3, 4は簡単だから省略してどげんかして SurfaceTexture を使ってテクスチャとして受け取った映像を Bitmapに読み込む方法を書いてみよう。
まず必要なのは、読み込み先の Bitmapオブジェクトでし。

としてあらかじめ生成しておきます。 BitmapARGB_8888 を指定して生成してください(より正確にはEGL初期化時にEGLConfigで選択したピクセルフォーマット)。またテクスチャからの映像読み込み& Bitmap の更新に使用するダイレクト ByteBuffer も同時に生成しておきます(ちなみに SurfaceDrawable 内ではバイトアクセスしかしないのバイトオーダーは気にしなくていいぞい)。

ここで大事なのは映像更新のたびに Bitmapを生成しちゃだめということです。これは「可能な限りループ中や繰り返し呼ばれる箇所でオブジェクトの生成やメモリーの確保・破棄を行わない」というプログラマーとしての常識です。 SurfaceDrawable ではコンストラクタに映像サイズを引き渡しており以降映像サイズを変更することがないのでコンストラクタで Bitmapを生成しています。

ここでテクスチャから映像をCPU側のメモリー(Java/Kotlinだとダイレクト ByteBuffer )へ読み込むことができればあとは、 Bitmap#copyPixelsFromBuffer を使ってBitmapを更新できるのですが、残念ながら GL_TEXTURE_EXTERNAL_OESなテクスチャを直接読み込む方法はありません。

OpenGLであれば glGetTexImageというその名もずばりな関数があるのですが、残念ながらAndroidで使用できるOpenGL|ESにはありません。無いものは仕方がないので代わりに glReadPixelsを使うことになるのですが… glReadPixels はレンダリングバッファからしか読み込めないのです。つまり glReadPixelsを呼ぶ前にテクスチャをレンダリングバッファへ書き込む(描画する)必要があります。

ということで Bitmap への読み込み部分です。

Androidの場合はGLコンテキストを有効にするには有効な EGLSurface が必須なので、GLコンテキスト保持用の EGLSurface をオフスクリーンとみなしてテクスチャを描画してそれを glReadPixelsで読み取るようにしています。

テクスチャの読み込み処理はEGL/GLコンテキストを保持しているワーカースレッド上での処理を行う必要があります。一方、 Drawable へ表示するには draw(Canvas)Bitmap を表示する必要があります。ですので Drawable 自体へ更新要求するためにBitmapを更新した後 Drawable#invalidateSelf を呼び出します。あとは draw(Canvas)CanvasdrawBitmapを呼び出すだけですが、テクスチャで受け取った映像で Bitmap を更新する処理と draw(canvas) は違うスレッドで実行されているので排他処理を忘れてはいけませんよ。

今回は glReadPixelsを同期的に呼び出しているのでちょっと余分に時間がかかっています。もし glReadPixels呼び出しがパフォーマンス上ボトルネックになる場合でOpenGLES3.xが使用可能な環境であれば PBOglMapBufferRangeglUnmapBuffer を使って glReadPixelsを非同期的に呼び出すようにするとパフォーマンスが向上するかもしれません。

ちなみに Surface/SurfaceTextue を使ってテクスチャとして映像を受け取る代わりにダイレクト ByteBuffer として映像を受け取るようにすると Surface/SurfaceTexture の生成関係や Bitmap への映像読み込み処理がかなり省略できるの簡単になります。が今回は作っていません。

パフォーマンス

どうしても映像のコピーが増えてしまう& Canvas 経由での描画ということでパフォーマンスが悪いかもと危惧していたのですが、カメラ側を60fpsで映像取得できるように設定して実測すると約60fps@1280×720 on Moto g6(plus)ということで最近の端末上で実行するのであればまぁ気にしなくていいかなぁと思います🌴

でもなんか射影行列がおかしいのか端末を傾けたりすると映像が歪むんだよなぁ…そのうちなんとかしよう、たぶん😅

ということでおしまい
(^^)/~~~

«

  • スポンサードリンク

コメントを残す

%d人のブロガーが「いいね」をつけました。