Nuartz

notes

Search

Search IconIcon to open search

ブロウちゃんをデスクトップにわいわいさせる(moviepy, ffmpeg, Übersicht)

Last updated Dec 29, 2020

弊高専アドカレ埋めます

# 背景

SteamのセールでMuse Dash買いました. ブロウちゃん(アイドル)かわいすぎるなということで, ブロウちゃんをデスクトップでいつでも見れるようにしよう, という企画です.

元素材はキャラ選択画面だとUIが被って見切れるのでYoutubeから拾ってきた.

# 透過

moviepyでframeに分割していい感じにフィルタ処理, アルファチャンネルを追加してpngに叩き込む.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

from moviepy.editor import *
import numpy as np
import cv2

clip = VideoFileClip("idle.mp4")

loop_clip = VideoFileClip("idolloop.mp4")
loop_frames = loop_clip.iter_frames()
max_cnt = 0
for frame in loop_frames:
    max_cnt += 1
print(max_cnt)

clip = clip.subclip(2.0, 6.0)
print(clip.fps)
frames = clip.iter_frames()

new_frames = []
cnt = 0
for frame in frames:
    f = np.array(frame)
    #fb = [tuple(a) for a in f[:,1800,:]]
    # f = np.where(f == [93, 0, 82], [0, 0, 255], f)
    fil = np.sum(np.abs(f - [93, 0, 82]), axis=2) < 11
    (h, w, _) = f.shape
    res = np.zeros((h, w, 4))
    # BGR <- RGB
    res[:,:,2] = np.where(fil, 0, f[:,:,0])
    res[:,:,1] = np.where(fil, 0, f[:,:,1])
    res[:,:,0] = np.where(fil, 0, f[:,:,2])
    res[:,:,3] = np.where(fil, 0, 255)
    print(cnt)
    cv2.imwrite("%03d_idle.png" % cnt, res)
    cnt = cnt + 1
    if cnt == max_cnt:
        break
    #ff = [tuple(a) for a in f[:,1880,:]]

# 透過動画

How to use transparent videos on the web in 2021によると,

なら透過動画が扱えるらしい. ffmpegを使ってpngの列をwebm, movに変換してみる.

# Chrome

こっちは簡単, コーディックにlibvpx-vp9を指定すればOK

1

ffmpeg -framerate 60 -f image2 -i %03d_idle.png -c:v libvpx-vp9 output.webm

# Safari

こっちがマジで面倒臭い. コーディックにhevcを指定するとデフォルトではlibx265が選択される. 詳細をffmpeg -h encoder=hevcで表示すると

1

    Supported pixel formats: yuv420p yuvj420p yuv422p yuvj422p yuv444p yuvj444p gbrp yuv420p10le yuv422p10le yuv444p10le gbrp10le yuv420p12le yuv422p12le yuv444p12le gbrp12le gray gray10le gray121e

yuvaのようなaが含まれていないとアルファチャンネルを加味してエンコードしてくれないらしい.

hevc_videotoolboxを用いればbgraが含まれていてOK

1

ffmpeg -framerate 60 -i %03d_idle.png -c:v hevc_videotoolbox -allow_sw 1 -alpha_quality 1 -tag:v hvc1 output.mov

# Übersicht

Übersicht. これすごい. Reactの要素とか投げられる.

paulbhartzog/ubersicht-video-widgetを参考にして, 動画を再生させる. 以下のcoffee scriptをWidget Folderに含めると動く. output.movは, Widget Folderに含めればOK.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

refreshFrequency: false

render: ->"""
  <video width="240" loop autoplay playsinline>
    <source src="output.mov" type="video/mp4">
    Your browser does not support the video tag.
  </video>
"""

style: """
  top: calc(100% - 135px)
  left: calc(50% - 110px)
  border: 0px solid #fff
  z-index: 1000
  background-color: rgba(255, 255, 255, 0)
  /* kluge to erase space at bottom of video inside container */
  video
    margin-bottom: 0px
"""

# 動いてる感じ

# 〆

かわいい