Google製自動動画クロッピングツールAutoFlipを試す

~~Google製のAutoFlipに彼女は？年収は！？調べてみました！~~
日課のウェブサーフィン中に面白そうな[記事](https://www.gizmodo.jp/2020/02/google-autoflip.html "動画のアスペクト比を瞬時に変更するGoogleの神ツール｢AutoFlip｣")を見つけたので軽く動かして遊んでみます

## autoflipとは
[AutoFlip](https://github.com/google/mediapipe/blob/master/mediapipe/docs/autoflip.md "原文")は、MediaPipe(GoogleのMLパイプラインフレームワーク)上に構築された自動クロップパイプラインです。(和訳)


アスペクト比が異なる端末などで再生する際に、自動で重要そうな部分だけクロップしてくれるしてるツールです。
以下の例のように重要箇所だけを対象に追従してクロップしてくれます。
![autoflip_edited_example.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/baa035b0-784e-be35-310e-9c9f1a37018a.gif)


##ビルド
MediaPipeの導入は[ここ](https://github.com/google/mediapipe/blob/master/mediapipe/docs/install.md)を参考にしてください

####mediapipe Installing on macOS

macOSでの導入方法です

1.準備
 
* [Homebrew](https://brew.sh)をインストール
* [Xcode](https://developer.apple.com/xcode/)をインストール

2.gitリポジトリの取得

```bash:bash
$ git clone https://github.com/google/mediapipe.git
$ cd mediapipe
```

3.Bazelのインストール

```bash:bash

$ brew install https://raw.githubusercontent.com/bazelbuild/homebrew-tap/f8a0fa981bcb1784a0d0823e14867b844e94fb3d/Formula/bazel.rb
$ brew link bazel
```

4.OpenCVとffmpegコーデックのインストール

```bash
$ brew install opencv@3
$ brew uninstall --ignore-dependencies glog
```

5.Python3とsixライブラリーのインストール

```bash:bash
$ brew install python
$ sudo ln -s -f /usr/local/bin/python3.7 /usr/local/bin/python
$ pip3 install --user six
```

6.ハロワ

```bash:bash
$ export GLOG_logtostderr=1
$ bazel run --define MEDIAPIPE_DISABLE_GPU=1 \
      mediapipe/examples/desktop/hello_world:hello_world
```

自分はcd mediapipeとglog依存のアンインストールのし忘れで何度か失敗したので気をつけてください

####autoflipのビルド

```bash:bash
$bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 mediapipe/examples/desktop/autoflip:run_autoflip
```

##動かしてみる
[NHKクリエイティブ・ライブラリー](http://www1.nhk.or.jp/archives/creative/material/)から落とした動画で動作確認していきます。きちんと受信料納めてるのでもらえるものはもらっていきます。

```bash:bash
GLOG_logtostderr=1 bazel-bin/mediapipe/examples/desktop/autoflip/run_autoflip \
  --calculator_graph_config_file=mediapipe/examples/desktop/autoflip/autoflip_graph.pbtxt \
  --input_side_packets=input_video_path=/absolute/path/to/the/local/video/file,output_video_path=/absolute/path/to/save/the/output/video/file,aspect_ratio=1:1
```
`aspect_ratio`の値を変えることで出力ファイルのアスペクト比を調整できます。
今回は現行のiPhoneのアスペクト比に合わせ9:19.5で出力しました。
１枚目がオリジナルの動画,2枚目がautoflipでクロップした動画です。

####ストリートバスケット
![video_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/ae98e465-afd5-ee3c-bc5e-26ecad09cdfe.gif)
![auto_video_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/67c08eb6-008f-fd22-e1f8-90f008db9496.gif)
####雪の林のキタキツネ
![video_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/5f6f3e48-850c-ee26-d5ed-0b5e40c195f7.gif)
![auto_video_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/70a1ebda-0d32-d44c-aac8-8324f7938d78.gif)
####巨大トカゲ・コモドドラゴン　大きな口を開けて
![video_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/f840bb96-bf8e-be40-b17d-f1fd6d19f7e9.gif)
![auto_video_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451929/1c09397a-3623-74b6-f646-1a8afd57962f.gif)

gifを圧縮するのに結構苦戦したので良い方法教えていただけるととても喜びます






##まとめ
~~いかがでしたか？Autoflipを使うといい感じの動画をいい感じに生成してくれることがわかりましたね！
よければシェアいいねよろしくお願いします！それでは楽しいエンジニアライフを！~~

人間以外には使えないと思ってたのですが、動物や無機物までなんでもイケるのほんとにすごいですね。

TiktokやByteみたいなスマホで見るショートビデオサービスやインスタのストーリー等が主なユースケースになるのでしょうか。自分はよくクラブやライブでブースと演者を撮る機会があるので、各種SNSへ上げるのに役立ちそうな気がします。映え〜。

キャプチャしたアニメやゲームプレイなどでも試してみたい...iphoneから各種SNSへシェアできるアプリでも作ろうかなぁ。

<p class="codepen" data-height="259" data-theme-id="light" data-default-tab="css,result" data-user="ebifly" data-slug-hash="vYBVRqr" style="height: 259px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="NHK">
  <span>See the Pen <a href="https://codepen.io/ebifly/pen/vYBVRqr">
  NHK</a> by ebifly (<a href="https://codepen.io/ebifly">@ebifly</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##参考
Gizmodo Japan:動画のアスペクト比を瞬時に変更するGoogleの神ツール｢AutoFlip｣
(https://www.gizmodo.jp/2020/02/google-autoflip.html)

AutoFlip: An Open Source Framework for Intelligent Video Reframing
(https://ai.googleblog.com/2020/02/autoflip-open-source-framework-for.html)

GitHub:Installing MediaPipe
(https://github.com/google/mediapipe/blob/master/mediapipe/docs/install.md)

GitHub:AutoFlip_MediaPipe
(https://github.com/google/mediapipe/blob/master/mediapipe/docs/autoflip.md)

NHKクリエイティブ・ライブラリー
(http://www1.nhk.or.jp/archives/creative/)

NHKのアレをCSSとHTMLで再現してみた
(https://ebifry.jp/css/nhk-css/)