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; 模糊匹…...
React Native 开发环境搭建（全平台详解）
React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...