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格式。
相关文章：
webp 网页如何录屏？
工作中正好研究到了一点：记录下这里： 先看下效果： 具体实现代码：  <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
丹摩征文活动｜实现Llama3.1大模型的本地部署
文章目录 1.前言2.丹摩的配置3.Llama3.1的本地配置4. 最终界面 丹摩 1.前言 Llama3.1是Meta 公司发布的最新开源大型语言模型，相较于之前的版本，它在规模和功能上实现了显著提升，尤其是最大的 4050亿参数版本，成为开源社区中非常…...
Spring Boot 2 和 Spring Boot 3 中使用 Spring Security 的区别
文章目录 Spring Boot 2 和 Spring Boot 3 中使用 Spring Security 的区别1. Jakarta EE 迁移2. Spring Security 配置方式的变化3. PasswordEncoder 加密方式的变化4. permitAll() 和 authenticated() 的变化5. 更强的默认安全设置6. Java 17 支持与语法提升7. PreAuthorize、…...
【数据结构与算法】 LeetCode：回溯
文章目录 回溯算法组合组合总和（Hot 100）组合总和 II电话号码的字母组合（Hot 100）括号生成（Hot 100）分割回文串（Hot 100）复原IP地址子集（Hot 100）全排列&…...
SpringBoot线程池的使用
SpringBoot线程池的使用 在现代Web应用开发中，特别是在使用Spring Boot框架时，合理使用线程池可以显著提高应用的性能和响应速度。线程池不仅能够减少线程创建和销毁的开销，还能有效地控制并发任务的数量，避免因线程过多而导致的…...
Neural Magic 发布 LLM Compressor：提升大模型推理效率的新工具
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
HttpServletRequest req和前端的关系，req.getParameter详细解释，req.getParameter和前端的关系
HttpServletRequest 对象在后端和前端之间起到了桥梁的作用，它包含了来自客户端的所有请求信息。通过 HttpServletRequest 对象，后端可以获取前端发送的请求参数、请求头、请求方法等信息，并根据这些信息进行相应的处理。以下是对 HttpServle…...
React-useEffect的使用
useEffect react提供的一个常用hook，用于在函数组件中执行副作用操作，比如数据获取、订阅或手动更改DOM。 基本用法： 接受2个参数： 一个包含命令式代码的函数（副作用函数）。一个依赖项数组，用…...
MySQL数据库与Informix：能否创建同名表？
MySQL数据库与Informix：能否创建同名表？ 一、MySQL数据库中的同名表创建1. 使用CREATE TABLE ... SELECT语句2. 使用CREATE TABLE LIKE语句3. 复制表结构并选择性复制数据4. 使用同义词（Synonym）二、Informix数据库中的同名表创建1. 使用不同所有者2. 使用不同模式3. 复制表…...
爬虫实战：采集知乎XXX话题数据
目录 反爬虫的本意和其带来的挑战目标实战开发准备代码开发发现问题1. 发现问题[01]2. 发现问题[02] 解决问题1. 解决问题[01]2. 解决问题[02] 最终结果 结语 反爬虫的本意和其带来的挑战 在这个数字化时代社交媒体已经成为人们表达观点的重要渠道，对企业来说&…...
大数据新视界 -- Hive 数据桶原理：均匀分布数据的智慧（上）（9/ 30）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
【小白学机器学习33】 大数定律python的 pandas.Dataframe 和 pandas.Series基础内容
目录 0 总结 0.1pd.Dataframe有一个比较麻烦琐碎的地方，就是引号 和括号 0.2 pd.Dataframe关于括号的原则 0.3 分清楚几个数据类型和对应的方法的范围 0.4 几个数据结构的构造关系 list → np.array(list) → pd.Series(np.array)/pd.Dataframe 1 python 里…...
【shodan】（五）网段利用
shodan基础（五） 声明：该笔记为up主 泷羽的课程笔记，本节链接指路。 警告：本教程仅作学习用途，若有用于非法行为的，概不负责。 nsa ip address range www.nsa.gov需科学上网 搜索网段 shodan s…...
LeetCode739. 每日温度（2024冬季每日一题 15）
给定一个整数数组 temperatures ，表示每天的温度，返回一个数组 answer ，其中 answer[i] 是指对于第 i 天，下一个更高温度出现在几天后。如果气温在这之后都不会升高，请在该位置用 0 来代替。 示例 1: 输入: temperatu…...
Node.js的http模块：创建HTTP服务器、客户端示例
新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战（第2版）（Web前端技术丛书）》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 要使用http模块，只需要在文件中通过require(http)引入即可。…...
加菲工具 - 好用免费的在线工具集合
加菲工具 https://orcc.online AI 工具 加菲工具 集合了目前主流的，免费可用的ai工具 文档处理 加菲工具 pdf转word、office与pdf互转等等工具都有链接 图片图标 加菲工具 统计了好用免费的在线工具 编码解码 加菲工具 base64编码解码、url编码解码、md5计算…...
.NET9 - 新功能体验（二）
书接上回，我们继续来聊聊.NET9和C#13带来的新变化。 01、新的泛型约束 allows ref struct 这是在 C# 13 中，引入的一项新的泛型约束功能，允许对泛型类型参数应用 ref struct 约束。 可能这样说不够直观，简单来说就是Span、ReadO…...
map和redis关系
Map 和 Redis 都是用于存储和管理数据的工具，但它们在用途、实现和应用场景上有所不同。下面详细解释 Map 和 Redis 之间的关系和区别。 1. Map 数据结构 定义 Map 是一种数据结构，用于存储键值对（key-value pairs）。每个键都是…...
《数据结构》学习系列——图（中）
系列文章目录 目录 图的遍历深度优先遍历递归算法堆栈算法 广度优先搜索 拓扑排序定义定理算法思想伪代码 关键路径基本概念关键活动有关量数学公式伪代码时间复杂性 图的遍历 从给定连通图的某一顶点出发，沿着一些边访问遍图中所有的顶点，且使每个顶点…...
探索Python的HTTP之旅：揭秘Requests库的神秘面纱
文章目录 **探索Python的HTTP之旅：揭秘Requests库的神秘面纱**第一部分：背景介绍第二部分：Requests库是什么？第三部分：如何安装Requests库？第四部分：Requests库的五个简单函数使用方法第五部分&…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...