网络录屏新体验：借助 Web API 接口实现便捷录屏的 HTML 源码

#介绍

网络录屏，即于互联网上实施屏幕录制的操作流程。其赋予用户通过网络连接来记录自身屏幕活动的能力，并且可在适当的时候对所录制的内容进行播放、分享或存储操作。在诸多场景中，像教育、培训、演示以及游戏等领域，网络录屏都发挥着重要的作用，它能够协助用户清晰展示操作步骤，解决相应问题，同时分享自己的宝贵经验。

一般情况下，网络录屏工具会为用户提供多种功能，像对录制区域的选取、添加音频注释以及调整录制质量等，以此充分满足用户各式各样的需求。

需要注意的是，此服务仅支持电脑访问，部分浏览器可能无法正常使用。

体验地址：https://123ka.cn/luping

#使用方法

新建一个html文件，把下方代码复制进去即可

#代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屏幕录制示例</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1 {
margin-bottom: 20px;
}
#recordedVideoContainer {
width: 640px; /* 固定播放器宽度 */
margin: 0 auto; /* 水平居中 */
}
video {
width: 100%;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
input {
padding: 8px;
font-size: 16px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>屏幕录制示例</h1>
<div id="recordedVideoContainer">
<video id="recordedVideo" controls></video>
</div>
<div>
<a style="display: none;">
<input type="text" id="fileNameInput" placeholder="输入文件名">
<a id="downloadLink" download="recorded-video.mp4" style="display: none;">
<button id="downloadButton" onclick="downloadVideo()">下载视频</button>
</a>
</div>
<div>
<button id="startButton" onclick="startRecording()">开始录制</button>
<button id="stopButton" onclick="stopRecording()" disabled>停止录制</button>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
const recordedVideo = document.getElementById('recordedVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const downloadButton = document.getElementById('downloadButton');
const downloadLink = document.getElementById('downloadLink');
const fileNameInput = document.getElementById('fileNameInput');
async function startRecording() {
startButton.disabled = true;
stopButton.disabled = false;
downloadLink.style.display = 'none';
const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
recordedChunks = [];
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
};
mediaRecorder.onstop = () => {
const recordedBlob = new Blob(recordedChunks, { type: 'video/mp4' });
recordedVideo.src = URL.createObjectURL(recordedBlob);
downloadLink.href = recordedVideo.src;
downloadButton.disabled = false;
downloadLink.style.display = 'block';
};
mediaRecorder.start();
}
function stopRecording() {
startButton.disabled = false;
stopButton.disabled = true;
mediaRecorder.stop();
}
function downloadVideo() {
const fileName = fileNameInput.value || 'recorded-video';
downloadLink.download = fileName + '.mp4';
}
</script>
</body>
</html>

{{userData.name}}已认证