如何在 JavaScript 中进行录屏并保存

在JavaScript中进行录屏并将录制内容保存，主要涉及到使用MediaStream API 、使用RecordRTC库、保存录屏文件、以及相关兼容性处理等关键技术环节。使用MediaStream API 是其中的核心，这是因为它允许你访问用户设备上的媒体流，包括视频和音频流。具体而言，可以通过捕捉用户屏幕上的活动来创建一个媒体流，从而使得录屏成为可能。

一、使用MEDIASTREAM API

MediaStream API是现代浏览器提供的一个强大接口，允许Web应用程序直接访问用户的媒体流设备，如摄像头和麦克风，以及用户的屏幕（录屏）。为了在JavaScript中开始录屏，首先需要通过该API获取用户屏幕的媒体流。

• 获取屏幕媒体流

通常，你可以通过navigator.mediaDevices.getDisplayMedia()方法请求用户共享其屏幕的媒体流。这个方法会返回一个Promise，如果用户同意分享，那么这个Promise会解析为一个包含了屏幕媒体流的MediaStream对象。

async function startRecordingScreen() {

    try {
        const mediaStream = awAIt navigator.mediaDevices.getDisplayMedia({video: true});
        // 使用MediaStream进行后续操作
    } catch (err) {
        console.error("Failed to get display media: ", err);
    }
}

• 处理媒体流

获取到MediaStream后，你可以利用这个流来进行各种操作，如预览、录制或者处理视频和音频内容。

二、使用RECORDRTC库进行录屏

虽然可以直接使用MediaStream API进行一些基本的录屏操作，但实际应用中，为了更方便地进行录屏并实现更多功能（如同时录制音频、屏幕和用户摄像头等），你可能需要使用一些第三方库。RecordRTC是一个常见且功能强大的JavaScript库，能够简化录屏的实现过程。

• 安装和使用RecordRTC

首先，你需要将RecordRTC库引入到你的项目中。你可以通过CDN链接、npm或者直接下载源码的方式来进行。

// 通过CDN引入RecordRTC

<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>

然后，可以使用RecordRTC库与MediaStream API结合，开始录制屏幕：

let recorder;

async function startRecording() {
    const screenStream = await navigator.mediaDevices.getDisplayMedia({video: true});
    recorder = new RecordRTC(screenStream, {type: 'video'});
    recorder.startRecording();
    // 开启录制
}
async function stopRecording() {
    await recorder.stopRecording();
    let blob = recorder.getBlob();
    // 处理blob，例如保存文件或上传
}

• 保存录屏结果

RecordRTC提供了简单的API来处理录屏后的数据，你可以通过getBlob()方法获取到一个包含录屏数据的Blob对象，进而进行保存或其他处理。

三、保存录屏文件

在录制完毕后，通常需要将录制的屏幕内容保存下来。这可以通过创建一个带有Blob数据的URL，然后通过创建一个隐藏的标签来触发下载操作实现。

function saveRecording(blob) {

    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'recording.mp4'; // 指定下载文件名
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
}

if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {

    // 支持录屏功能
} else {
    // 不支持录屏功能处理
}