フォームに穴をあけて画面録画できるようにする

2021年8月4日

その他の小技その他のちょっとしたアプリ

は？何言ってんの？と思うかもしれませんが、真面目な話です。作成したアプリの動作を画面録画してYouTubeにアップしていますが、これはAG-デスクトップレコーダーというフリーのソフトを使っています。

AG-デスクトップレコーダー – ｋ本的に無料ソフト・フリーソフト

ところがこれだと録画中に録画する場所を変更することができません。そこで自作することにしました。その結果、できあがったのが以下の動画です。

Contents

1 画面録画するにはどうすればいいのか
2 フォームに穴をあける
- 2.1 フォームの穴から画面録画
3 フォームを自前で移動させる

画面録画するにはどうすればいいのか

画面録画するにはどうすればいいのでしょうか？　ここを参考にしました。

【c#】画面を録画する方法 WORK NOTE

AForge.NETというライブラリを使用します。そしてリンク先の記事を参考に以下のようなコードを書いてみました。

    AForge.Video.VFW.AVIWriter aviWriter = new AForge.Video.VFW.AVIWriter();

    int width = 640;
    int height = 480;

    Bitmap bitmap = new Bitmap(width, height);
    Graphics g = Graphics.FromImage(bitmap);

    aviWriter.FrameRate = 10;
    aviWriter.Open("test.avi", width, height);

    // 最長30秒。あまり長くするとファイルサイズが巨大になりすぎる
    for (int i = 0; i < 30 * 10; i++)
    {
        g.CopyFromScreen(new Point(0, 0), new Point(0, 0), bitmap.Size);
        aviWriter.AddFrame(bitmap);
        await Task.Delay(100);
    }

    bitmap.Dispose();
    g.Dispose();

    aviWriter.Close();

    MessageBox.Show("録画が完了しました。");

AForge.Video.VFW.AVIWriter aviWriter = new AForge.Video.VFW.AVIWriter();

int width = 640;

int height = 480;

Bitmap bitmap = new Bitmap(width, height);

Graphics g = Graphics.FromImage(bitmap);

aviWriter.FrameRate = 10;

aviWriter.Open("test.avi", width, height);

// 最長30秒。あまり長くするとファイルサイズが巨大になりすぎる

for (int i = 0; i < 30 * 10; i++)

{

g.CopyFromScreen(new Point(0, 0), new Point(0, 0), bitmap.Size);

aviWriter.AddFrame(bitmap);

await Task.Delay(100);

}

bitmap.Dispose();

g.Dispose();

aviWriter.Close();

MessageBox.Show("録画が完了しました。");

これで座標（0,0）を起点に640 × 480ピクセルで画面録画することができます。座標を変えれば動作中に録画する場所を変更することができそうです。録画する場所を簡単に変更するのであればフォームに穴をあけてそこから見える部分を録画するという仕様にしたいのですがどうでしょうか？

フォームに穴をあける

ではフォームに穴をあけるにはどうすればいいのでしょうか？

Form.TransparencyKeyプロパティを使えば簡単にできます。Form.TransparencyKeyプロパティにセットした色が透明になるのです。

以下のコードでは赤い矩形を描画することでその部分を透明にしています。

public partial class Form1 : Form
{
    Rectangle HoleRectangle = new Rectangle(10, 50, 480, 360);

    public Form1()
    {
        InitializeComponent();

        // 穴にフォームのクライアントサイズを合わせる
        this.ClientSize = new Size(HoleRectangle.Width + 20, HoleRectangle.Height + 70);
        this.TransparencyKey = Color.Red;
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.FillRectangle(Brushes.Red, HoleRectangle);

        base.OnPaint(e);
    }
}

public partial class Form1 : Form

{

Rectangle HoleRectangle = new Rectangle(10, 50, 480, 360);

public Form1()

{

InitializeComponent();

// 穴にフォームのクライアントサイズを合わせる

this.ClientSize = new Size(HoleRectangle.Width + 20, HoleRectangle.Height + 70);

this.TransparencyKey = Color.Red;

}

protected override void OnPaint(PaintEventArgs e)

{

e.Graphics.FillRectangle(Brushes.Red, HoleRectangle);

base.OnPaint(e);

}

フォームの穴から画面録画

フォームに穴をあけることができたら、この部分を画面録画できるようにします。

public partial class Form1 : Form
{
    private async void button1_Click(object sender, EventArgs e)
    {
        AForge.Video.VFW.AVIWriter aviWriter = new AForge.Video.VFW.AVIWriter();

        int width = HoleRectangle.Width;
        int height = HoleRectangle.Height;

        Bitmap bitmap = new Bitmap(width, height);
        Graphics g = Graphics.FromImage(bitmap);

        // aviWriter.Openに渡す幅と高さは2の倍数にすること。さもないと例外が発生する
        aviWriter.FrameRate = 10;
        aviWriter.Open("test.avi", width, height);

        // 0.1秒おき300回（30秒間）録画する
        for (int i = 0; i < 30 * 10; i++)
        {
            Point pt = this.PointToScreen(new Point(HoleRectangle.X, HoleRectangle.Y));

            g.CopyFromScreen(pt, new Point(0, 0), bitmap.Size);
            aviWriter.AddFrame(bitmap);
            await Task.Delay(100);
        }

        bitmap.Dispose();
        g.Dispose();

        aviWriter.Close();

        MessageBox.Show("録画が完了しました。");
    }
}

public partial class Form1 : Form

{

private async void button1_Click(object sender, EventArgs e)

{

AForge.Video.VFW.AVIWriter aviWriter = new AForge.Video.VFW.AVIWriter();

int width = HoleRectangle.Width;

int height = HoleRectangle.Height;

Bitmap bitmap = new Bitmap(width, height);

Graphics g = Graphics.FromImage(bitmap);

// aviWriter.Openに渡す幅と高さは2の倍数にすること。さもないと例外が発生する

aviWriter.FrameRate = 10;

aviWriter.Open("test.avi", width, height);

// 0.1秒おき300回（30秒間）録画する

for (int i = 0; i < 30 * 10; i++)

{

Point pt = this.PointToScreen(new Point(HoleRectangle.X, HoleRectangle.Y));

g.CopyFromScreen(pt, new Point(0, 0), bitmap.Size);

aviWriter.AddFrame(bitmap);

await Task.Delay(100);

}

bitmap.Dispose();

g.Dispose();

aviWriter.Close();

MessageBox.Show("録画が完了しました。");

}

フォームを自前で移動させる

これで完成といいたいのですが、実際に使ってみると問題点があることがわかりました。ウィンドウをドラッグして移動するとき、ドロップで移動先が確定するまで移動先が描画されます。この部分が録画されてしまうのです。

動画の29秒あたりから画面録画をした動画を再生しているのですが、フォームを移動させようとすると枠のようなものが写り込んでいることがわかります。

そこでウィンドウをドラッグしたら移動がすぐにおこなわれるようにして線が入るのを防ぎます。フォームを移動させるときはタイトルバーをドラッグするのではなくクライアント領域をドラッグするようにします。

マウスボタンが押されたらForm.Locationをフィールド変数に保存します。そしてどれだけ移動するかはイベントハンドラの引数を利用すれば算出できるのですが、このときe.Xとかe.Yで取得できる座標はクライアント座標です。フォームが移動すれば同じ座標でもクライアント座標はかわります。そこでスクリーン座標として保存し評価しなければなりません。

public partial class Form1 : Form
{
    Point MouseDownPoint = Point.Empty;
    Point MouseDownLocation = Point.Empty;

    protected override void OnMouseDown(MouseEventArgs e)
    {
        // Form.Locationをフィールド変数に保存
        MouseDownLocation = this.Location;

        // マウスボタンが押された座標をスクリーン座標として保存
        MouseDownPoint = this.PointToScreen(new Point(e.X, e.Y));
        this.Capture = true;

        base.OnMouseDown(e);
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        if (this.Capture)
        {
            // マウスカーソルがある位置をスクリーン座標として取得する
            Point mousePoint = this.PointToScreen(new Point(e.X, e.Y));

            // マウスボタンが押された位置からどれだけ移動させるべきかを計算する
            int dx = mousePoint.X - MouseDownPoint.X;
            int dy = mousePoint.Y - MouseDownPoint.Y;

            // 計算して得られた量だけ移動させる
            this.Location = new Point(MouseDownLocation.X + dx, MouseDownLocation.Y + dy);
        }

        base.OnMouseMove(e);
    }
}

public partial class Form1 : Form

{

Point MouseDownPoint = Point.Empty;

Point MouseDownLocation = Point.Empty;

protected override void OnMouseDown(MouseEventArgs e)

{

// Form.Locationをフィールド変数に保存

MouseDownLocation = this.Location;

// マウスボタンが押された座標をスクリーン座標として保存

MouseDownPoint = this.PointToScreen(new Point(e.X, e.Y));

this.Capture = true;

base.OnMouseDown(e);

}

protected override void OnMouseMove(MouseEventArgs e)

{

if (this.Capture)

{

// マウスカーソルがある位置をスクリーン座標として取得する

Point mousePoint = this.PointToScreen(new Point(e.X, e.Y));

// マウスボタンが押された位置からどれだけ移動させるべきかを計算する

int dx = mousePoint.X - MouseDownPoint.X;

int dy = mousePoint.Y - MouseDownPoint.Y;

// 計算して得られた量だけ移動させる

this.Location = new Point(MouseDownLocation.X + dx, MouseDownLocation.Y + dy);

}

base.OnMouseMove(e);

}

これでクライアント領域をドラッグすればフォームを移動させることができるのですが、タイトルバーをドラッグしたときも同様に移動できるようにしてしまいましょう。

クライアント領域以外の部分がクリックされたらWM_NCLBUTTONDOWNメッセージが発生します。またWParamがHTCAPTIONのときがタイトルバーがクリックされたときです。そこでそのときは以下の処理をおこないます。これでフォームを移動させることができます。

public partial class Form1 : Form
{
    protected override void WndProc(ref Message m)
    {
        int WM_NCLBUTTONDOWN = 0x00A1;
        int HTCAPTION = 2;

        if (m.Msg == WM_NCLBUTTONDOWN && m.WParam.ToInt32() == HTCAPTION)
        {
            MouseDownPoint = Control.MousePosition;
            MouseDownLocation = this.Location;
            this.Capture = true;

            m.Result = IntPtr.Zero;
            return;
        }

        base.WndProc(ref m);
    }
}

public partial class Form1 : Form

{

protected override void WndProc(ref Message m)

{

int WM_NCLBUTTONDOWN = 0x00A1;

int HTCAPTION = 2;

if (m.Msg == WM_NCLBUTTONDOWN && m.WParam.ToInt32() == HTCAPTION)

{

MouseDownPoint = Control.MousePosition;

MouseDownLocation = this.Location;

this.Capture = true;

m.Result = IntPtr.Zero;

return;

}

base.WndProc(ref m);

}

よろしければ記事の拡散をお願いします。

鳩でも分かるC#管理人からのお願い

できる仕事であれば請け負います。鳩でもわかるC#管理人はクラウドワークスに在宅ワーカーとして登録しています。お仕事の依頼もお待ちしております。

⇒ 仕事を依頼する

コメントについて

コメントで英語などの外国語でコメントをされる方がいますが、管理人は日本語以外はわからないので基本的に内容が理解できず、承認することもありません。それからへんな薬を売っているサイトやリンク先のサイトが存在しないというスパムコメントも多々あります。

Some people make comments in foreign languages such as English, but since the manager does not understand anything other than Japanese, he basically cannot understand the content and does not approve it. Please use Japanese when making comments.

そんななか日本語のコメントもいただけるようになりました。「○○という変数はどこで宣言されているのか？」「××というメソッドはどこにあるのか」「例外が発生する」「いっそのことソース丸ごとくれ」という質問ですが、管理人としては嬉しく思います。「自分が書いた記事は読まれているんだな」と。疑問点には可能な限り答えます。記事に問題があれば修正いたします。

そのうえでお願いがあります。「匿名」という味も素っ気もない名前ではなく、捨てハンでいいのでなにかハンドルネームをつくってほしいと思います。

管理人のモチベーションアップのために

よろしければご支援お願いします。

⇒ 管理人の物乞いリスト

「他のアプリケーションでも閉じたときのウィンドウの位置を記憶させる」

「PuppeteerSharpで検索結果の上位30件を取得してみた」