SNS 用の動画キャプチャ手順。braindump.sumisonic.com のビジュアライザを指定解像度で録画する。

核となる 2 つのロジック

  1. Chrome を `—app=URL` モードで決まったウィンドウサイズで立ち上げる
    • タブバー・アドレスバー等が消える
    • ただし macOS ネイティブのタイトルバー (32 CSS px) は残る
  2. OBS のクロップフィルタでタイトルバーを除去する
    • Retina @2x で 64 物理 px をクロップ

この 2 段構えで Chrome UI を完全に消して、狙った解像度で撮る。

Chrome 起動コマンド

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --app=https://www.sumisonic.com/ \
  --window-size=1440,1112 \
  --window-position=100,100

--window-size はタイトルバー込みの外形サイズなので、コンテンツ狙い値 + 32pt を指定する。

解像度プリセット

アスペクト比コンテンツ--window-size
16:91920 × 10801920,1112
4:31440 × 10801440,1112
1:11080 × 10801080,1112

OBS 設定 (7 ステップ)

  1. 設定 → 映像: 基本/出力キャンバス解像度を目的のアスペクト比に (例 1440×1080)、縮小フィルタ「ランチョス」、FPS 60
  2. ソース追加: macOS スクリーンキャプチャ → 方式「ウィンドウキャプチャ」→ ウィンドウ「sumisonic」を選択
  3. ソース右クリック → フィルタ → + クロップ/パッド: 上 = =64=(Retina 物理 px。32pt × 2)
  4. ソース右クリック → 変換 → キャンバスに合わせる: クロップ後の内容がキャンバス全体にフィット
  5. 設定 → 音声 → グローバル音声デバイス: 「デスクトップ音声」= =Loopback Chrome=、マイク等は「無効」
  6. Loopback.app 側: Loopback Chrome デバイスの Sources に Google Chrome を追加、Monitor に実スピーカーを指定 (自分で聴ける)
  7. 設定 → 出力 → 詳細モード → 録画: エンコーダ Apple VT H.264 Hardware=、レート制御 =CRF=、CRF =20=、形式 =Hybrid MP4

なぜこの方法なのか

他の手段の欠点:

  • ffmpeg avfoundation: single-buffer バグで約 11% の音声サンプル欠落が発生する (FFmpeg PR #20871 未マージ)。入力デバイス・buffer size・ターミナルを変えても解消しない
  • QuickTime: 画面全体録画なので Chrome ウィンドウ外の余白まで含まれる。後処理で crop が必須
  • CleanShot X のウィンドウキャプチャ: タイトルバーは含まれる仕様

OBS は:

  • ウィンドウ単位でキャプチャできる
  • タイトルバーはフィルタで除去
  • 仮想音声デバイス経由で音声も一発録り
  • 音ズレが発生しない (CoreAudio を正しく扱っている)

注意点

  • *アプリケーションキャプチャの音声メーターは表示のみで録音されない*。必ず「デスクトップ音声」に Loopback Chrome を設定すること
  • --window-size はアウターサイズ指定。コンテンツ縦 = 指定値 - 32 になる (macOS タイトルバーの高さ)
  • Chrome の音が Loopback Chrome に流れている必要あり。Loopback.app の Sources 設定を事前に確認