webp 网页如何录屏？

工作中正好研究到了一点：记录下这里：

先看下效果：

具体实现代码：


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebP </title>
</head>
<body><h1> WebP </h1><button id="startRecording">Start </button><button id="stopRecording" disabled>Stop</button><br><a id="downloadLink" style="display:none;">dowload file </a><script>let mediaRecorder;let recordedChunks = [];async function startScreenCapture() {try {alert("App Version:"+navigator.appVersion+"Platform:"+navigator.platform);if (navigator.mediaDevices?.getDisplayMedia) {console.log("getDisplayMedia is supported!");} else {alert("error:"+"App Version:"+navigator.appVersion);}const stream = await navigator.mediaDevices.getDisplayMedia({video: true});mediaRecorder = new MediaRecorder(stream);mediaRecorder.ondataavailable = (event) => {recordedChunks.push(event.data);};mediaRecorder.onstop = () => {const blob = new Blob(recordedChunks, { type: 'video/webm' });const url = URL.createObjectURL(blob);document.getElementById("downloadLink").href = url;document.getElementById("downloadLink").download = "recorded.webm";document.getElementById("downloadLink").style.display = "block";};} catch (err) {alert("navigator.mediaDevices:"+navigator.mediaDevices);alert("getDisplayMedia:"+navigator.mediaDevices?.getDisplayMedia);alert("faild:"+err);}}document.getElementById("startRecording").onclick = () => {recordedChunks = [];startScreenCapture().then(() => {mediaRecorder.start();document.getElementById("startRecording").disabled = true;document.getElementById("stopRecording").disabled = false;});};document.getElementById("stopRecording").onclick = () => {mediaRecorder.stop();document.getElementById("startRecording").disabled = false;document.getElementById("stopRecording").disabled = true;};</script>
</body>
</html>

这段代码是一个简单的网页脚本，用于捕获用户的屏幕并录制视频，然后将录制的视频保存为WebM格式的文件。以下是代码的逐行解释：

<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
<html lang="zh-CN">：HTML根元素，lang="zh-CN"指定了页面内容的主要语言是简体中文。
<head>：包含了文档的元数据，如字符集、视口设置和标题。
<meta charset="UTF-8">：设置页面的字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在移动设备上有更好的响应式表现。
<title>WebP </title>：设置页面的标题。
<body>：包含了页面的可见内容。
<h1> WebP </h1>：页面上的一个标题。
<button id="startRecording">Start </button>：一个按钮，用于开始录制屏幕。
<button id="stopRecording" disabled>Stop</button>：一个按钮，用于停止录制屏幕，初始状态为禁用。
<a id="downloadLink" style="display:none;">dowload file </a>：一个链接，用于下载录制的视频文件，初始状态为隐藏。
<script>：包含JavaScript代码。 13-14. 定义了mediaRecorder和recordedChunks变量，分别用于录制媒体和存储录制的数据块。 15-31. startScreenCapture函数：用于开始屏幕捕获。
- 15-16. 弹出一个警告框，显示浏览器的版本和平台信息。
- 17-20. 检查浏览器是否支持getDisplayMedia方法。
- 21-25. 使用getDisplayMedia方法获取屏幕媒体流。
- 26-27. 创建一个新的MediaRecorder实例。
- 28-30. 设置ondataavailable事件处理程序，用于收集录制的数据块。
- 31-36. 设置onstop事件处理程序，用于在录制停止时创建Blob对象，并更新下载链接。 32-36. catch块：捕获并显示任何错误信息。 37-44. 为“Start”按钮添加点击事件处理程序，开始录制并更新按钮状态。 45-52. 为“Stop”按钮添加点击事件处理程序，停止录制并更新按钮状态。

这段代码的主要功能是允许用户通过点击“Start”按钮开始屏幕录制，录制完成后点击“Stop”按钮停止录制，并通过提供的下载链接下载录制的视频文件。注意，这段代码中有一些错误和不规范的地方，例如dowload file应该是download file，以及alert函数的使用可能会影响用户体验。此外，代码中没有提到WebP格式，而是使用了WebM格式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/62109.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！