YUV⇒RGB変換(Android編)

Hyper-Vによる仮想化技術です。
有効化する場合は以下のようにします

1. “Windowsの機能の有効化または無効化”ダイアログボックスを開く
2. “Hyper-V”をチェック
3. “Windows ハイパーバイザープラットフォーム”をチェック

詳細についてはAndroid Emulator のハードウェア アクセラレーションを設定するを参照して下さい。

今回もYUVファイルとしてCIFサイズの”akiyo_cif.yuv”を使用しますので、最初に画像サイズを指定しておきます。
以下のようにしてリソースに追加します。

1. 左のProjectツリーペインの”app”を右クリック
2. メニューから”New”→“XML”→“Values XML File”を選択
3. リソースフォルダにXMLファイルを作成するウィンドウが表示される
   
4. “Values File Name”に”dimens”と入力
5. “Finish”ボタンをクリック
6. “app”→“res”→“values”→“dimens.xml”ファイルが作成される

なお、画像サイズ等の寸法を指定するリソースは”dimens.xml”に記載する事が推奨されています。
詳細はアプリのリソースの概要を参照してください。

CIFサイズの幅と高さを指定するため、“dimens.xml”は以下のようにします。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="width">352dp</dimen>
    <dimen name="height">288dp</dimen>
</resources>
      

なお、“dimens.xml”内のリソースは必ず単位を付加します。
付加できる単位は、現状、以下の6つがサポートされています。

詳細はその他のリソース→ディメンションを参照してください。

AndroidではUI等に使用するテキストもリソースとして定義します。

左のProjectツリーペインの”app”→“res”→“values”→“strings.xml”ファイルを選択、オープンします。
以下のように”File…“ボタンと”Play”ボタンに表示するテキストを指定します。

<resources>
    <string name="app_name">ShowYUVonAndroid</string>
    <string name="play_button_text">Play</string>
    <string name="file_button_text">File...</string>
</resources>
      

レイアウトを修正する場合には、先ず、左のProjectツリーペインから”app”→“res”→“layout”→“activity_main.xml”ファイルを選択、オープンします。

最初は"Layout Editor"が表示されるはずです。
“Layout Editor"の使い方についてはLayout Editor を使用して UI を作成する等を参照してください。

今回は右上の”View Mode”から”Code”モードを選択し、xmlコードを直接編集します。

最初はConstraintLayout内にTextViewとして”Hello World!“が表示されるようになっています。
今回は先ず、LinearLayout内にViewとButtonを配置します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view"
        android:layout_width="@dimen/width"
        android:layout_height="@dimen/height"
        android:layout_gravity="center_horizontal"
        android:layout_margin="16dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Space
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/play_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:enabled="false"
            android:text="@string/play_button_text" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/file_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="@string/file_button_text" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>
      

因みにViewは仮置きです。
後で色々と変更します。

ボタンを配置しましたので、ボタンクリックに対する処理を実装するため、MainActivityクラスにView.OnClickListenerインターフェースを追加します。
それに伴い、onClickメソッドを追加します。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.play_button).setOnClickListener(this);
        findViewById(R.id.file_button).setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {

    }
}
      

なおonCreateメソッド内でボタンに対してsetOnClickListenerメソッドでリスナーを設定しておきます。

この状態で”Shift+F10”でアプリケーションを実行すると、デフォルトで作成されているデバイスエミュレーターが起動し以下のように表示されます。

この時点で実行し”File…“ボタンをクリックすると画面が”ファイル選択のActivity”に切り替わります。

“akiyo_cif.yuv”ファイルはこの時点で未だAVDに送られていません。
ファイルをAVDに送る一番簡単な方法は、AVDの上にファイルをドラッグアンドドロップする事です。

ファイル自体は”ダウンロード”以下に配置されますので、左上”≡“をクリックして”ダウンロード”を選択します。
“akiyo_cif.yuv”ファイルがあるはずですのでクリックします。

 ⇒

ファイル選択後は元のActivityに戻り、下部ToastにURIが表示されます。

ちなみに、もう少し柔軟にADV上のファイルを出し入れしたい場合には、メニューから”View”→“Tool Windows”→“Device File Explorer”を選択します。
“Device File Explorer”ペインが表示されますので、ADV上のファイルを操作する事ができます。

ShowYUVImageクラスが作成されますので、Contextクラスを引数とするコンストラクタを追加します。
インスタンス変数としては、画像サイズやファイルストリーム等を記載します。
なお、YUV⇒RGB変換も行いますので、“Y”, “U”, “V”, “ARGB”其々のデータを保持するインスタンス変数も追加しておきます。

public class ShowYUVImage {

    private int width;
    private int height;
    private int ySize;
    private int uvSize;

    private byte[] y;
    private byte[] u;
    private byte[] v;
    private int[] argb;

    private InputStream yuvFile;

    public ShowYUVImage(Context context) {
        int scale = context.getResources().getDisplayMetrics().densityDpi;
        int w = context.getResources().getDimensionPixelSize(R.dimen.width);
        int h = context.getResources().getDimensionPixelSize(R.dimen.height);
        width = w * 160 / scale;
        height = h * 160 / scale;
        ySize = width * height;
        uvSize = (width / 2) * (height / 2);
        y = new byte[ySize];
        u = new byte[uvSize];
        v = new byte[uvSize];
        argb = new int[ySize];
    }
}
      

なお、コンストラクタの最初の5行目、“height”の値を計算するまでは、“dp”で指定した画面サイズを”pixel”単位に変換する為の操作です。
これにより、“width”と”height”はCIFサイズ（352 x 288）にセットされます。

YUV⇒RGB変換用クラス（ShowYUVImage）ではファイルからYUVデータを読み込みます。
そのため、ファイルのURIを受け取ってオープンし、YUVデータを読み込むメソッドが必要となります。

まず、ファイルのURIを受け取ってオープンするメソッドとして以下を追加します。

private boolean available = false;

public boolean isAvailable() {
    return available;
}

public void setYUVFileURL(ContentResolver contentResolver, Uri uri) {
    try {
        yuvFile = contentResolver.openInputStream(uri);
        available = true;
        readYUV();    // YUVデータを読み込むメソッド
    }
    catch (Exception e) {
        Log.e("SetFile", e.toString());
        available = false;
    }
}
      

URIを指定してファイルをオープンするためには、ContentResolverクラスのopenInputStreamメソッドを使用します。
状況により例外が発生した場合にはLogCatに内容を出力してリターンします。

なお、インスタンス変数”available”はYUVデータが正常に読み込まれたことを示すフラグです。
“available”にはゲッターを作成しておきます。

YUVファイルが正常にオープンできましたら、YUVデータを読み込んでおきます。

protected void readYUV() {
    if (available) {
        try {
            yuvFile.read(y);
            yuvFile.read(u);
            int size = yuvFile.read(v);
            if (size < uvSize) {
                available = false;
            }
        } catch (IOException e) {
            Log.e("ReadFile", e.toString());
            available = false;
        }
    }
}
      

なお、“V”データを読み込んだ際にデータが足りない、もしくは読み込めなかった場合には読み込み失敗としてフラグ（available）を"false"にセットします。

YUVファイルからデータを読み込むことができましたら、次はYUV⇒RGB変換です。
基本的に使用する計算式は今までと同じですので、YUV⇒RGB変換(JOGL編)と概ね同じコードを使用できます。

protected int clip(int n) {
    return (n <= 0) ? 0 : ((n >= 255) ? 255 : n);
}

protected void transYUV2RGB() {
    for (int h = 0; h < height; h++) {
        int y_pos = h * width;
        int uv_pos = (h / 2) * (width / 2);

        for (int w = 0; w < width; w++) {
            int yi = y[y_pos + w] & 0x0FF;
            int ui = u[uv_pos + (w / 2)] & 0x0FF;
            int vi = v[uv_pos + (w / 2)] & 0x0FF;

            double y16 = yi - 16.0;
            double u128 = ui - 128.0;
            double v128 = vi - 128.0;

            int r = (int) ((1.164 * y16) + (0.0 * u128) + (1.596 * v128));
            int g = (int) ((1.164 * y16) + (-0.392 * u128) + (-0.813 * v128));
            int b = (int) ((1.164 * y16) + (2.017 * u128) + (0.0 * v128));
            r = clip(r);
            g = clip(g);
            b = clip(b);
            argb[y_pos + w] = (0xFF << 24) | (r << 16) | (g << 8) | b;
        }
    }
}
      

画像データをViewクラスに描画するためにはBitmap形式の画像としてViewクラスに渡す必要があります。
なので、作成したARGB形式のデータをBitmap形式に変換して返すメソッドを追加しておきます。

public Bitmap getNextBitmap() {
    if (available) {
        transYUV2RGB();
        Bitmap bitmap = Bitmap.createBitmap(argb, width, height, Bitmap.Config.ARGB_8888);
        readYUV();
        return bitmap;
    }
    return null;
}
      

ARGB形式のデータからBitmap形式の画像を作成するためにはcreateBitmapクラスメソッドを使用します。
Bitmap形式の画像作成後は次のYUVデータを読み込んでおきます。

先ず、Viewのサブクラスを作成します。

1. 左のprojectツリーペインの”app”→“java”→“com.example.showyuvonandroid”を右クリック
2. メニューから”New”→“Java Class”を選択
3. “New Java Class”ウィンドウが表示される
   
4. クラス名として”ShowYUVView”を入力、“Class”を選択しリターン

新たに”ShowYUVView.java”ファイルが作成されますので、ShowYUVViewクラスがViewクラスを継承するように、クラス名の後にextends Viewを追加しておきます。

ShowYUVViewクラスは”activity_main.xml”ファイル内で”View”タグを置き換えます。
そのため、Viewクラスが実装しているコンストラクタは全て実装する事が推奨されます。

なお、ShowYUVViewクラスは描画のためにShowYUVImageクラスのインスタンスを必要としますので、インスタンス変数としてコンストラクタ内で作成しておきます。

public class ShowYUVView extends View {

    private ShowYUVImage showYUVImage;

    public ShowYUVView(Context context) {
        super(context);
        showYUVImage = new ShowYUVImage(context);
    }

    public ShowYUVView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        showYUVImage = new ShowYUVImage(context);
    }

    public ShowYUVView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        showYUVImage = new ShowYUVImage(context);
    }

    public ShowYUVView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        showYUVImage = new ShowYUVImage(context);
    }
}
      

UIスレッドでShowYUVViewクラスのinvalidateメソッドがコールされると、onDrawメソッドがコールされます。
Viewクラスのサブクラスで描画を行うためには、ViewクラスのonDrawメソッドをオーバーライドします。

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Bitmap bmp = showYUVImage.getNextBitmap();
    if (bmp != null) {
        Rect dst = new Rect(0, 0, canvas.getWidth() - 1, canvas.getHeight() - 1);
        canvas.drawBitmap(bmp, null, dst, null);
    }
    else {
        canvas.drawARGB(0xFF, 0x00, 0x00, 0xFF);
    }
}
      

最初にViewクラスのonDrawメソッドをコールしておきます。
次にBitmap形式の画像を取得し、CanvasクラスのdrawBitmapメソッドで描画を行います。
なお、Bitmap形式の画像の取得に失敗した場合には、drawARGBメソッドで画面全体を赤色に塗り潰すようにしています。

因みに描画領域を示す”dst”を作成する際にRectクラスのコンストラクタの第3引数と第4引数は幅と高さではありません。
右と下の画素の座標を指定する事になっていますので、描画領域全体を指定するには、幅および高さから1を引く必要があります。

ShowYUVImageクラスのインスタンスはShowYUVViewで保持するようにしましたので、ファイルのURIのセットやYUVデータが準備できているかの問い合わせはShowYUVViewクラスを通して行う必要があります。
そのためのメソッドを追加しておきます。

    public void setYUVFileURL(ContentResolver contentResolver, Uri uri) {
        showYUVImage.setYUVFileURL(contentResolver, uri);
    }

    public boolean isAvailable() {
        return showYUVImage.isAvailable();
    }
      

“activity_main.xml”をオープンし、コードを表示します。
以下のように”View”タグ部分を”com.example.showyuvonandroid.ShowYUVView”に変更します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.example.showyuvonandroid.ShowYUVView
        android:id="@+id/view"
        android:layout_width="@dimen/width"
        android:layout_height="@dimen/height"
        android:layout_gravity="center_horizontal"
        android:layout_margin="16dp" />

    <LinearLayout
        :
        :
    </LinearLayout>

</LinearLayout>
      

因みにレイアウト用のXML中で独自に作成したクラスをタグの要素名として指定する場合には、完全修飾クラス名を指定する必要があります。

ファイル名のセットとShowYUVViewへの描画を行うため、“MainActivity.java”を修正します。
MainActivityのインスタンス変数”filePickerStartForResult”中のコールバックメソッドonActivityで以前にToastでURIを表示している部分にコードを追加します。

ActivityResultLauncher<Intent> filePickerStartForResult = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(),
        new ActivityResultCallback<ActivityResult>() {
            @Override
            public void onActivityResult(ActivityResult result) {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    Uri uri = intent.getData();
                    Toast.makeText(getApplicationContext(), uri.toString(), Toast.LENGTH_SHORT).show();
                    ShowYUVView view = findViewById(R.id.view);    // 以下追加
                    view.setYUVFileURL(getContentResolver(), uri);
                    view.invalidate();
                    findViewById(R.id.play_button).setEnabled(true);
                }
            }
        });
      

この時点で実行し”File…“ボタンをクリックして”akiyo_cif.yuv”ファイルを選択すると、以下のように表示されるはずです。

なお次で動画再生をするため、最後の部分で”Play”ボタンを有効化しておきます。

タイマーにより定期的に実行されるタスクを記述するため、先ず、TimerTaskクラスを継承するクラスを作成します。
TimerTaskのサブクラスでは、定期的に実行されるコードはrunメソッド内に記述します。
とりあえずサブクラスの名前をShowYUVTimerTaskとし、MainActivityクラスの内部クラスとして実装しておきます。

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Handler handler = new Handler();
    Timer timer;
    TimerTask timerTask;
        :
        :
    protected class ShowYUVTimerTask extends TimerTask {

        @Override
        public void run() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    ShowYUVView view = findViewById(R.id.view);
                    if (view.isAvailable()) {
                        findViewById(R.id.view).invalidate();
                    }
                    else {
                        timer.cancel();
                        findViewById(R.id.file_button).setEnabled(true);
                    }
                }
            });
        }
    }
}
      

TimerTaskのrunメソッドは基本的にUIスレッドとは別のスレッドでコールされます。
ですので、そのままViewでの描画等を行ってしまいますと色々と不具合を生じます。
それを避けるため、Handlerでメッセージキューにコードをポストし、UIスレッドで実行させるようにします。

“Play”ボタンをクリックした時にタイマーを開始するコードを追加します。
MainActivityクラスのonClickメソッドを以下のように修正します。

public void onClick(View view) {
    if (view.getId() == R.id.file_button) {
        Intent intent = new Intent(Intent.ACTION_OPEN_DOCUMENT);
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("application/octet-stream");
        filePickerStartForResult.launch(intent);
    }
    // 以下を追加
    else if (view.getId() == R.id.play_button) {
        timerTask = new ShowYUVTimerTask();
        timer = new Timer(true);
        long period = getResources().getInteger(R.integer.period);
        timer.schedule(timerTask, period, period);
        view.setEnabled(false);
        findViewById(R.id.file_button).setEnabled(false);
    }
}
      

因みに”R.integer.period”はリソースとして定義します。

タイマーの間隔は66msecですが、リソースとして指定しておきます。

1. 左のProjectツリーペインの”app”を右クリック
2. メニューから”New”→“XML”→“Values XML File”を選択
3. リソースフォルダにXMLファイルを作成するウィンドウが表示される
   
4. “Values File Name”に”constants”と入力
5. “Finish”ボタンをクリック
6. “app”→“res”→“values”→“constants.xml”ファイルが作成される

なお、整数の定数等を指定するリソースは”constants.xml”に記載する事が決まっている訳ではないようで、“integers.xml”等でもOKです。

タイマー間隔指定するため、“constants.xml”は以下のようにします。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="period">66</integer>
</resources>
      

タグの要素名は”integer”です。

この時点で実行し”File…“ボタンをクリックして”akiyo_cif.yuv”を選択、“Play”ボタンをクリックすると動画が表示されます。

ここまでのコードはここからダウンロードできます。