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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/402029.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

idea付费插件激活

以下idea付费插件均可激活 获取链接&#xff1a;https://web.52shizhan.cn

【Qt开发】QtCharts图表 在ui上添加QChartView控件并进行绘图配置

【Qt开发】QtCharts图表 在ui上添加QChartView控件并进行绘图配置 文章目录 控件安装和模块导入在ui上添加QChartView控件QChartView图表配置附录&#xff1a;C语言到C的入门知识点&#xff08;主要适用于C语言精通到Qt的C开发入门&#xff09;C语言与C的不同C中写C语言代码C语…

Datawhale X 魔搭 AI夏令营 Task1 从零入门AI生图原理实践笔记

赛题内容 参赛者需在可图Kolors模型的基础上训练LoRA模型&#xff0c;生成无限风格&#xff0c;如水墨画风格、水彩风格、赛博朋克风格、日漫风格… 基于LoRA模型生成8张图片组成连贯故事&#xff0c;故事内容可自定义&#xff1b;基于8图故事&#xff0c;评估LoRA风格的美感度…

基于 Android studio 实现停车场管理系统--原创

目录 一、项目演示 二、开发环境 三、项目页面 四、项目详情 五、项目完整源码 一、项目演示 二、开发环境 三、项目详情 1.启动页 这段代码是一个简单的Android应用程序启动活动&#xff08;Activity&#xff09;&#xff0c;具体功能如下&#xff1a; 1. **延迟进入登…

【OpenCV】window 下 VS Code 配置OpenCV

文章目录 前言直接使用OpenCV 编译好的库自己编译OpenCVVS Code 安装MinGW下载下载Cmake编译OpenCV VS Code 运行cv程序VSCode配置运行CV程序 参考文章 前言 在网上找了些资料&#xff0c;大致得出VS Code开发OpenCV的环境配置流程&#xff0c;如下 安装VS Code安装MinGW安装…

【三维重建】Pixel-GS:三维高斯泼溅的像素感知的梯度密度控制(去除浮点,提升精度)

项目&#xff1a;https://pixelgs.github.io/ 标题&#xff1a;Pixel-GS: Density Control with Pixel-aware Gradient for 3D Gaussian Splatting 来源&#xff1a;香港大学&#xff1b;腾讯AI Lab 文章目录 摘要一、前言二、相关工作1.新视图合成2.基于点的辐射场3.Floater 的…

论文写作新神器!10款可以写论文的人工智能软件

在当今快速发展的数字时代&#xff0c;人工智能&#xff08;AI&#xff09;技术已经渗透到各个领域&#xff0c;包括学术研究和论文写作。为了帮助学者和学生提高写作效率和质量&#xff0c;市场上涌现了许多优秀的AI写作工具。本文将详细介绍10款可以写论文的人工智能软件&…

图像文本擦除无痕迹!复旦提出EAFormer:最新场景文本分割新SOTA!(ECCV`24)

文章链接&#xff1a;https://arxiv.org/pdf/2407.17020 git链接&#xff1a;https://hyangyu.github.io/EAFormer/ 亮点直击 为了在文本边缘区域实现更好的分割性能&#xff0c;本文提出了边缘感知Transformer&#xff08;EAFormer&#xff09;&#xff0c;该方法明确预测文…

CPU飙升 怎么定位问题

传统的方法 【top】 查看所有进程占系统CPU的排序&#xff0c;定位是哪个进程搞的鬼。PID那一列就是进程号。 【top -Hp pid】 定位进程中使用 CPU 最高的线程tid 【printf ‘0x%x’ tid】 线程 tid 转化 16 进制,例如printf ‘0x%x’ 11882 得到16进制的 0x2e6a 【jstack…

PX4-Autopolite linux环境下源码编译中遇到的一些问题及相应解决办法

最近在做一个PX4飞控移植的项目&#xff0c;第一次接触到PX4源码&#xff0c;真的是感觉编译起来非常的麻烦&#xff0c;下面我将介绍几个新手比较容易踩坑的点。 &#xff08;我都踩了ㄒ-ㄒ&#xff09; 1.PX4源码要用git clone 从github上克隆来&#xff0c;千万不要直接在g…

java SE--集合

1.Collection接口 Collection接口是List&#xff0c;Set&#xff0c;Queue接口的父接口&#xff0c;里面提供了子类的常用方法&#xff1b; List储存的是可以重复的&#xff0c;有序的数据&#xff0c;子类是arrayList&#xff08;数组结构&#xff09;和linkedList&#xff…

Mapreduce_Distinct数据去重

MapReduce中数据去重 输入如下的数据&#xff0c;统计其中的地址信息&#xff0c;并对输出的地址信息进行去重 实现方法&#xff1a;Map阶段输出的信息K2为想要去重的内容&#xff0c;利用Reduce阶段的聚合特点&#xff0c;对K2进行聚合&#xff0c;去重。在两阶段中&#xff…

24/8/15算法笔记 强化学习贪婪算法,UCB,汤普森算法

以老虎机为例介绍各算法 import numpy as np#每个老虎机的中奖概率&#xff0c;0-1之间均匀分布 probs np.random.uniform(size10)#生成一个数组&#xff0c;其中的元素是从均匀分布&#xff08;也称为矩形分布&#xff09;中随机抽取的。均匀分布意味着每个数出现的概率是相…

微服务架构的未来发展趋势

文章目录 摘要引言当前发展趋势ServerlessService MeshAIOps 未来可能出现的挑战代码示例微服务架构示例 QA环节小结未来展望参考资料 摘要 微服务架构在软件开发中已经成为主流&#xff0c;但随着市场需求和技术环境的快速变化&#xff0c;微服务架构也在不断演进。本文将分析…

如何为 Nextcloud 配置自动数据库备份 - 应用程序

自动数据库备份模块简化了生成数据库计划备份的过程。这些备份可以存储在各种位置&#xff0c;包括本地驱动器、FTP 服务器、SFTP 服务器、Dropbox、Google Drive、OneDrive、NextCloud 和 Amazon S3 云存储。用户还可以选择启用自动删除过期备份的功能。此外&#xff0c;用户可…

MyBatis-Plus 进阶之条件构造器Wrapper和常用接口

目录 1.wrapper 介绍 1.1什么是 wrapper 2.QueryWrapper 2.1测试前的准备 2.2例1&#xff1a;组装查询条件 2.3例2&#xff1a;组装排序条件 2.4例3&#xff1a;组装删除条件 2.5例4&#xff1a;条件的优先级 2.6例5&#xff1a;组装 select 子句 2.7例6&#xff1a;…

[Linux][OS][信号的保存和处理]

目录 信号的处理 1. 在内核中的表示 2. 相关概念 3. 信号集操作函数 4.sigprocmask 5.sigpending 信号的捕捉 重谈地址空间 信号的处理 1. 在内核中的表示 普通信号&#xff0c;多次产生只会记录一次 信号范围 [1,31]&#xff0c;每一种信号都要有自己的一种处理方式…

【ElementUI】el-table值相同时合并行

效果图&#xff1a; 大致思路&#xff1a;el-table里添加合并行或列的计算方法span-method <el-table :data"tableList" :span-method"objectSpanMethod"> // 在获取到列表数据tableData后调用此方法 handleTableData(tableData) {let rowSpanArr …

Java JDVC编程

1、Java的数据库编程&#xff1a;JDBC JDBC&#xff08;Java Database Connectivity&#xff09;是Java中用来与数据库进行交互的一种标准API&#xff08;应用程序编程接口&#xff09;。它为开发人员提供了一种统一的方式来访问各种类型的数据库管理系统&#xff08;DBMS&…

【深度学习实践】基于深度学习的图像去雾算法-ChaIR-实践

本文介绍一个去雾算法ChaIR的使用方法&#xff0c;可以完成图像去雾&#xff0c;也可以用于图像去雨、去噪音等任务。本文不涉及论文原理&#xff0c;只包含源代码的跑通和使用。 先展示一下效果&#xff1a; 原图去雾 论文&#xff1a;Exploring the potential of channel …