ブラウザだけで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
あたりを組み合わせると、ブラウザだけでもかなり面白いツールを作れます。
まとめ
今回は、ブラウザだけで動く画面録画＆音声録音ツールを作ってみました。
特徴をまとめると、
- 無料
- インストール不要
- 会員登録不要
- ブラウザだけで動作
- 画面全体・ウィンドウ・タブを選択可能
- マイク音声の録音に対応
- 録画データをサーバーへ送信しない
というツールです。
「ちょっと画面を録画したい」
という時に使えるよう、できるだけシンプルにしました。
興味があればぜひ試してみてください。