ブラウザだけでPCの画面を録画できる、無料の画面録画ツールを作りました。

👉 https://mjeld.com/screen-recorder/

ソフトのインストールや会員登録は不要です。

ブラウザからページを開いて、そのまま画面録画を開始できます。

作ったきっかけ

PCの操作方法や不具合を誰かに説明するとき、

「このボタンを押して、そのあとここをクリックして……」

と文章やスクリーンショットで説明するのは結構大変です。

画面をそのまま録画して渡せれば早いのですが、そのためだけに画面録画ソフトをインストールするのも面倒。

そこで、

「URLを開くだけですぐ画面録画できたら便利なのでは？」

と思い、ブラウザだけで完結する画面録画ツールを作ってみました。

できること

現在、以下の機能に対応しています。

PC画面の録画
ウィンドウを指定して録画
ブラウザタブを指定して録画
マイク音声の録音
録画の一時停止・再開
録画した動画の保存

アカウント登録なども必要ありません。

使い方

使い方はかなりシンプルです。

1. ツールを開く

2. 必要ならマイクをON

画面と一緒に自分の声も録音したい場合は、マイク音声をONにします。

3. 「画面を選択して録画開始」をクリック

ブラウザから共有する画面を選択する画面が表示されます。

そこで、

画面全体
ウィンドウ
ブラウザのタブ

などから録画したいものを選択します。

4. 録画開始

選択すると録画が開始されます。

必要に応じて一時停止・再開もできます。

5. 録画を停止して保存

録画を停止すると、録画した動画をPCに保存できます。

ブラウザだけで画面録画できる仕組み

今回面白かったのが、

「ブラウザだけでも意外と本格的な画面録画ができる」

というところです。

画面取得にはブラウザの画面共有機能を利用します。

JavaScriptでは、例えば以下のように画面のMediaStreamを取得できます。

const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true
});

取得したMediaStreamをMediaRecorderで録画します。

const recorder = new MediaRecorder(stream);

recorder.start();

録画されたデータをブラウザ側で受け取り、最終的に動画ファイルとして保存する仕組みです。

そのため、専用のデスクトップアプリをインストールしなくても画面録画ができます。

マイク音声も録音

マイクについてもMediaDevices APIを利用できます。

const micStream = await navigator.mediaDevices.getUserMedia({
    audio: true
});

これを画面録画と組み合わせることで、

画面 + マイク音声

という録画ができます。

操作マニュアルやWebサービスの説明動画などを簡単に作ることができます。

録画データをサーバーに送らない

このツールを作る上で重視したのがここです。

録画した画面データをサーバーへアップロードしない設計にしています。

画面録画から動画データの生成まで、基本的にユーザーのブラウザ上で処理します。

画面録画サービスの場合、

「この録画データってどこかのサーバーに送られているのでは？」

と気になることがあります。

特に仕事で使っているPCでは、画面上に社内情報などが表示されている可能性もあります。

そのため今回のツールでは、できるだけシンプルに、

ブラウザで録画 → ブラウザで動画生成 → PCに保存

という形にしました。

ブラウザAPIだけでも結構いろいろできる

今回作ってみて改めて感じたのですが、最近のブラウザAPIはかなり便利です。

画面共有、カメラ、マイク、音声、動画など、以前ならデスクトップアプリを作らなければ難しかった機能もJavaScriptから利用できます。

特に

getDisplayMedia()
getUserMedia()
MediaRecorder

あたりを組み合わせると、ブラウザだけでもかなり面白いツールを作れます。

まとめ

今回は、ブラウザだけで動く画面録画＆音声録音ツールを作ってみました。

特徴をまとめると、

無料
インストール不要
会員登録不要
ブラウザだけで動作
画面全体・ウィンドウ・タブを選択可能
マイク音声の録音に対応
録画データをサーバーへ送信しない

というツールです。

「ちょっと画面を録画したい」

という時に使えるよう、できるだけシンプルにしました。

興味があればぜひ試してみてください。

👉 https://mjeld.com/screen-recorder/