Electron：摄像头录制和屏幕录制
摄像头录制
main.js
const { app, BrowserWindow} = require('electron')let mainWin = null
const createWindow = () => {mainWin = new BrowserWindow({width: 800,height: 600,title: '自定义菜单',webPreferences: {// 允许渲染进程使用nodejsnodeIntegration: true,// 允许渲染进程使用nodejscontextIsolation: false,}})mainWin.loadFile('index.html')mainWin.webContents.openDevTools()
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title>
</head><body><button id="openCamera">打开摄像头</button><button id="start">开始录制</button><button id="stop">停止录制</button><button id="play">播放</button><video src="" id="originVideo"></video><video src="" id="playVideo" width="400" height="500"></video><script>const openCamera = document.querySelector("#openCamera")const start = document.querySelector("#start")const stop = document.querySelector("#stop")const play = document.querySelector("#play")const originVideo = document.querySelector("#originVideo")const playVideo = document.querySelector("#playVideo")let stream;let blobData = []let recordInstance;openCamera.addEventListener("click", () => {handleOpenCamera()})start.addEventListener("click", () => {startRecord()})stop.addEventListener("click", () => {recordInstance && recordInstance.stop()})play.addEventListener("click", () => {const blob = new Blob(blobData, { type: 'video/mp4' })const videoUrl = URL.createObjectURL(blob)playVideo.src = videoUrl;playVideo.play()})// 打开摄像头const handleOpenCamera = async () => {stream = await navigator.mediaDevices.getUserMedia({video: {width: 400, height: 500},audio: true})console.log("handleOpenCamera stream", stream);originVideo.srcObject = streamoriginVideo.play()}//开始录制const startRecord = () => {recordInstance = new MediaRecorder(stream, { mimeType: 'video/webm' })console.log("startRecord stream", stream);if (recordInstance) {recordInstance.start()recordInstance.ondataavailable = function (e) {blobData.push(e.data)}recordInstance.onstop = function (e) {console.log("startRecord onstop");}}}</script></body></html>
屏幕录制
main.js
const { app, BrowserWindow, desktopCapturer, session } = require('electron')let mainWin = null
const createWindow = () => {mainWin = new BrowserWindow({width: 1000,height: 800,title: '自定义菜单',webPreferences: {// 允许渲染进程使用nodejsnodeIntegration: true,// 允许渲染进程使用nodejscontextIsolation: false,}})session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {// Grant access to the first screen found.callback({ video: sources[0], audio: 'loopback' })})})mainWin.loadFile('index.html')mainWin.webContents.openDevTools()
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})- index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title>
</head><body><button id="openCamera">打开摄像头</button><button id="screenRecord">屏幕录制</button><button id="start">开始录制</button><button id="stop">停止录制</button><button id="play">播放录制的视频</button><video src="" id="originVideo"></video><video src="" id="playVideo" width="400" height="500"></video><script>const openCamera = document.querySelector("#openCamera")const screenRecord = document.querySelector("#screenRecord")const start = document.querySelector("#start")const stop = document.querySelector("#stop")const play = document.querySelector("#play")const originVideo = document.querySelector("#originVideo")const playVideo = document.querySelector("#playVideo")let stream;let blobData = []let recordInstance;// 打开摄像头openCamera.addEventListener("click", () => {handleOpenCamera()})// 屏幕录制screenRecord.addEventListener("click", () => {handleScreenRecord()})// 开始录制start.addEventListener("click", () => {startRecord()})// 停止录制stop.addEventListener("click", () => {recordInstance && recordInstance.stop()})// 播放录制的视频play.addEventListener("click", () => {const blob = new Blob(blobData, { type: 'video/mp4' })const videoUrl = URL.createObjectURL(blob)playVideo.src = videoUrl;playVideo.play()})// 打开摄像头const handleOpenCamera = async () => {stream = await navigator.mediaDevices.getUserMedia({video: {width: 400, height: 500},audio: true})console.log("handleOpenCamera stream", stream);originVideo.srcObject = streamoriginVideo.play()}// 屏幕录制const handleScreenRecord = async () => {stream = await navigator.mediaDevices.getDisplayMedia({video: {width: 400, height: 500},// video: true,audio: true})console.log("handlescreenRecord stream", stream);originVideo.srcObject = streamoriginVideo.play()}//开始录制const startRecord = () => {recordInstance = new MediaRecorder(stream, { mimeType: 'video/webm' })console.log("startRecord stream", stream);if (recordInstance) {recordInstance.start()recordInstance.ondataavailable = function (e) {blobData.push(e.data)}recordInstance.onstop = function (e) {console.log("startRecord onstop");}}}</script></body></html>
相关文章：
Electron：摄像头录制和屏幕录制
摄像头录制 main.js const { app, BrowserWindow} require(electron)let mainWin null const createWindow () > {mainWin new BrowserWindow({width: 800,height: 600,title: 自定义菜单,webPreferences: {// 允许渲染进程使用nodejsnodeIntegration: true,// 允许渲…...
【uniapp】vue3+vite配置tailwindcss
安装 npm install autoprefixer tailwindcss uni-helper/vite-plugin-uni-tailwind -Dautoprefixer ：自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。uni-helper/vite-plugin-uni-tailwind: 将 Tailwind CSS 框架集成到使用 Vite 作…...
从源码到应用：医疗陪诊系统与在线问诊小程序开发详解
在数字化医疗时代，医疗陪诊系统与在线问诊小程序的开发成为了医疗机构和技术公司关注的焦点。接下来，小编将与您一同深入了解。 一、医疗陪诊系统的核心功能 医疗陪诊系统旨在为患者提供更贴心的医疗服务，通过专业人员陪同患者完成就医过程。…...
mysql数据库中decimal数据类型比较大小
在MySQL中，DECIMAL数据类型用于存储精确的数值，它非常适合用于需要高精度计算的场景，如金融应用。当我们需要在MySQL数据库中比较DECIMAL类型数据的大小时，可以使用标准的比较运算符，如>, <, >, <, 和 &l…...
掌控库存，简化管理 — InvenTree 开源库存管理系统
InvenTree ：简化您的库存管理，让效率和控制力触手可及。- 精选真开源，释放新价值。 概览 InvenTree，一款专为精细化库存管理而设计的开源系统，以其高效和灵活性在众多库存管理工具中脱颖而出。它以Python和Django框架…...
Linux---项目自动化构建工具-make/Makefile
一、背景 会不会写makefile，从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数，其按类型、功能、模块分别放在若干个目录中，makefile定义了一系列的 规则来指定，哪些文件需要先编译，哪些文件…...
嘉立创EDA个人学习笔记1（PCB板介绍）
前言 本篇文章属于嘉立创EDA的学习笔记，来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记，只能做参考，细节方面建议观看视频，肯定受益匪浅。 嘉立创EDA-PCB设计零基础入门课程（54集全）_…...
（转）Restful接口设计（1）
.representational：代表性的 URI（Universal Resouce Identifier）：Universal ：普遍的;共同的。Identifier：标识符。统一资源标识符。 31-RESTful接口介绍-02_哔哩哔哩_bilibili 31-RESTful接口介绍-03_哔哩…...
Python进阶之3D图形
Python进阶之3D图形 在数据可视化中，2D图形通常可以满足大多数需求。然而，对于一些复杂的数据或分析，3D图形可以提供更多的视角和洞察。在Python中，使用 Matplotlib 和 Plotly 等库可以轻松创建各种3D图形。本文将介绍如何使用这…...
机器学习深度学习中的搜索算法浅谈
机器学习&深度学习中的搜索算法浅谈 搜索算法是计算机科学中的核心算法，用于在各种数据结构（如数组、列表、树、图等）中查找特定元素或信息。这些算法不仅在理论上具有重要意义，还在实际应用中扮演着关键角色。本文将详细探讨…...
基于IMX8M_plus+FPGA+AI监护仪解决方案
监护仪是一种以测量和控制病人生理参数，并可与已知设定值进行比较，如果出现超标可发出警报的装置或系统。 （1）监护仪主要采集测量人体生理参数，心电、血压、血氧、体温等需要采集处理大量的数据，系统需要多…...
)
仿RabbitMq实现简易消息队列正式篇(路由匹配篇)
TOC 目录 路由匹配模块 代码展示 路由匹配模块 决定了一条消息是否能够发布到指定的队列 在每个队列根交换机的绑定信息中，都有一个binding_key（在虚拟机篇有说到）这是队列发布的匹配规则 在每条要发布的消息中，都有一个rout…...
一套完整的NVR网络硬盘录像机解决方案和NVR程序源码介绍
随着网络技术的发展，视频数据存储的需求激增，促使硬盘录像机（DVR）逐渐演变为具备网络功能的网络视频录像机（NVR）。NVR，即网络视频录像机，负责网络视音频信号的接入、存储、转发、解码…...
2024年人工智能固态硬盘采购容量预计超过45 EB
根据TrendForce发布的最新市场报告，人工智能（AI）服务器客户在过去两个季度显著增加了对企业级固态硬盘（SSD）的订单。为了满足AI应用中不断增长的SSD需求，上游供应商正在加速工艺升级，并计划在20…...
Java的反射原理
反射允许程序在运行时检查或修改其类、接口、字段和方法的行为。反射主要通过java.lang.reflect包中的类和接口实现，它主要用于以下目的： 在运行时分析类的能力：通过反射，可以在运行时检查类的结构，比如它的方法、构造…...
vue.config.js 配置
vue.config.js 文件是 Vue CLI 项目中的全局配置文件，它允许你以 JavaScript 的形式来配置构建选项，而不是通过命令行参数或者 .vue-clirc 的 JSON 格式。 官方文档: https://cli.vuejs.org/zh/config/#全局-cli-配置 基础配置 publicPath 设置构建好的…...
C ++ 也可以搭建Web？高性能的 C++ Web 开发框架 CPPCMS + MySQL 实现快速入门案例
什么是CPPCMS？ CppCMS 是一个高性能的 C Web 开发框架，专为构建快速、动态的网页应用而设计，特别适合高并发和低延迟的场景。其设计理念类似于 Python 的 Django 或 Ruby on Rails，但针对 C 提供了更细粒度的控制和更高效的性能。…...
Taos 常用命令工作笔记（二）
最近测试创建一个涛思的数据库和一堆表进行测试，通过json配置文件配置字段的类型、名称等，程序通过解析json文件的配置，动态创建数据库的表。 其中表字段为驼峰结构的规则命名，创建表也是成功的，插入的测试数据也是成功…...
idea安装二进制文本阅读插件
引言 在软件开发过程中，有时需要查看二进制文件的内容以调试或分析问题。虽然有许多专用工具可以处理这类任务，但直接在 IDE 内集成这些功能无疑更加方便高效。本文将介绍如何在 IntelliJ IDEA 2023中安装和配置一个名为 BinEd的插件，以及如…...
MySQL 常用 SQL 语句大全
1. 基本查询 查询所有记录和字段 SELECT * FROM table_name; 查询特定字段 SELECT column1, column2 FROM table_name; 查询并限制结果 SELECT column1, column2 FROM table_name LIMIT 10; 条件查询 SELECT column1, column2 FROM table_name WHERE condition; 模糊匹…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
Python Einops库：深度学习中的张量操作革命
Einops（爱因斯坦操作库）就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库，用类似自然语言的表达式替代了晦涩的API调用，彻底改变了深度学习工程…...
[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG
TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码：HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心，直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法，涵盖基础规则、优化算法和容错机制： 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则： 大尺寸/重量积木在下…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中，压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言，提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据（33个指标）
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据！该数据集源自2025年4月发表于《地理学报》的论文成果…...
PydanticAI快速入门示例
参考链接：https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...