利用浏览器录屏
以下内容参考自网络
<!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…...
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))如果想把一个列表里的所有元素批量地调用某一个函数，并映射得到一个新的列表（原列表中元素相对位置不变࿰…...
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…...
常用并发设计模式
避免共享的设计模式 不变性（Immutability）模式，写时复制（Copy-on-Write）模式，线程本地存储（Thread-Specific Storage）模式本质上都是为了避免共享。 1、使用时需要注意不变性模式…...
Redis Search系列 - 第七讲 Windows（CygWin）编译Friso
目录 一、背景二、安装CygWin三、编译Friso四、运行Friso五、Friso分词效果测试 一、背景 最近在做RedisSearch的中文分词效果调研，底层的中文分词插件使用的就是Friso，目前手里的Linux环境上yum镜像仓库有问题导致没法安装gcc，又急于验证Fr…...
利用Docker容器技术部署发布web应用程序
Docker是什么？ docker 是一个开源的应用容器引擎，可以帮助开发者打包应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux机器上，也可以实现虚拟化，容器是完全使用沙箱机制，相互之间不会有任何…...
[免费]SpringBoot+Vue毕业设计论文管理系统【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的SpringBootVue毕业设计论文管理系统，分享下哈。 项目视频演示 【免费】SpringBootVue毕业设计论文管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 现代经济快节奏发展以及不断完善升级的信…...
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 算法原理…...
【Mysql】开窗聚合函数----SUM,AVG, MIN,MAX
1、概念 在窗口中，每条记录动态地应用聚合函数（如：SUM(),AVG(),MAX(),MIN(),COUNT(),）可以动态计算在指定的窗口内的各种聚合函数值。 2、操作 以下操作将基于employee表进行操作。 sum() 进行sum的时候，没有order …...
java操作doc——java利用Aspose.Words操作Word文档并动态设置单元格合并
在实际工作中，如果业务线是管理类项目或者存在大量报表需要导出的业务时，可以借助第三方插件实现其对应功能。 尤其是需要对word文档的动态操作或者模板数据的定向合并，使用Aspose会相对来说容易一些，而且相关文档比较完整&#…...
探索 .NET 9 控制台应用中的 LiteDB 异步 CRUD 操作
本文主要是使用异步方式，体验 litedb 基本的 crud 操作。 LiteDB 是一款轻量级、快速且免费的 .NET NoSQL 嵌入式数据库，专为小型本地应用程序设计。它以单一数据文件的形式提供服务，支持文档存储和查询功能，适用于桌面应用、移动…...
《进程隔离机制：C++多进程编程安全的坚固堡垒》
在当今数字化时代，软件系统的安全性愈发成为人们关注的焦点。尤其是在 C多进程编程领域，如何确保进程间的安全交互与数据保护，是每一位开发者都必须面对的重要课题。而进程隔离机制，犹如一座坚固的堡垒，为 C多进程编程…...
构建无障碍的数字世界：深入探讨Web可访问性指南
文章目录 前言一、什么是Web可访问性？二、Web内容无障碍指南（WCAG）三、ARIA属性的应用四、实践中的Web可访问性结语 前言 在当今高度互联的世界里，互联网已成为人们日常生活不可或缺的一部分。然而，对于数百万残障人士…...
跨境出海安全：如何防止PayPal账户被风控？
今天咱们聊聊那些让人头疼的事儿——PayPal账户被风控。不少跨境电商商家反馈，我们只是想要安安静静地在网上做个小生意，结果不知道为什么，莫名其妙账户就被冻结了。 但其实每个封禁都是有原因的，今天就来给大家分享分享可能的原…...
学习日记_20241123_聚类方法（MeanShift）
前言 提醒： 文章内容为方便作者自己后日复习与查阅而进行的书写与发布，其中引用内容都会使用链接表明出处（如有侵权问题，请及时联系）。 其中内容多为一次书写，缺少检查与订正，如有问题或其他拓展…...
AI编程和AI绘画哪个更适合创业？
AI编程和AI绘画各有优势，适合创业的方向取决于你的资源、兴趣、市场需求和技术能力。以下是两者的对比分析，帮助你选择更适合的方向： AI编程 优势 1、广泛应用领域： 涉及自动化、数据分析、自然语言处理、计算机视觉等多个领域&a…...
macOS 无法安装第三方app，启用任何来源的方法
升级新版本 MacOS 后，安装下载的软件时，不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)： 打开终端后，输入以下代码回车： …...
关于SpringBoot集成Kafka
关于Kafka Apache Kafka 是一个分布式流处理平台，广泛用于构建实时数据管道和流应用。它能够处理大量的数据流，具有高吞吐量、可持久化存储、容错性和扩展性等特性。 Kafka一般用作实时数据流处理、消息队列、事件架构驱动等 Kafka的整体架构 ZooKeeper:…...
4.STM32之通信接口《精讲》之IIC通信---软件实现IIC《深入浅出》面试必备！
接下正式，进入软件编写IIC时序了，并实现对MPU6050的控制，既然是软件实现，那么硬件方面，我仅需两根控制线即可，即：数据控制线SDA，时钟控制线SCL。（人为软件层面定义的&…...
6G通信技术对比5G有哪些不同？
6G，即第六代移动通信技术，是5G之后的延伸，代表了一种全新的通信技术发展方向。与5G相比，6G在多个方面都有显著的不同和提升，以下是对6G通信技术及其与5G差异的详细分析： 一、6G的基本特点 更高的传输速率…...
Python｜GIF 解析与构建（5）：手搓截屏和帧率控制
目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制 一、引言 二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
日常一水C
多态 言简意赅：就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O…...
Linux中《基础IO》详细介绍
目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改，实现简单cat命令 输出信息到显示器，你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...