使用 HTML、CSS 和 JavaScript 构建简易屏幕录像机

欢迎各位参与这个简单易行的屏幕录像项目！我们将仅使用传统的 HTML、CSS 和 JavaScript 共同完成。您可能会疑惑：为何需要这样的工具？答案在于屏幕录制对教程制作、演示汇报、缺陷报告等诸多场景至关重要。无论您是为频道创建分步教学视频，还是向潜在客户展示作品集，这类应用都不可或缺。本文将带您打造一款简约却强大的屏幕录像工具，完全基于 HTML、CSS 和 JavaScript 实现。

工具准备

如先前所述，本项目无需任何第三方库。但若您零编码经验，建议先观看此教程学习代码编辑器基础。

项目目标

本工具支持用户直接通过浏览器录制屏幕画面及完整音频。点击录制按钮后，系统将提示选择录制区域（如 Chrome 标签页），支持多窗口选择或全屏录制。右下角的 "同时共享音频" 选项可自由开关。录制前设有倒计时，最终视频以 WebM 格式下载。

代码轻量无依赖，充分利用浏览器原生 API。让我们深入解析：

架构分解

HTML 构建界面：包含视频预览、录制按钮和下载链接
CSS 样式设计：响应式布局与动感倒计时层
JavaScript 核心功能：屏幕捕捉、视频录制与下载逻辑

现在让我们深入代码实现。

HTML 结构

创建 index.html 文件，编写基础界面代码（有经验者可自定义调整）：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>在线屏幕录制</title>
</head>

<body>
    <div class="countdown" id="countdown"></div>

    <div class="screen-recorder">
        <h1>开启屏幕录制</h1>
        <video controls preload="none" id="video"></video>
        <nav>
            <button type="button" class="btn" id="btn" aria-label="开始录制">录制</button>
            <a href="#" class="btn" id="link" aria-label="下载录制视频" download="recording.webm">下载视频</a>
        </nav>
    </div>
</body>

</html>

video 元素展示录制内容，button 和 a 分别控制录制与下载。

CSS 样式

创建 style.css 美化界面（CSS 新手可参考 W3School 教程）：

关键样式说明：

全局重置：统一边距与盒模型
居中布局：使用网格布局实现垂直水平居中
倒计时层：全屏半透明遮罩与大号数字显示
响应式视频：自适应屏幕尺寸
按钮设计：统一风格与悬停效果
移动适配：媒体查询优化小屏体验

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background-color: #f4f4f4;
}

.countdown {
    visibility: hidden;
    color: green;
    font-size: 10rem;
    font-weight: 900;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen-recorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 90%;
    max-width: 1000px;
    padding: 2rem;
    background-color: #fff;
    color: #202020;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.screen-recorder video {
    width: 100%;
    max-width: 782px;
    aspect-ratio: 16 / 9;
    max-height: 440px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: none;
}

h1 {
    text-transform: capitalize;
    font-size: 3rem;
    font-weight: bold;
    color: #202020;
}

.btn {
    background-color: #428bca;
    color: #fff;
    font-weight: 900;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-transform: capitalize;
    border: 1px solid #428bca;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover,
.btn:focus {
    background-color: #357ec7;
    outline: 2px solid #357ec7;
    outline-offset: 2px;
}

a {
    text-decoration: none;
    margin-inline-start: 20px;
    display: none;
}

@media (max-width: 768px) {
    .screen-recorder video {
        width: 100%;
        height: auto;
    }

    h1 {
        font-size: 2.5rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }

    .countdown {
        font-size: 6rem;
    }
}

JavaScript 功能

创建 script.js 实现核心逻辑：

功能解析

事件驱动：按钮点击触发录制流程
媒体捕获：使用 getDisplayMedia 获取屏幕流，getUserMedia 获取音频
倒计时机制：Promise 实现 3 秒倒计时
录制控制：MediaRecorder API 处理视频流
下载生成：Blob 对象转换下载链接

常见问题解答

Q: 能否录制系统音频？
A: 受浏览器安全策略限制，系统音频录制可能存在限制，建议使用麦克风输入。

Q: 无法录屏的解决办法？
A: 确保浏览器支持 getDisplayMedia API，最新版 Chrome/Firefox 均可。

Q: 如何提升音质？
A: 代码已启用回声消除与降噪，建议外接优质麦克风。

Q: 支持暂停录制吗？
A: 当前版本未实现，可停止后重新开始。

优劣分析

优势	局限
无依赖轻量级	仅支持现代浏览器
简单易实现	无高级编辑功能
音视频同步录制	音频设备兼容性问题
Webm 格式下载	需转换格式兼容播放
响应式设计	无实时预览功能

通过本文，您已掌握构建基础屏幕录像工具的全流程。现在即可动手实践，打造专属的录屏解决方案！

演示站：http://web.bri6.cn/tool/screen-record/

图片[1] - 使用 HTML、CSS 和 JavaScript 构建简易屏幕录像机 - 易航博客