Upgrade to Pro — share decks privately, control downloads, hide ads and more …

シェル芸でなれるVTuber!

amanoese
November 09, 2020
790

 シェル芸でなれるVTuber!

第50回 シェル芸LT(2020/11/9)のLT で発表した内容です。
LT動画はこちら: https://www.youtube.com/watch?v=ig42Nml0Agk

amanoese

November 09, 2020
Tweet

Transcript

  1. シェル芸でなれる!
    v-untuber

    View Slide

  2. 自己紹介
    「jus共催 第50回記念我々は50回も何をやってるんだ
    ろうシェル芸勉強会」に初参加!
    JavaScriptとシェル芸が好き
    RustとElmに憧れてる [email protected]ではたらくフレンズ
    @amanoese

    View Slide

  3. シェル芸 x VTuber + unko

    View Slide

  4. きっかけ
    前回の続きでSoXコマンドの応用でボイスチェンジャー作成を考える

    前例あり
    https://qiita.com/Nabeshin/items/5a904fe0baf76a9bf651

    ボイスチェンジャー+α すれば…VTuberか……

    View Slide

  5. かんがえたこと

    View Slide

  6. 一つずつ解決していく

    View Slide

  7. カメラから画像を取り込む

    View Slide

  8. カメラから画像を取り込む
    $ v4l2-ctl --list-devices
    ## 保存
    $ ffmpeg -f v4l2 -i /dev/video0 -frames:v 1 out.jpg
    ## モザイク表示
    $ ffmpeg -f v4l2 -i /dev/video0 -frames:v 1 -f image2 -|convert - -sample 5% -sample 2000% - | display -
    ## caca (colored ascii art)
    $ DISPLAY= ffmpeg -f v4l2 -i /dev/video2 -pix_fmt rgb24 -f caca -
    ※ cacaについて話したいけど割愛
    http://caca.zoy.org/wiki/libcaca

    View Slide

  9. 画像から認識する…

    View Slide

  10. コマンドみつけられなかった
    つくるか……

    View Slide

  11. qtf
    「有名な学習済モデルを使うのにプログラムを書くのは面倒だよ……」
    という意見から生まれた天才的なコマンド
    $ qtf posenet input.jpg | jq .
    https://www.npmjs.com/package/qtf

    View Slide


  12. ## unko 画像
    $convert -background black -pointsize 64 pango:"" -gravity center -extent
    128x96 unko.jpg
    画像の変形
    https://legacy.imagemagick.org/Usage/distorts/#perspective

    View Slide

  13. ffplayで再生
    $yes|xargs -L1 bash -c "ffmpeg -y -f v4l2 -i /dev/video0 -frames:v 1 o.jpg
    2>/dev/null && qtf posenet o.jpg|jq
    '.keypoints|.[2],.[1],.[6],.[5]|.position|.x/5,.y/5'|cut -d. -f1|xargs -n2|awk NF=NF
    OFS=,|diff -y <(echo -e '0,0\n128,0\n0,96\n128,96') -|tr -d '|'|awk
    NF=NF|xargs"|xargs -i bash -c "echo {} >&2;convert <(convert -background black
    -pointsize 64 pango:"" -gravity center -extent 128x96 jpg:-) -matte -mattecolor
    black -distort Perspective '{}' jpg:-"|ffplay -f mjpeg -

    View Slide

  14. ffplayで再生(デモ用)
    $yes|xargs -L1 bash -c "ffmpeg -y -f v4l2 -i /dev/video0 -frames:v 1 o.jpg
    2>/dev/null && qtf posenet o.jpg|jq
    '.keypoints|.[2],.[1],.[6],.[5]|.position|.x/5,.y/5'|cut -d. -f1|xargs -n2|awk NF=NF
    OFS=,|diff -y <(echo -e '0,0\n128,0\n0,96\n128,96') -|tr -d '|'|awk
    NF=NF|xargs"|xargs -i bash -c "echo {} >&2;convert o.jpg -sample 5% -sample
    2000% box/$(date +%s).jpg;convert <(convert -background black -pointsize 64
    pango:"" -gravity center -extent 128x96 jpg:-) -matte -mattecolor black -distort
    Perspective '{}' jpg:-"|ffplay -f mjpeg -
    $ yes | xargs -L1 bash -c 'sleep 1;ls|sort -r|head -1|xargs cat'|ffplay -f mjpeg -

    View Slide

  15. 画像を転送できるのか?

    View Slide

  16. 画像を転送できるのか?
    RTPで転送できる
    $ yes|xargs -i bash -c 'muscular shout|firefox -screenshot /dev/stdout
    "data:text/plain;charset=utf-8;base64,$(base64 -w0 -)"
    --window-size=300,450 2>/dev/null|convert png:- jpg:- >0.jpg;cat
    0.jpg{,,,,,,,,,,,,,,,,,,,,,,,,,,,,}'|ffmpeg -re -i pipe:mjpeg -f rtp_mpegts
    rtp://localhost:50001

    View Slide

  17. 出力方法について
    ビデオキャプチャ(UVC) -> OBS -> youtube
    - ハードウェアに頼るとなんか違う
    - OBSでコントロールできる
    rtmp (flv) -> youtube
    - ピュアなシェル芸で良い
    - https://www.slideshare.net/s_mitu/ss-121674575
     - コンテンツのオーバレイなどの操作し辛いのが
    youtuberとして致命的
    rtp_mpegts -> OBS -> youtube
    - ギリギリシェル芸では?
    - OBSでコントロールできる
    v4l2loopback
    - mod_prodeが微妙
    ※1 メモ:rtpはudp,trmpはtcp
    ※2 APNGはストリーミングがアレ
    ※3 SVG stream…?

    View Slide

  18. rtp_mpegtsでの配信(理想)
    遅延がひどいのでやらない
    $yes|xargs -L1 bash -c "ffmpeg -y -f v4l2 -i /dev/video0 -frames:v 1 o.jpg
    2>/dev/null && qtf posenet o.jpg|jq
    '.keypoints|.[2],.[1],.[6],.[5]|.position|.x/5,.y/5'|cut -d. -f1|xargs -n2|awk NF=NF
    OFS=,|diff -y <(echo -e '0,0\n128,0\n0,96\n128,96') -|tr -d '|'|awk
    NF=NF|xargs"|xargs -i bash -c "echo {} >&2;convert <(convert -background black
    -pointsize 64 pango:"" -gravity center -extent 128x96 jpg:-) -matte -mattecolor
    black -distort Perspective '{}' jpg:-"|ffmpeg -i pipe:mjpeg -f rtp_mpegts
    rtp://localhost:5000

    View Slide


  19. シェル芸 x VTuber + unko

    v-untuver
    なれた!

    View Slide

  20. 高速化の話
    画像認識よりNode.jsの起動に時間がかかる
    qtfは読み込み可能になるまでに0.4sec
    処理は0.4sec
    MJPEGのストリームを読み込み出力できれば良い
    JSONのストリーム? => application/json-seq
    https://tools.ietf.org/html/rfc7464

    View Slide

  21. 高速化の話
    説明割愛「ffd8」 から「ffd9」を抜けば良い。
    ※ffd0 ~ ffd9になる値はff 00でエスケープされる?
    ## mjpeg -> jpeg + モザイク
    ffmpeg -f v4l2 -i /dev/video0 -f image2pipe -|xxd -ps|sed 's/..../&\n/g'|sed
    '/^$/d'|sed '/ffd9/q'|tr -d \\n|xxd -r -p|convert - -sample 5% -sample 2000%
    -|display -

    View Slide

  22. 高速化の話
    JSONのストリーム? => application/json-seq
    ## mjpeg -> application/json-seq対応
    $ ffmpeg -f v4l2 -i /dev/video0 -f mjpeg - 2>/dev/null | node src/index.js posenet
    pipe:mjpeg -v 2>/dev/null|jq --seq --unbuffered
    ".keypoints|.[1],.[2],.[5],.[6]|.position|.x,.y"
    https://tools.ietf.org/html/rfc7464

    View Slide

  23. 高速化の話
    うまくいかなかったよ…というよりわけわかんなくなったのでおわり
    https://tools.ietf.org/html/rfc7464

    View Slide

  24. まとめ
    シェル芸でV-untuberになれたよ
    - 違法なqtfコマンド
    - ボイスチェンジャーの話はどこに…?
    高速化が課題
    ffmpegとImageMagickの難しさを改めて理解した

    View Slide

  25. 資料など

    View Slide

  26. ## ストリーミング
    ライブストリーミングの基礎知識
    https://www.slideshare.net/kumaryu/ss-17054212?from_m_app=android
    - ストリーミングと規格の入門として良い
    - この情報がほしかった!
    ## FFMPEG
    RTP (II): Streaming with FFmpeg
    https://www.kurento.org/blog/rtp-ii-streaming-ffmpeg
    - rtpプロトコルについての説明
    - WebRTCで有名?
    - このまえ友達とのプロジェクトで名前でた気がする …きのせいかな?
    YUVとRGBの違い - 改訂版
    https://vook.vc/n/507
    - YUVの入門として良い記事
    - 信号線(白黒,カラー混在時期のテレビの話 )で納得できた
    ffmpegでraw画像を扱う方法など調べたまとめ
    https://code.74th.net/entry/2018/03/21/065203
    - image2pipeはありがたい
    ffmpeg でのフレームレート設定の違い
    https://nico-lab.net/setting_fps_with_ffmpeg/
    - フレームレートで気になったら読む場所

    View Slide

  27. ## ImageMagick
    text:pango
    https://legacy.imagemagick.org/Usage/text/#pango
    - テキストを書きたく絵文字やフォントを気にしたくないとき用
    - HTMLのようにタグで囲ったマークアップで色々できそう
    - 多分本来はこれが目的のものぽい
    ditorts:presective
    https://legacy.imagemagick.org/Usage/distorts/#perspective
    - 画像の変形
    ## MJPEGの話
    APPLEのMOVとMJPEGのドキュメント
    https://developer.apple.com/standards/qtff-2001.pdf#page=98
    - 正式なドキュメントだけど量が多いのが難点
    - リンク先はMJPEGのデータの図
    - MJPEGはコーデック?
    - 実際には連続したJPEG
    - MOVはコンテナ
    - ヘッダーにFPSなどはいりオーディオも格納できる
    イギリスあたりの会社の記事ぽい。
    http://www.gdcl.co.uk/2013/05/02/Motion-JPEG.html
    - MJPEGを実際にデコードする仕方が書かれて参考になった

    View Slide

  28. ## JPEG
    JPEGのデコーダーを作って理解してるかたの記事
    https://qiita.com/tobira-code/items/63b9065a46208d0fd128
    - わかりやすいかも
    - ちゃんとは読んでないが今後も読み返すと思う
    バイナリに詳しいリポジトリ
    https://github.com/corkami/formats/blob/master/image/jpeg.md
    - なんだこれは
    - GIGAZINEからのリンク
    - MJPEGについてわかりやすく解説されてる
    - APPLEのPDFははここからのリンクでみつけた
    - ZIPなどのアーカイブ,MP4などのコンテナ,pngなどのバイナリなども記載あり
     - 今後もお世話になりそう
    ## UVC デバイス
    産業用UVCカメラのすすめ : 株式会社アルゴ
    https://www.argocorp.com/UVC_camera.html
    - UVCからドライバのあたりがわかりやすい
    - https://www.argocorp.com/UVC_camera/Linux.html
    - https://www.argocorp.com/UVC_camera/Windows.html
    - v4l2とDirectShowをなんとなく使ってたがと理解が深まった
    - 良記事でお世話になったし、おちんぎんたくさんもらえるエンジニアになったら、ここからカメラ買いたいな
    - 7716×5360 @7フレーム 20万くらい https://www.argocorp.com/cam/usb3/tis/DxKAFU420-CCS.html
    - フレーム落として解像度爆上げモデル?産業用は特化型あって面白い

    View Slide

  29. ## tensorflow
    シェル芸でないすばらしい実装
    https://blog.tensorflow.org/2020/05/pose-animator-open-source-tool-to-bring-svg-characters-to-life.html
    - 実装半分でこれを見つけ、アイディアほぼ一緒で悲しかった
    ## ここからしたはシェル芸に関係ないが今後用のメモ

    View Slide

  30. ## ここからしたはシェル芸に関係ないが今後用のメモ
    ## qtf関連
    画像変換の良さそうなライブラリ
    https://www.npmjs.com/package/sharp
    cudaのドキュメント
    https://docs.nvidia.com/deploy/cuda-compatibility/index.html
    TensorFlowのResizeがよくわからなかったので視覚的にまとめてみた
    http://qiita.com/Hironsan/items/d2a6364221c588867a60
    - こいつを使って画像をリサイズしたい
    - 普通にやると中間画素のあたいがノーマライズされてしまう
    ## imagemagick
    ImageMagick リサイズ補間アルゴリズム
    https://qiita.com/yoya/items/b1590de289b623f18639
    - 普通にやると中間画素のあたいがノーマライズされてしまうのを理解するため用の記事
    ## ffmpeg
    ffmpegを使って動画をアスキーアートで再生してみる( libcaca)
    http://fftest33.blog.fc2.com/blog-entry-122.html
    - Terminalに動画や画像を表示したくなったとき用
    - わりとSSHログイン先のかんたんなファイルチェックとかに使える?

    View Slide

  31. ## ここからしたはシェル芸に関係ないが今後用のメモ
    ## 格安デバイスキャプチャ( MS2109)
    あとでブログにまとめたい
    1000円キャプチャの話 1
    https://japanese.engadget.com/1000hdmi-010534749.html
    1000円キャプチャの話 2
    https://bigl.es/friday-fun-10-hdmi-to-usb-capture/
    - 海外の人の記事も
    1000円キャプチャの話 3
    https://polamjag.hatenablog.jp/entry/2020/09/10/120000
    - 映像は良いけど音声がおかしいという話
    Linuxカーネルのソースの位置
    https://github.com/torvalds/linux/blob/master/sound/usb/quirks-table.h#L3599-L3648
    - 確かに音声を良い感じにする専用のコードがあるぽい
    マクロシリコン社のホームページ
    http://www.macrosilicon.com/info.asp?base_id=2&second_id=2001
    - MS2109はのってない
    - 中国ドメインにすると HDMIスプリッタのチップも見られる

    View Slide

  32. ## ビデオキャプチャとカメラと HDMI
    HDMI入力をRaspberry Piで駆使する
    https://mzyy94.com/blog/2020/04/10/raspberrypi-hdmi-input/
    - ビデオキャプチャは UVCではなくCSI-2も使える
    - この記事書いたひ動画周りに強そう
    - ナチュラルにRTPからWebRTCにつなげてる
    - しかもffmpegじゃなくgst-launchで……
    - CSI-2は転送レートが高いので通常のビデオキャプチャデバイス (おそらく:CSI -> LSI -> USBでLSIの性能
    がネックになりやすい )では難しい転送レートが出せるのかな?
    Camera Serial Interface
    https://en.wikipedia.org/wiki/Camera_Serial_Interface
    - CSI-2の調べ
    ## v4l2
    v4l2loopback
    https://github.com/umlaeute/v4l2loopback
    - 仮想カメラデバイス作りたいとき用
    - テストとかで便利
    - x window全体を転送したりしてる人達もいる

    View Slide

  33. ## コーデック
    AV1エンコーダーの速度と品質の比較 - ffmpeg(libaom) vs SVT-AV1
    https://qiita.com/yanoshi/items/544a361baf76b8114067
    - ffmpegの今回は使わなかったけど AV1コーデックの話
    - AV1はロイヤリティフリーで良いコーデックだけど遅い処理系しかない …と言われるそれを覆してるぽい良
    い記事
    ## 機械学習
    機械学習系のモデルのパーク
    https://github.com/PINTO0309/PINTO_model_zoo
    - tfjs-modelsみたいなの探してたら見つけた
    - すごい量、機械学習界隈では有名なのかな

    View Slide