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; 模糊匹…...
深度解析：UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构
深度解析：UI-TARS视觉语言模型驱动的自动化操作框架核心技术架构 【免费下载链接】UI-TARS-desktop The Open-Source Multimodal AI Agent Stack: Connecting Cutting-Edge AI Models and Agent Infra 项目地址: https://gitcode.com/GitHub_Trending/ui/UI-TARS-…...
想深耕网络安全行业，这些必备条件缺一不可
网络空间的攻防对抗日益激烈，网络安全已成为企业生存和国家安全的命脉，它负责构筑数字世界的坚固防线，保护核心资产与用户隐私免受侵害。 想要成为一名优秀的网络安全专家，除了敏锐的安全意识和高度的责任感，更需要锤…...
ZYNQ中断避坑指南：PL端信号线如何正确‘连线’到PS端处理函数？
ZYNQ中断系统深度解析：从硬件信号到软件响应的全链路实践 在嵌入式系统开发中，中断处理是实时响应的核心机制。对于ZYNQ这种集成了ARM处理器(PS)和可编程逻辑(PL)的异构计算平台，其中断系统既有传统处理器的特性，又具备FPGA灵活定…...
【C++】零基础入门 · 第 5 节：函数基础
前面四节我们写的代码都集中在 main 函数里。随着程序变复杂，所有逻辑堆在一起会越来越难维护。函数就是用来解决这个问题的——它把一段代码「打包」起来，取个名字，需要的时候调用就行。 1. 为什么需要函数 假设你需要在程序的不同地方打印一行分隔线： cout << &…...
基于MAX78000的边缘AI语音识别：从模型训练到嵌入式部署实战
1. 项目概述与核心思路最近在捣鼓一个挺有意思的小项目，我把它叫做“声控转向控制器”。简单来说，这玩意儿能听懂你说的几个特定单词，比如“左转”、“右转”、“前进”、“后退”，然后控制对应的LED灯亮起。你可能会想࿰…...
语音AI落地最后一公里卡点，PlayAI质量波动真相：采样率适配缺陷、韵律断层、情感衰减三大隐性陷阱
更多请点击： https://intelliparadigm.com 第一章：PlayAI语音质量评测报告总览 PlayAI语音质量评测体系基于客观指标与主观听感双维度构建，覆盖清晰度、自然度、时延、抗噪性及情感一致性五大核心能力。本报告汇总了在标准测试集（…...
终极Windows键盘重映射解决方案：SharpKeys完全指南
终极Windows键盘重映射解决方案：SharpKeys完全指南 【免费下载链接】sharpkeys SharpKeys is a utility that manages a Registry key that allows Windows to remap one key to any other key. 项目地址: https://gitcode.com/gh_mirrors/sh/sharpkeys 还在…...
Linux CPU性能优化：D状态和Z状态排查与处理
文章目录一、Linux进程五大基本状态1. 运行状态（R，Running / Runnable）2. 可中断睡眠状态（S，Interruptible Sleep）3. 不可中断睡眠状态（D，Uninterruptible Sleep）4. 停止…...
抖音批量下载神器：5分钟学会免费无水印视频下载
抖音批量下载神器：5分钟学会免费无水印视频下载 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖…...
当“画笔”变成“画笔”，世界便不再扁平：上海科技大学师玉娇团队 BevSplat 论文深度解读
用高斯画笔为地面图像“补上高度”，让卫星图片与街景的配对不再尴尬 想象一下这幅情境：一辆自动驾驶汽车在密集的城市楼群中行驶。GPS 信号被摩天大楼遮挡得断断续续，车辆根本无法准确知道自己的位置。于是，它需要一种备用方案&am…...