2015/04/14

ffmpeg でパソコン操作画面の録画 & VIDEO タグのテスト

[PC][Windows]
昨日 psycopg2 の非同期モードを使い PostgreSQL からのトランザクション内メッセージ(RAISE INFO)をリアルタイムに受け取りました。今日、その動画を撮るにあたり、Windows での画面録画を oCam → ffmepg に全面的に切り替えたので、そのメモ。合わせて、記事内に VIDEO タグで MP4 を埋め込み、Firefox 36 で再生できることを確認しました。OS は Windows 7 32bit です。

■ 20150414_demo.mp4

【追記】スマートフォン用に webm 形式を追加埋め込みしました。画質は少し落ちます。


oCam を使っていた頃の記事は 2014/12/12 です。この時すでに、起動時に勝手にウェブアクセスして最新版にアップデートし、広告を大きく表示するようになったことに嫌気が…。今回いろいろ検討した結果、GUI で自分に合うソフトウェアはなく、コマンドラインツールの ffmpeg を使う方がよっぽどいいと判断。下記で、コマンド一つで録画範囲を指定して直接 MP4 に出力できると知りました。m(_)m

■ ffmpeg 単体で画面キャプチャができる gdigrab - ニコニコ動画研究所
■ gdigrab - FFmpeg Devices Documentation

ニコニコ動画研究所で紹介されていた Zeranoe FFmpeg : Builds から Windows 32bit 用をダウンロードし、bin フォルダ内の ffmpeg.exe ↓ を適当な所に解凍し、記事中の「基本コマンド」がそのまま動きました。バージョンはちょうど先週リリースされたもの。




たくさんの情報表示と同時にキャプチャが始まり、q 打鍵で終了。これで MP4 ができ、そのまま Firefox で再生できました。コマンドラインツール一つなので当然ですが、ゲストユーザで問題なく使えます。

GUI と違ってコマンド実行の前に、録画範囲や出力ファイルパスなど各種設定を行う必要があります。それをし易くするため、簡単な HTML とバッチファイルを加えました。↓

■ 録画範囲の確認.html
<html><head><script type="text/javascript"><!--

get_loc = function() {
var b = document.getElementsByTagName('body')[0];
var t = '-video_size ' + window.outerWidth;
t += 'x' + window.outerHeight;
t += ' -offset_x ' + window.screenX;
t += ' -offset_y ' + window.screenY;
b.textContent = t;
b.style.fontFamily = 'monospace';
}

window.onload = function() {
var tid = setInterval(get_loc, 100);
}

--></script></head><body></body></html>

■ 録画.bat
@echo off
:start

set outfile=test.mp4
set opt1=-show_region 0 -framerate 30 -draw_mouse 1
set opt2=-video_size 640x320 -offset_x 150 -offset_y 70
set opt3=-i desktop -pix_fmt yuv420p

SETLOCAL ENABLEDELAYEDEXPANSION

if not "%mod%" equ "1" (
set /p inp="press [s] to start, [q] for quit : "
if not "!inp!" equ "s" goto :eof
set mod=1
"%~0" %*
)
ffmpeg -f gdigrab %opt1% %opt2% %opt3% %outfile%
set mod=0
goto :start


↓ HTML は実質 JavaScript だけで、ブラウザの左上座標(ディスプレイ左上隅からのオフセット)とウィンドウサイズを取得し、ffmpeg コマンドに渡す形にして表示。ブラウザ全体をキャプチャ範囲と見たてて、範囲の確認や微調整に使います。


↓ バッチファイルは、録画開始前に start or quit のプロンプトを出し、start ならバッチファイルを再帰的に読み込んで ffmpeg を実行し、q 打鍵で終了したら再びプロンプトに戻ります。録画の繰り返しや、違う設定での試行錯誤に便利(プロンプトの間にバッチを修正保存すれば、次の実行で反映される)。



VIDEO タグ、JavaScript、バッチファイルについて、下記を参考にしました。m(_)m

■ <video>タグで動画を埋め込む - HTML5ファレンス
■ [JavaScript]ブラウザウィンドウの左上端座標取得 - ミッションたぶんPossible
■ JavaScriptで画面サイズを取得する - かえラボ
■ バッチファイル : ユーザー入力 - 炎のコマンドプロンプト入門
■ [Windows]バッチファイルでのsetの罠 - 日々量産
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。