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

利用浏览器录屏

news 2026/3/30 17:32:10

以下内容参考自网络

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
                
        <div class="left">
  <div id="startButton" class="button">Start</div>
  <h2>Preview</h2>
  <div class="video"><video id="preview" width="100%" height="auto" autoplay muted></video></div>
</div>

<div class="right">
  <div class="rightBtn">
    <div id="stopButton" class="button">Stop</div>
    <a id="downloadButton" class="button">Download</a>
  </div>
  <h2>Recording</h2>
  
  <div class="video"><video id="recording" width="160" height="120" controls></video></div>
</div>
        
        <script src="ffmpeg.min.js"></script>
        <script src="ffmpeg-core.js"></script>
        
        <script>
           let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let dataChunks = [];
let recorder;

const { createFFmpeg, fetchFile } = FFmpeg;
        //const message = document.getElementById('message');
        const ffmpeg = createFFmpeg({
            log: true,
            //progress: ({ ratio }) => {
            //    message.innerHTML = `完成率: ${(ratio * 100.0).toFixed(2)}%`;
            //},
        });

// 开始录制
function startRecording(stream, lengthInMS) {
  recorder = new MediaRecorder(stream);

  recorder.ondataavailable = (event) => {
    let data = event.data;
    dataChunks.push(data);
  };
  recorder.start(1000);
  console.log(recorder.state + " start to recording .....");
}

stopButton.addEventListener("click", () => {
  // close the recording
  //preview.srcObject.getTracks().forEach((track) => track.stop());
  recorder.stop();


  // Play recorded video
  let recordedBlob = new Blob(dataChunks, { type: "video/webm" });
  recording.src = URL.createObjectURL(recordedBlob);

  // Save download video， click the download button， you can download it
  downloadButton.href = recording.src;
  downloadButton.download = "RecordedVideo.webm";
});

startButton.addEventListener("click", () => {
  // get the stream
  navigator.mediaDevices
    //.getUserMedia({
    .getDisplayMedia({
      audio: true,
      video: true,
    })
    .then((stream) => {
      // set the stream to left video
      preview.srcObject = stream;
      // set the stream to <a> for download
      downloadButton.href = stream;
      // captureStream: which is streaming a real-time capture of the content being rendered in the media element. 
      // A MediaStream object  which can be used as a source for audio or video data by other media
      preview.captureStream =
        preview.captureStream || preview.mozCaptureStream;
      startRecording(preview.captureStream());
    })
    .catch((err) => {
      console.log("recording error: ", err);
    });
});

        </script>
    </body>
</html>

相关文章：

利用浏览器录屏

以下内容参考自网络 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title></title> </head> <body> <div class"left"> <di…...

编程日记 2024/11/24 18:25:39

python中的map、split、join函数的作用 =＞ ACM输入输出流

map(func,iter) lst_str ["1", "2", "3"] # 得到lst_num为[1, 2, 3] lst_num list(map(int, lst_str))如果想把一个列表里的所有元素批量地调用某一个函数&#xff0c;并映射得到一个新的列表&#xff08;原列表中元素相对位置不变&#xff0…...

编程日记 2024/11/24 18:24:38

Ubuntu20.04下安装向日葵

向日葵远程控制app官方下载 - 贝锐向日葵官网 下载Ununtu版的图形版本的安装deb包SunloginClient_15.2.0.63064_amd64.deb 直接执行 sudo dpkg -i SunloginClient_15.2.0.63064_amd64.deb 的话会报错: 如果在Ubuntu20.04里直接执行sudo apt install libgconf-2-4安装libgco…...

编程日记 2024/11/24 18:20:35

常用并发设计模式

避免共享的设计模式 不变性&#xff08;Immutability&#xff09;模式&#xff0c;写时复制&#xff08;Copy-on-Write&#xff09;模式&#xff0c;线程本地存储&#xff08;Thread-Specific Storage&#xff09;模式本质上都是为了避免共享。 1、使用时需要注意不变性模式…...

编程日记 2024/11/24 18:19:34

Redis Search系列 - 第七讲 Windows（CygWin）编译Friso

目录 一、背景二、安装CygWin三、编译Friso四、运行Friso五、Friso分词效果测试 一、背景 最近在做RedisSearch的中文分词效果调研&#xff0c;底层的中文分词插件使用的就是Friso&#xff0c;目前手里的Linux环境上yum镜像仓库有问题导致没法安装gcc&#xff0c;又急于验证Fr…...

编程日记 2024/11/24 18:17:32

利用Docker容器技术部署发布web应用程序

Docker是什么&#xff1f; docker 是一个开源的应用容器引擎&#xff0c;可以帮助开发者打包应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化&#xff0c;容器是完全使用沙箱机制&#xff0c;相互之间不会有任何…...

编程日记 2024/11/24 18:16:31

[免费]SpringBoot+Vue毕业设计论文管理系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue毕业设计论文管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue毕业设计论文管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 现代经济快节奏发展以及不断完善升级的信…...

编程日记 2024/11/24 18:15:30

BFS 算法专题（五）：BFS 解决拓扑排序

目录 1. 拓扑排序简介 1.1 有向无环图 (DAG 图) 1.2 AOV 网(顶点活动图) 1.3 拓扑排序 1.3.1 如何实现 2. 力扣实战应用 2.1 课程表 2.1.1 算法原理 2.1.2 算法代码 2.2 课程表 II 2.2.1 算法原理 2.2.2 算法代码 2.3 火星词典 (hard) (原剑指offer) 2.3.1 算法原理…...

编程日记 2024/11/24 18:13:28

【Mysql】开窗聚合函数----SUM,AVG, MIN,MAX

1、概念 在窗口中&#xff0c;每条记录动态地应用聚合函数&#xff08;如&#xff1a;SUM(),AVG(),MAX(),MIN(),COUNT(),&#xff09;可以动态计算在指定的窗口内的各种聚合函数值。 2、操作 以下操作将基于employee表进行操作。 sum() 进行sum的时候&#xff0c;没有order …...

编程日记 2024/11/24 18:10:24

java操作doc——java利用Aspose.Words操作Word文档并动态设置单元格合并

在实际工作中&#xff0c;如果业务线是管理类项目或者存在大量报表需要导出的业务时&#xff0c;可以借助第三方插件实现其对应功能。 尤其是需要对word文档的动态操作或者模板数据的定向合并&#xff0c;使用Aspose会相对来说容易一些&#xff0c;而且相关文档比较完整&#…...

编程日记 2024/11/24 18:09:23

探索 .NET 9 控制台应用中的 LiteDB 异步 CRUD 操作

本文主要是使用异步方式&#xff0c;体验 litedb 基本的 crud 操作。 LiteDB 是一款轻量级、快速且免费的 .NET NoSQL 嵌入式数据库&#xff0c;专为小型本地应用程序设计。它以单一数据文件的形式提供服务&#xff0c;支持文档存储和查询功能&#xff0c;适用于桌面应用、移动…...

编程日记 2024/11/24 18:07:21

《进程隔离机制：C++多进程编程安全的坚固堡垒》

在当今数字化时代&#xff0c;软件系统的安全性愈发成为人们关注的焦点。尤其是在 C多进程编程领域&#xff0c;如何确保进程间的安全交互与数据保护&#xff0c;是每一位开发者都必须面对的重要课题。而进程隔离机制&#xff0c;犹如一座坚固的堡垒&#xff0c;为 C多进程编程…...

编程日记 2024/11/24 18:04:17

构建无障碍的数字世界：深入探讨Web可访问性指南

文章目录 前言一、什么是Web可访问性&#xff1f;二、Web内容无障碍指南&#xff08;WCAG&#xff09;三、ARIA属性的应用四、实践中的Web可访问性结语 前言 在当今高度互联的世界里&#xff0c;互联网已成为人们日常生活不可或缺的一部分。然而&#xff0c;对于数百万残障人士…...

编程日记 2024/11/24 18:02:14

跨境出海安全：如何防止PayPal账户被风控？

今天咱们聊聊那些让人头疼的事儿——PayPal账户被风控。不少跨境电商商家反馈&#xff0c;我们只是想要安安静静地在网上做个小生意&#xff0c;结果不知道为什么&#xff0c;莫名其妙账户就被冻结了。 但其实每个封禁都是有原因的&#xff0c;今天就来给大家分享分享可能的原…...

编程日记 2024/11/24 17:58:07

学习日记_20241123_聚类方法（MeanShift）

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…...

编程日记 2024/11/24 17:56:04

AI编程和AI绘画哪个更适合创业？

AI编程和AI绘画各有优势&#xff0c;适合创业的方向取决于你的资源、兴趣、市场需求和技术能力。以下是两者的对比分析&#xff0c;帮助你选择更适合的方向&#xff1a; AI编程 优势 1、广泛应用领域&#xff1a; 涉及自动化、数据分析、自然语言处理、计算机视觉等多个领域&a…...

编程日记 2024/11/24 17:53:01

macOS 无法安装第三方app，启用任何来源的方法

升级新版本 MacOS 后&#xff0c;安装下载的软件时&#xff0c;不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)&#xff1a; 打开终端后&#xff0c;输入以下代码回车&#xff1a; …...

编程日记 2024/11/24 17:52:00

关于SpringBoot集成Kafka

关于Kafka Apache Kafka 是一个分布式流处理平台&#xff0c;广泛用于构建实时数据管道和流应用。它能够处理大量的数据流&#xff0c;具有高吞吐量、可持久化存储、容错性和扩展性等特性。 Kafka一般用作实时数据流处理、消息队列、事件架构驱动等 Kafka的整体架构 ZooKeeper:…...

编程日记 2024/11/24 17:48:58

4.STM32之通信接口《精讲》之IIC通信---软件实现IIC《深入浅出》面试必备！

接下正式&#xff0c;进入软件编写IIC时序了&#xff0c;并实现对MPU6050的控制&#xff0c;既然是软件实现&#xff0c;那么硬件方面&#xff0c;我仅需两根控制线即可&#xff0c;即&#xff1a;数据控制线SDA&#xff0c;时钟控制线SCL。&#xff08;人为软件层面定义的&…...

编程日记 2024/11/24 17:43:54

6G通信技术对比5G有哪些不同？

6G&#xff0c;即第六代移动通信技术&#xff0c;是5G之后的延伸&#xff0c;代表了一种全新的通信技术发展方向。与5G相比&#xff0c;6G在多个方面都有显著的不同和提升&#xff0c;以下是对6G通信技术及其与5G差异的详细分析&#xff1a; 一、6G的基本特点 更高的传输速率…...

编程日记 2024/11/24 17:41:51

Django CORS Headers 终极指南：10个企业级跨域架构设计技巧

Django CORS Headers 终极指南&#xff1a;10个企业级跨域架构设计技巧 【免费下载链接】django-cors-headers Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS) 项目地址: https://gitcode.com/gh_mirrors/dj/django-cors-he…...

编程新知 2026/3/30 16:21:12

自动驾驶仿真测试避坑手册：从Pattern参数选择到Comfort问题定位

自动驾驶仿真测试避坑手册&#xff1a;从Pattern参数选择到Comfort问题定位 在自动驾驶系统的开发流程中&#xff0c;仿真测试环节往往决定了算法迭代的效率和质量。不同于传统软件测试&#xff0c;自动驾驶仿真需要构建高度复杂的虚拟环境&#xff0c;模拟真实世界中的各种边缘…...

编程新知 2026/3/30 14:56:37

Wan2.2-I2V-A14B在微信小程序开发中的应用：实时图片转视频功能实现

Wan2.2-I2V-A14B在微信小程序开发中的应用&#xff1a;实时图片转视频功能实现 1. 引言 "一张照片能变成视频吗&#xff1f;"这是很多社交类小程序用户常有的疑问。想象一下&#xff0c;用户在电商小程序上传商品图片后&#xff0c;系统自动生成一段展示视频&#…...

编程新知 2026/3/30 14:52:36

RAGFlow图片回答避坑指南：为什么不用Base64和阿里云OSS？

RAGFlow图片回答架构设计&#xff1a;从Base64到容器化服务器的技术演进 当RAG系统需要处理包含图片的回答时&#xff0c;技术选型直接关系到系统的性能、安全性和可维护性。本文将深入探讨几种主流方案的优劣对比&#xff0c;并解析为何容器化图片服务器成为当前最优解。 1. 图…...

编程新知 2026/3/30 14:50:33

Pixel Dimension Fissioner 镜像深度配置：环境变量与启动参数详解

Pixel Dimension Fissioner 镜像深度配置&#xff1a;环境变量与启动参数详解 1. 为什么需要深度配置&#xff1f; 当你第一次部署Pixel Dimension Fissioner镜像时&#xff0c;默认设置可能已经能满足基本需求。但随着使用场景的复杂化&#xff0c;你会发现很多情况下需要根…...

编程新知 2026/3/30 14:42:19

Windows下OpenClaw安装全攻略：对接ollama的GLM-4.7-Flash模型

Windows下OpenClaw安装全攻略&#xff1a;对接ollama的GLM-4.7-Flash模型 1. 为什么选择OpenClawGLM-4.7-Flash组合 去年我在尝试自动化办公流程时&#xff0c;发现市面上的RPA工具要么功能臃肿&#xff0c;要么需要复杂的图形化编程。直到遇见OpenClaw这个开源智能体框架&am…...

编程新知 2026/3/30 14:32:16

Magika：AI驱动的文件类型检测神器，准确率高达99%+

Magika&#xff1a;AI驱动的文件类型检测神器&#xff0c;准确率高达99% 【免费下载链接】magika 项目地址: https://gitcode.com/GitHub_Trending/ma/magika 你是否曾经遇到过这样的情况&#xff1a;下载了一个文件却不知道它是什么格式&#xff1f;或者在处理大量文件…...

编程新知 2026/3/30 13:31:01

贾子公理体系全场景应用白皮书——从底层逻辑根服务器到数字政府、金融、AI等十大领域落地

GG3M贾子公理体系&#xff1a;一套底层公理贯通十大全场景应用落地副标题&#xff1a; 贾子公理体系全场景应用白皮书——从底层逻辑根服务器到数字政府、金融、AI等十大领域落地摘要&#xff1a; 贾子公理体系是GG3M项目的底层逻辑根服务器&#xff0c;以自洽可演绎的公理系统…...

编程新知 2026/3/30 12:04:05

零基础玩转BEYOND REALITY Z-Image：手把手教你搭建高精度文生图引擎

零基础玩转BEYOND REALITY Z-Image&#xff1a;手把手教你搭建高精度文生图引擎 1. 引言&#xff1a;为什么选择BEYOND REALITY Z-Image 在当今AI图像生成领域&#xff0c;BEYOND REALITY Z-Image以其卓越的写实表现力脱颖而出。这款基于Z-Image-Turbo底座和BEYOND REALITY S…...

编程新知 2026/3/30 11:35:56

告别龟速下载！一个Shell脚本搞定GFZ非潮汐大气负载数据（附站点坐标文件模板）

极速批量获取GFZ非潮汐大气负载数据的Shell脚本实战指南 在GNSS数据处理和地球物理研究中&#xff0c;获取高精度的非潮汐大气负载(NTAL)数据是分析站点位移的关键环节。德国地学研究中心(GFZ)作为全球权威机构&#xff0c;其提供的NTAL数据产品被广泛应用于科研和工程领域。然…...

编程新知 2026/3/30 11:27:49