使用简单的JavaScript创建一个屏幕录屏工具

liuian 2024-12-30 05:16 51 浏览

转载说明：原创不易，未经授权，谢绝任何形式的转载

学习如何使用这个简单易用的API进行屏幕共享、屏幕录制等操作。尽管需要对JavaScript有一定的了解，但我相信你已经具备了这方面的知识。

1、开始录制

让我们创建一个按钮：

<button id="recording-toggle">Start recording</button>

JavaScript 代码

var RECORDING_ONGOING = false;
var recordingToggle = document.getElementById("recording-toggle"); // The button

recordingToggle.addEventListener("click", function(){
    RECORDING_ONGOING = !RECORDING_ONGOING; // Start / Stop recording
    if(RECORDING_ONGOING){
        recordingToggle.innerHTML = "Stop Recording";
        startRecording(); // Start the recording
    } else {
        recordingToggle.innerHTML = "Start Recording";
        stopRecording(); // Stop screen recording
    }
});

看起来这里似乎有很多内容，但实际上，我们只是在按钮上添加了一个事件监听器，以便启动和停止录制，并相应地更改文本。

编写录制核心代码

在函数之前，声明3个全局变量（在函数外部）。

var blob, mediaRecorder = null;
var chunks = [];

现在，让我们开始屏幕录制。

async function startRecording(){
    var stream =  await navigator.mediaDevices.getDisplayMedia(
      {video: {mediaSource: "screen"}, audio: true}
    );

    deviceRecorder = new deviceRecorder(stream, {mimeType: "video/webm"});
}

我们从用户的屏幕创建一个媒体流。媒体记录器有一个 mimeType，它是您所希望的输出文件的类型。

您可以在这里阅读更多关于 mimeType 的信息。

Edge 浏览器支持 video/webm mimeType。该文件扩展名为 .webm。您可以使用以下方式检查浏览器是否支持某个 mimeType：

console.log(MediaRecorder.isTypeSupported("video/webm"))
console.log(MediaRecorder.isTypeSupported("video/mp4"))
console.log(MediaRecorder.isTypeSupported("video/mp4;codecs=avc1"))

在这篇文章中，我将使用 Webm，但您可以根据需要更改 mimeType。

在 startRecording 函数中添加几行代码：

    deviceRecorder.ondataavailable = (e) => {
        if(e.data.size > 0){
             chunks.push(e.data);
        }
    }
    deviceRecorder.onstop = () => {
        chunks = [];
    }
    deviceRecorder.start(250)

每当我们有数据时，我们将其添加到之前定义的 chunks 数组中。当我们停止录制时，我们将调用 stopRecording() 函数。

停止录制

function stopRecording(){
    var filename = window.prompt("File name", "video"); // Ask the file name

    deviceRecorder.stop(); // Stopping the recording
    blob = new Blob(chunks, {type: "video/webm"})
    chunks = [] // Resetting the data chunks
    var dataDownloadUrl = URL.createObjectURL(blob);

    // Downloadin it onto the user's device
    let a = document.createElement('a')
    a.href = dataDownloadUrl;
    a.download = `${filename}.webm`
    a.click()
    
    URL.revokeObjectURL(dataDownloadUrl)
}

这就是在 JavaScript 中进行屏幕录制的简单方法。如果您想要使用 mp4 或其他格式，您将需要使用 API 进行转换或自行处理。

结束

在本文中，我们介绍了使用 JavaScript 进行屏幕录制的简单方法。通过使用浏览器提供的媒体记录器 API，我们可以轻松地捕捉用户屏幕的内容并创建录屏文件。无论是进行教学演示、演讲稿录制还是创建应用程序演示视频，屏幕录制都是一个非常有用的工具。您可以根据需要选择不同的输出文件类型，并根据自己的需求进行扩展和定制。我希望本文对您理解和使用 JavaScript 的录屏 API 有所帮助。

谢谢您阅读本文，如果您对其他 JavaScript API 和功能感兴趣，请继续关注我的系列文章。在接下来的文章中，我将继续介绍更多有趣和实用的内容，如通知、浏览器历史记录以及音频和视频录制等。请留意我的更新，获取最新的技术资讯和教程。

希望您喜欢这篇文章，如果您有任何问题或意见，请随时与我联系。再次感谢您的阅读！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

toggle javascript