当前位置： 首页 > news >正文

webp 网页如何录屏？

news 2026/3/27 11:11:41

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

先看下效果：

 具体实现代码：


<!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格式的文件。以下是代码的逐行解释：

  1. <!DOCTYPE html>：文档类型声明，告诉浏览器这是一个HTML5文档。
  2. <html lang="zh-CN">：HTML根元素，lang="zh-CN"指定了页面内容的主要语言是简体中文。
  3. <head>：包含了文档的元数据，如字符集、视口设置和标题。
  4. <meta charset="UTF-8">：设置页面的字符编码为UTF-8。
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在移动设备上有更好的响应式表现。
  6. <title>WebP </title>：设置页面的标题。
  7. <body>：包含了页面的可见内容。
  8. <h1> WebP </h1>：页面上的一个标题。
  9. <button id="startRecording">Start </button>：一个按钮，用于开始录制屏幕。
  10. <button id="stopRecording" disabled>Stop</button>：一个按钮，用于停止录制屏幕，初始状态为禁用。
  11. <a id="downloadLink" style="display:none;">dowload file </a>：一个链接，用于下载录制的视频文件，初始状态为隐藏。
  12. <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 网页如何录屏？

工作中正好研究到了一点&#xff1a;记录下这里&#xff1a; 先看下效果&#xff1a; 具体实现代码&#xff1a; &#xfeff; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程日记 2024/11/26 20:24:02

丹摩征文活动｜实现Llama3.1大模型的本地部署

文章目录 1.前言2.丹摩的配置3.Llama3.1的本地配置4. 最终界面 丹摩 1.前言 Llama3.1是Meta 公司发布的最新开源大型语言模型&#xff0c;相较于之前的版本&#xff0c;它在规模和功能上实现了显著提升&#xff0c;尤其是最大的 4050亿参数版本&#xff0c;成为开源社区中非常…...

编程日记 2024/11/26 20:21:58

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、…...

编程日记 2024/11/26 20:19:56

【数据结构与算法】 LeetCode：回溯

文章目录 回溯算法组合组合总和&#xff08;Hot 100&#xff09;组合总和 II电话号码的字母组合&#xff08;Hot 100&#xff09;括号生成&#xff08;Hot 100&#xff09;分割回文串&#xff08;Hot 100&#xff09;复原IP地址子集&#xff08;Hot 100&#xff09;全排列&…...

编程日记 2024/11/26 20:17:54

SpringBoot线程池的使用

SpringBoot线程池的使用 在现代Web应用开发中&#xff0c;特别是在使用Spring Boot框架时&#xff0c;合理使用线程池可以显著提高应用的性能和响应速度。线程池不仅能够减少线程创建和销毁的开销&#xff0c;还能有效地控制并发任务的数量&#xff0c;避免因线程过多而导致的…...

编程日记 2024/11/26 20:15:53

Neural Magic 发布 LLM Compressor：提升大模型推理效率的新工具

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/11/26 20:14:52

HttpServletRequest req和前端的关系，req.getParameter详细解释，req.getParameter和前端的关系

HttpServletRequest 对象在后端和前端之间起到了桥梁的作用&#xff0c;它包含了来自客户端的所有请求信息。通过 HttpServletRequest 对象&#xff0c;后端可以获取前端发送的请求参数、请求头、请求方法等信息&#xff0c;并根据这些信息进行相应的处理。以下是对 HttpServle…...

编程日记 2024/11/26 20:13:51

React-useEffect的使用

useEffect react提供的一个常用hook&#xff0c;用于在函数组件中执行副作用操作&#xff0c;比如数据获取、订阅或手动更改DOM。 基本用法&#xff1a; 接受2个参数&#xff1a; 一个包含命令式代码的函数&#xff08;副作用函数&#xff09;。一个依赖项数组&#xff0c;用…...

编程日记 2024/11/26 20:12:50

MySQL数据库与Informix：能否创建同名表？

MySQL数据库与Informix：能否创建同名表？ 一、MySQL数据库中的同名表创建1. 使用CREATE TABLE ... SELECT语句2. 使用CREATE TABLE LIKE语句3. 复制表结构并选择性复制数据4. 使用同义词（Synonym）二、Informix数据库中的同名表创建1. 使用不同所有者2. 使用不同模式3. 复制表…...

编程日记 2024/11/26 20:10:49

爬虫实战：采集知乎XXX话题数据

目录 反爬虫的本意和其带来的挑战目标实战开发准备代码开发发现问题1. 发现问题[01]2. 发现问题[02] 解决问题1. 解决问题[01]2. 解决问题[02] 最终结果 结语 反爬虫的本意和其带来的挑战 在这个数字化时代社交媒体已经成为人们表达观点的重要渠道&#xff0c;对企业来说&…...

编程日记 2024/11/26 20:08:47

大数据新视界 -- Hive 数据桶原理：均匀分布数据的智慧（上）（9/ 30）

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2024/11/26 20:03:41

【小白学机器学习33】 大数定律python的 pandas.Dataframe 和 pandas.Series基础内容

目录 0 总结 0.1pd.Dataframe有一个比较麻烦琐碎的地方&#xff0c;就是引号 和括号 0.2 pd.Dataframe关于括号的原则 0.3 分清楚几个数据类型和对应的方法的范围 0.4 几个数据结构的构造关系 list → np.array(list) → pd.Series(np.array)/pd.Dataframe 1 python 里…...

编程日记 2024/11/26 19:57:35

【shodan】（五）网段利用

shodan基础&#xff08;五&#xff09; 声明&#xff1a;该笔记为up主 泷羽的课程笔记&#xff0c;本节链接指路。 警告&#xff1a;本教程仅作学习用途&#xff0c;若有用于非法行为的&#xff0c;概不负责。 nsa ip address range www.nsa.gov需科学上网 搜索网段 shodan s…...

编程日记 2024/11/26 19:55:32

LeetCode739. 每日温度（2024冬季每日一题 15）

给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 示例 1: 输入: temperatu…...

编程日记 2024/11/26 19:53:26

Node.js的http模块：创建HTTP服务器、客户端示例

新书速览|Vue.jsNode.js全栈开发实战-CSDN博客 《Vue.jsNode.js全栈开发实战&#xff08;第2版&#xff09;&#xff08;Web前端技术丛书&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 要使用http模块&#xff0c;只需要在文件中通过require(http)引入即可。…...

编程日记 2024/11/26 19:51:22

加菲工具 - 好用免费的在线工具集合

加菲工具 https://orcc.online AI 工具 加菲工具 集合了目前主流的&#xff0c;免费可用的ai工具 文档处理 加菲工具 pdf转word、office与pdf互转等等工具都有链接 图片图标 加菲工具 统计了好用免费的在线工具 编码解码 加菲工具 base64编码解码、url编码解码、md5计算…...

编程日记 2024/11/26 19:49:19

.NET9 - 新功能体验（二）

书接上回&#xff0c;我们继续来聊聊.NET9和C#13带来的新变化。 01、新的泛型约束 allows ref struct 这是在 C# 13 中&#xff0c;引入的一项新的泛型约束功能&#xff0c;允许对泛型类型参数应用 ref struct 约束。 可能这样说不够直观&#xff0c;简单来说就是Span、ReadO…...

编程日记 2024/11/26 19:45:13

map和redis关系

Map 和 Redis 都是用于存储和管理数据的工具&#xff0c;但它们在用途、实现和应用场景上有所不同。下面详细解释 Map 和 Redis 之间的关系和区别。 1. Map 数据结构 定义 Map 是一种数据结构&#xff0c;用于存储键值对&#xff08;key-value pairs&#xff09;。每个键都是…...

编程日记 2024/11/26 19:43:09

《数据结构》学习系列——图（中）

系列文章目录 目录 图的遍历深度优先遍历递归算法堆栈算法 广度优先搜索 拓扑排序定义定理算法思想伪代码 关键路径基本概念关键活动有关量数学公式伪代码时间复杂性 图的遍历 从给定连通图的某一顶点出发&#xff0c;沿着一些边访问遍图中所有的顶点&#xff0c;且使每个顶点…...

编程日记 2024/11/26 19:38:03

探索Python的HTTP之旅：揭秘Requests库的神秘面纱

文章目录 **探索Python的HTTP之旅&#xff1a;揭秘Requests库的神秘面纱**第一部分&#xff1a;背景介绍第二部分&#xff1a;Requests库是什么&#xff1f;第三部分&#xff1a;如何安装Requests库&#xff1f;第四部分&#xff1a;Requests库的五个简单函数使用方法第五部分&…...

编程日记 2024/11/26 19:36:59

STP根桥选举避坑指南：华为交换机优先级设置的那些门道

STP根桥选举避坑指南&#xff1a;华为交换机优先级设置的那些门道 在网络工程师的日常工作中&#xff0c;生成树协议&#xff08;STP&#xff09;的配置看似简单&#xff0c;却暗藏玄机。特别是根桥选举这个基础环节&#xff0c;稍有不慎就会导致网络性能下降甚至环路问题。本文…...

编程新知 2026/3/27 10:29:45

DeOldify图像上色服务技术解析：其背后的卷积神经网络架构

DeOldify图像上色服务技术解析&#xff1a;其背后的卷积神经网络架构 老照片上色&#xff0c;听起来像是个魔法。你可能见过一些黑白照片瞬间变得色彩鲜艳的对比图&#xff0c;感觉既神奇又有点不可思议。DeOldify就是这样一个能把“魔法”变成现实的开源工具&#xff0c;它能…...

编程新知 2026/3/27 10:19:34

Qwen3.5-4B-Claude-Opus惊艳效果：编译原理词法分析器状态转换图生成

Qwen3.5-4B-Claude-Opus惊艳效果&#xff1a;编译原理词法分析器状态转换图生成 1. 模型能力展示&#xff1a;从代码到状态转换图 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF模型在编译原理领域展现了令人惊艳的代码理解与可视化能力。当输入词法分析器代码时&…...

编程新知 2026/3/27 10:15:30

Django 学习日记（补充1）| 彻底吃透：自定义 JWT 认证 + 全局登录中间件

大家好&#xff0c;这是我 Django 学习日记的第三篇。上一篇我们把路由、反向解析、DRF 自动路由、媒体文件、跨域全部讲明白了。今天我们进入整个项目最核心、最安全、最关键的部分&#xff1a;用户登录认证体系&#xff08;在进入视图前的一篇补充文章&#xff09;。本文将从…...

编程新知 2026/3/27 8:16:30

学术PDF处理神器：OpenClaw+GLM-4.7-Flash自动提取关键结论

学术PDF处理神器&#xff1a;OpenClawGLM-4.7-Flash自动提取关键结论 1. 为什么需要自动化文献处理&#xff1f; 作为一名经常需要阅读大量学术文献的研究者&#xff0c;我发现自己花费在整理文献上的时间甚至超过了实际阅读时间。每次下载几十篇PDF后&#xff0c;手动提取目…...

编程新知 2026/3/27 7:38:14

RetinaFace效果展示：高精度人脸检测与关键点定位案例

RetinaFace效果展示&#xff1a;高精度人脸检测与关键点定位案例 1. RetinaFace模型核心能力解析 RetinaFace作为当前最先进的人脸检测算法之一&#xff0c;在精度和效率方面都达到了业界领先水平。这个基于ResNet50构建的模型能够同时完成三项关键任务&#xff1a; 人脸检测…...

编程新知 2026/3/27 6:27:13

vLLM-v0.17.1在专利分析系统中的应用：权利要求生成与比对

vLLM-v0.17.1在专利分析系统中的应用&#xff1a;权利要求生成与比对 1. 技术背景与需求分析 专利分析是知识产权领域的重要工作&#xff0c;其中权利要求书的生成与比对是核心环节。传统方法依赖人工撰写和比对&#xff0c;效率低下且一致性难以保证。随着大语言模型技术的发…...

编程新知 2026/3/27 5:26:46

测试用例设计-XMind

&#x1f680; 一、XMind 用例设计核心思路&#x1f449; 和传统Excel不同&#xff0c;XMind强调&#xff1a;以“功能模块”为主干 以“用户场景”为分支 以“测试点”为叶子节点&#x1f449; 本质结构&#xff1a;模块 → 场景 → 用例点 → 具体测试数据/预期&#x1f4cc;…...

编程新知 2026/3/27 4:38:01

MoveBase导航实战：Livox MID360与FAST-LIO+AMCL混合定位的调优与避障策略

1. Livox MID360雷达与FAST-LIO的实战配置 第一次用Livox MID360雷达时&#xff0c;我被它的非重复扫描模式惊艳到了——这种固态激光雷达能实现360无死角覆盖&#xff0c;特别适合狭小空间导航。但要让它在MoveBase系统中稳定工作&#xff0c;需要先解决几个关键配置问题。 雷…...

编程新知 2026/3/27 3:47:33

Mysql是怎么加锁的？

原文地址https://www.xiaolincoding.com/mysql/lock/how_to_lock.html#%E4%BB%80%E4%B9%88-sql-%E8%AF%AD%E5%8F%A5%E4%BC%9A%E5%8A%A0%E8%A1%8C%E7%BA%A7%E9%94%81 我只是精简一下做个记录 这篇汇总将基于 MySQL 8.0 的 InnoDB 引擎&#xff0c;在 可重复读&#xff08;Repe…...

编程新知 2026/3/27 3:11:02