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库的五个简单函数使用方法第五部分&…...
Python 爬虫从入门到（不）入狱学习笔记
爬虫的流程：从入门到入狱 1 获取网页内容1.1 发送 HTTP 请求1.2 Python 的 Requests 库1.2 实战：豆瓣电影 scrape_douban.py 2 解析网页内容2.1 HTML 网页结构2.2 Python 的 Beautiful Soup 库 3 存储或分析数据（略） 一般爬虫的基…...
IDEA优雅debug
目录 引言一、断点分类🎄1.1 行断点1.2 方法断点1.3 属性断点1.4 异常断点1.5 条件断点1.6 源断点1.7 多线程断点1.8 Stream断点 二、调试动作✨三、Debug高级技巧🎉3.1 watch3.2 设置变量3.3 异常抛出3.4 监控JVM堆大小3.5 数组过滤和筛选 引言 使用ID…...
wp the_posts_pagination 与分类页面搭配使用
<ul> <?php while( have_posts() ) : the_post(); <li > <a href"<?php the_permalink(); ?>"> <?php xizhitbu_get_thumbnail(thumb-pro); ?> </a> <p > <a href&q…...
大数据-231 离线数仓 - DWS 层、ADS 层的创建 Hive 执行脚本
点一下关注吧！！！非常感谢！！持续更新！！！ Java篇开始了！ 目前开始更新 MyBatis，一起深入浅出！ 目前已经更新到了： Hadoop࿰…...
【Python】分割秘籍！掌握split()方法，让你的字符串处理轻松无敌！
在Python开发中，字符串处理是最常见也是最基础的任务之一。而在众多字符串操作方法中，split()函数无疑是最为重要和常用的一个。无论你是Python新手，还是经验丰富的开发者，深入理解并熟练运用split()方法，都将大大提升…...
免费实用在线AI工具集合 - 加菲工具
免费在线工具-加菲工具 https://orcc.online/ 在线录屏 https://orcc.online/recorder 时间戳转换 https://orcc.online/timestamp Base64 编码解码 https://orcc.online/base64 URL 编码解码 https://orcc.online/url Hash(MD5/SHA1/SHA256…) 计算 https://orcc.online/h…...
正则表达式灾难：重新认识“KISS原则”的意义
RSS Feed 文章标题整理 微积分在生活中的应用与思维启发 捕鹿到瞬时速度的趣味探索 微积分是一扇通往更广阔世界的门，从生活中学习思维的工具。 数据库才是最强架构 你还在被“复杂架构”误导吗？ 把业务逻辑写入数据库，重新定义简单与效率。…...
eNSP-缺省路由配置
缺省路由是一种特殊的静态路由，其目的地址为0.0.0.0，子网掩码为0.0.0.0。 1.拓扑图搭建 2.配置路由器 AR2 <Huawei>sys #进入系统视图 [Huawei]ip route-static 0.0.0.0 0.0.0.0 192.168.3.2 #设置缺省路由 [Huawei]q #返回上一层 <Huawe…...
solr 远程命令执行 (CVE-2019-17558)
漏洞描述 Apache Velocity是一个基于Java的模板引擎，它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目，旨在确保Web应用程序在表示层和业务逻辑层之间的隔离（即MVC设计模式）。 Apa…...
STM32端口模拟编码器输入
文章目录 前言一、正交编码器是什么？二、使用步骤2.1开启时钟2.2配置编码器引脚 TIM3 CH1(PA6) CH2 (PA7)上拉输入2.3.初始化编码器时基2.4 初始化编码器输入2.5 配置编码器接口2.6 开启定时器2.7获取编码器数据 三、参考程序四、测试结果4.1测试方法4.2串口输出结果…...