たくさんの自由帳
Androidのお話
自作動画編集アプリ チュートリアル クロマキー合成編
投稿日 : | 0 日前
文字数(だいたい) : 10218
チュートリアル第二弾。
今回作る動画！
今回はスマホの画面があたかも透明に見える動画を作ります。特に難しくはなく、ほかのアプリにもクロマキー合成機能があればこれじゃなくても作れるはずです。
仕組み
クロマキー合成と呼ばれる技法？があります。BB素材のことです。
これは動画の上に動画を重ねる際に、上に重ねた動画の特定の色を透かすことで、重なっている下の動画を見えるようにする技術です。
これを転用し、スマホのホーム画面の色を特定の色で塗りつぶすことで、その色を動画編集で透かせて、あたかもスマホの画面が透明になっているかのように見せることができます！！
手順
大まかな手順です。
- クロマキー合成をするための動画を撮影する
- アプリを入れる
- プロジェクトを作る
- 動画を追加する
- クロマキー合成を適用して、色が透けるようにする
- 時間を調整
- ほぞん！
アプリを入れる
リンクです。
ソースコードからビルドしてもよいです、なかみはPlayStoreとおなじです。
クロマキー合成の動画を撮影する
2パターンあると思います。
1つ目が、スマホの壁紙と、スマホを撮影する背景を同じ色にして撮影する方法です。
これは小物を撮影する撮影スタジオとか、クロマキー合成の背景になりそうな壁があればできます。スマホの壁紙とスマホの背景の両方が透けるため、どの動画を下地においても適用できます。
デメリットは背景も同じ色にしないといけない点。
2つ目が、スマホなしの動画を撮影した後、単色の壁紙に設定したスマホを重ねて撮影する方法です。
これはスマホの壁紙を単色にするだけで済みます。デメリットは、背景はスマホあり+なしの動画を撮影する必要があります。また、透けるのはスマホの画面だけになるので、背景を変えたい場合は撮り直しが必要です。
プロジェクトを作る
アプリを起動して、新しいプロジェクトを作成します。適当な名前を付けて完了してください。
次に動画情報の編集が表示されます。ここで、動画を保存するときの縦横サイズを決めます。特になければは先ほど撮影した動画と同じサイズにします。
フルHDの場合は1920と1080を入力します。4Kの場合は3840と2160を入力します。
すいません、まともなUIを作ってないため自分で入力させています、すいませんん、また、縦動画のために縦横を入れ替える機能も作ってませんでした。
よって、縦動画の場合は↑の縦横の数値を入れ替えてください。優しくないUIですいません。
また、HDRかどうかは撮影した動画次第では設定が必要なのですが、後で設定できるようになっています。分かる場合は今設定してもよいです。
そして完了を押します。
間違えて閉じてしまった場合は、左上のメニューを押して動画情報の編集を選択すれば開くことが出来ます。
動画を追加する
縦画面、横画面の場合は下に表示されている追加ボタンを押して、動画を選びます。タブレット、折り畳みスマホの展開時は、右上のボタンからタイムラインへ追加を押して動画を選びます。追加したらボトムシートが表示されますがいったん閉じてよいです。
動画ピッカーが開くのでここでさっき撮影した動画を選びます。
もしスマホの壁紙とスマホを撮影する背景の色が同じで撮影した場合は、先述の通り重ねてる下の動画は好きな動画にできます。
一方、スマホの壁紙のみを単色にした場合は、下の動画に重ねる動画はスマホ抜きの動画を選ぶ必要があります。
まとめて追加する機能が現状ないため、一つ目の動画を追加したらもう一度追加ボタンを押して二つ目の動画を追加する必要があります。
追加する別の方法
ドラッグアンドドロップすることもできます。Google フォトとかなら写真・動画を長押しすると移動出来て、このアプリの下半分まで持ってきて離すと追加できます。ドラッグ中は下半分がピカピカします。
画面の説明
スマホの縦画面の場合は、上半分がプレビューと位置調整、下半分がタイムラインになります。
スマホが横画面の場合は、左半分がプレビューと位置調整、右半分がタイムラインになります。
そしてタブレット、折り畳みスマホ展開時は、左上がプレビューと位置調整、右上がメニュー兼追加になります。メニューが常に表示されるため、スマホ縦横画面にあった左上と中央下のメニューボタンは表示されません。
そして下半分を占めるタイムラインで構成されています。
詳しくは必要になったら！別に難しくはないハズ！
付録 プレビューもしくはタイムラインを大きく表示したい
もしiPhone DuoとかGalaxy Z Fold 8のような正方形に近い画面比率の場合、縦長/横長前提のレイアウトは使いにくい可能性があります。
そのため、タイムラインもしくはプレビュー（もしくはメニュー）の表示割合を調整する機能があります。パソコンみたいにドラッグ操作でそれぞれのUIの大きさを変えられる機能です。
タイムラインとプレビューの間にあるタイムラインメニューを押して、サイズ変更機能を有効にするを選びます。
これで、それぞれのUIの教会に何やら掴めそうな棒が表示されます。これをドラッグすることで、プレビューやタイムラインの表示割合を自由に変更できます。
タイムラインを操作する
先述の説明より、タイムラインを見てください。
動画を追加したので、追加した分だけ動画と音声が追加されていると思います。
タイムラインと聞いて、AviUtlとかゆっくりムービーメーカーを想像した皆様、それと全く同じものです、頑張ってそれっぽく作りました。
もう説明は不要そうですね。
そうでない方向け、
タイムラインは、動画に表示・再生したい動画、音声、画像、文字、エフェクトを配置する場所です。
これは上下左右のスクロールできます。
まず左右方向。これは時間です。
一番左が0秒になり、右に行くほど時間が進みます。上に時間が表示されるので、どの時間に表示したいかはここを見て配置します。
上下方向にもスクロールできます。これは、動画に同時に動画や音声、画像、文字、エフェクトを表示するためです。同じ時間の縦に並べる感じ。
ほかの動画編集アプリではPinP (ピクチャーインピクチャー)とか言われている機能は、ここでは縦方向に並べることと同義になります。
下方向につれて上に重ねて表示されます。PowerPoint的な言い方だと0が最背面、20が最前面になります。
動画の再生位置を変えたい場合は、タイムラインに表示されている動画をドラッグすればよいです。
また、動画のX/Y位置を変えたい、複製したい、削除したい場合は、その動画を押すことでコンテキストメニューが表示されます。
また、赤色の縦棒があります。これは今の再生位置で、これを動かすと、上か左のプレビューがその位置の動画のプレビューになります。
これとは別に青色の縦棒が出ていることかもしれません。これは動画を保存するときの時間になります。
ほかの動画編集アプリによっては一番最後の動画の時間に自動で設定されることがありますが、このアプリでは手動で設定する必要があります。後で説明します。
（つまりAviUtlを使ったことがあれば一度はやらかすであろう？、ダーク尺余りを引き起こす可能性を同じく抱えていることになります）
動画を間違えて追加した
タイムラインの動画をおすと、コンテキストメニューが表示され、削除を選ぶことで間違えて追加した動画を削除できます。
同様に音声も消しましょう。
タイムラインの上にある UI
タイムラインメニューから、複数選択モードに切り替えたり先述の通りサイズ変更を有効にできたりします。
今回はそこまで使わないので省略します。
タイムラインの右上にある虫メガネのアイコンを押すことで、タイムラインの拡大縮小が出来ます。 カーナビみたいですね。
虫メガネの隣が戻る・進むボタンです。
パソコンにもあると思いますがそれと同じです。一個戻すと、戻すのをやめるボタンです。
位置と時間を合わせる
位置がずれてます。タイムラインにある動画素材を長押しして、1番目と2番目の動画の位置と時間を合わせます。
音声も同様に動画に合わせます！
タイムラインの動画で、左の位置が同じになっていれば同時に表示されます。今回はクロマキー合成しかしないため、0秒地点にそろえています。
マグネット的な機能があるので、左の位置を同じにするのはそこまで難しくないはずです。
次は位置を合わせましょう。
タイムライン上の動画を押します。コンテキストメニューが表示されるので、値の編集を選びます。
すると、スマホではボトムシート、タブレット等の場合は上に重なる画面が表示されるはずです。
ここの、X座標、Y座標を0にすることで、動画がずれずに目いっぱい表示されるはずです。もしそうではない場合は、多分プロジェクトを作った時の動画縦横サイズが違う可能性があります。。。
メニューより、動画情報の編集を選ぶことで、動画の縦横サイズを再設定できます。
10 ビット HDR の警告が表示された
大丈夫！！！！このアプリは10 ビット HDRに対応しています。が、デフォルトではSDRなので、プロジェクトの設定を変更する必要があります。
というわけで動画情報編集画面を開くボタンを押して、HDRの設定を押します。
で、ここでHDR 動画の種類を選んでください。
・・・が、カメラアプリによっては、どの種類の HDR 動画を利用しているか、を表示してくれないアプリがあります。
なので、少し下にスクロールして動画を選択ボタンを探してください。
これは動画ファイルからHDRの種類を特定し設定してくれます。もちろんHDRの種類を覚えている場合は、選択肢を選んでも大丈夫です。
選べたら閉じて、完了を押しましょう。
私が知っている限り スマホ別 HDR 動画の種類
HLGSony XperiaGoogle PixelSamsung Galaxy S25 以降?
ドルビービジョンiPhone一部の Xiaomi ?SHARP AQUOS- ドルビービジョンはよくわからないですが、スマホで撮影したドルビービジョンの場合は
HLGを選んでください
HDR10 / HDR10+一部の Xiaomi ?Samsung Galaxy S24 までMotorola ?
クロマキー合成をする
タイムラインから色を透過したい動画を押して、値の編集を選びます。
つぎにクロマキー合成を利用するを押して、透明にする色を選ぶを押します。
そしたら動画のプレビューが表示されるので、プレビューを押して色を選びます。
選んだ色が表示されるはずです。これで確定し、完了を押してみてください。
うまくいっていれば、重ねた下の動画が映っているはず・・・！
が、思った通りにはいかないものです・・・
これは動画が悪い場合もありますが、普通に私の作りが悪い可能性があります。
というのも、本当はしきい値を決められるようにするべきです。まあ私がプログラムを書いてるとき、OpenGL ESにしきい値を渡す処理を追加するのがめんどくてやらなかったせいですね。
（出来が悪いのに解説記事を書くな）
タブレット、折り畳みスマホでも同様です。
プレビューを動かして大体できているか確認する
タイムラインの何もない空いている箇所を押すと、赤色の縦棒がタッチしたところに移動してきます。これがプレビューの位置で、プレビュー画面に表示されるはずです。
何回か動かしてみてきれいに透けていたらおめでとう！！
もしうまくいかなかった場合は値の編集からクロマキーの設定をやり直してみてください。。。
また、今回は使いませんでしたが、プレビューのモード切り替えが出来ます。再生ボタンと指のアイコンが横に並んでいるボタンがあるのですが、これを再生ボタンの方にすると動画プレイヤーみたいな見た目になって、最終チェック的なことが出来ます。
編集内容の保存
オートセーブです。
次回開いたときは前回のが自動で読み込まれます。
動画の時間を決める
先述話した通り、ダーク尺あまりと同じ問題を抱えているので自分で調整が必要だと話しました。
スマホの場合は左上のメニューから動画情報の編集を開きます。
タブレット等の場合も同様に右上のメニューから動画情報の編集を開きます。
そしたら動画の時間を変更します。これが最終的に保存される動画の時間になります。
動画の保存
満足したら動画の保存、もといエンコードしましょう。
スマホの場合は左上のメニューを押して動画を保存するを選びます。
タブレットとかの場合は左上のメニューを選んで動画を保存するを選びます。
特にこだわりがない場合は、そのまま保存を開始を押してよいです。
有識者向け 詳細設定
もし、動画のコーデックを変更したいとか、フレームレートを変更したい場合は、手動で設定を選んでください。
基本はアプリの中に入っている固定値を使いますが、書き換えたい場合は！
基本は上級者向け機能です。たとえば、HDR動画を保存する場合はH.265 (HEVC) コーデックを利用します。世の中のカメラアプリがそうしているためです。
しかし、いざWindowsで再生しようとなるとHEVC ビデオ拡張機能とかいうよくわからん120円のアプリを買わないといけない？？とかだったはずです。
それが嫌な場合、もう1つの選択肢であるAV1 コーデックを手動で選ぶということが出来ます。
（ただし現状Google Pixel以外はAV1 ハードウェアエンコーダーがなく、CPUを使うしかなくめちゃめちゃ保存が遅いです・・・）
動画を見る
Google フォトやFiles by Googleとかのアプリから見ることが出来ます。
保存先は動画フォルダのAkariDroidにあるハズです。（/storage/emulated/0/Movies/AkariDroidフォルダー）
完成品
いまいち・・