はじめに
クライアントからWebサイトに録画機能を追加したいというご要望をいただきましたので、以下のサイトを参考にして最低限のサンプルコードを作成し検証しました。
【分かりやすく解説】Javascriptで画面録画をする方法
サンプルコード要件
・Windows11 + Chromeで動作すること
・録画は映像のみで音声は不要
・「Shift＋R」で録画開始、「Shift＋E」で録画終了および録画ファイル保存
サンプルコード
動きがわかりやすいように「video」タグのみ表示させています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<video style="width:1024px;" src="https://cdn.pixabay.com/video/2023/10/22/186115-877653483_large.mp4" autoplay muted playsinline loop></video>
<script src="app.js"></script>
</body>
</html>
let mediaRecorder;
const recordedBlobs = [];
let isRec = false;
const type = 'webm';
async function startRecording() {
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const options = { mimeType: 'video/' + type };
mediaRecorder = new MediaRecorder(screenStream, options);
mediaRecorder.ondataavailable = (event) => {
if (event.data && event.data.size > 0) {
// 録画データが格納される
recordedBlobs.push(event.data);
}
};
mediaRecorder.start();
console.log('録画開始');
}
function stopRecording() {
mediaRecorder.stop();
console.log('録画停止');
mediaRecorder.onstop = () => {
saveRecording();
};
}
function saveRecording() {
console.log('録画保存');
const blob = new Blob(recordedBlobs, { type: 'video/' + type });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'WebRec.' + type;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 100);
}
document.addEventListener('keypress', (event) => {
if (event.shiftKey) {
if( event.key === 'R' ) {
if (isRec === false) {
startRecording();
isRec = true;
}
}
if( event.key === 'E' ) {
if (isRec === true) {
stopRecording();
isRec = false;
}
}
}
});
実行結果
「Shift＋R」で対象画面を選択すると録画が開始されます。
「Shift＋E」で録画を終了し、ダウンロードフォルダに録画ファイル(webm)が保存されます。
録画時のサイト表示画角がフルHD、4Kサイズ共に録画ファイルをWindowsメディアプレイヤーで再生可能でした。
mp4で録画できないの？
2024年6月に公開されたChrome 126でMediaRecorder向けのMP4コンテナがサポートされましたので、mp4の録画も試してみます。
なお、検証時のChromeバージョンは 128.0.6613.120 です。
「app.js」内の以下の部分を「webm」から「mp4」に変更するとmp4で保存されます。
const type = 'webm';
検証したところ、録画時のサイト表示画角がフルHDサイズの場合はWindowsメディアプレイヤーで再生できましたが、4Kサイズの時は冒頭3秒程度しか再生できませんでした。(原因不明、PCメモリは16GB)
最後に
今回はWindows11+Chrome最新バージョン+webm/mp4で検証しましたが、MediaRecorderのサポート状況はMediaRecorder.isTypeSupportedで確認できます。
サポート状況を確認するための便利なサイトがありますのでリンクを貼っておきます。
https://www.sitelint.com/lab/media-recorder-supported-mime-type/