# hmElectronAI-hardware **Repository Path**: HMPC2Dtest/hmelectronai-hardware ## Basic Information - **Project Name**: hmElectronAI-hardware - **Description**: 本项目是基于 HarmonyOS Electron 框架开发的应用，展示了如何在鸿蒙系统上使用 Electron 框架新增实现获取硬件信息，ip地址，消息通知。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-06 - **Last Updated**: 2026-03-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 鸿蒙应用electron框架开发应用获取硬件信息 ## 项目简介 本项目是基于 HarmonyOS Electron 框架开发的应用，展示了如何在鸿蒙系统上使用 Electron 框架新增实现获取硬件信息，ip地址，消息通知。 ## AI提示词 by trae ### 自动化部署脚本优化 时间：2026-03-07 基于现有的 `run.sh` (macOS bash脚本) 和 `run_ps1` (Windows PowerShell脚本)，创建一个新的 `runhm.sh` zsh脚本，实现以下优化： 1. 包名自动获取： - 从 `AppScope/app.json5` 文件中自动读取 `bundleName` 字段 - 使用 grep 和 sed 命令提取包名 - 如果获取失败则报错退出 2. 主模块名称自动判断： - 从 `build-profile.json5` 文件中读取模块配置 - 提取 modules 数组中第一个模块的 name 字段 - 如果无法获取则默认使用 "electron" 3. 动态路径配置： - HAP 包路径使用主模块名称动态生成 - 格式：`$PROJECT_PATH/$MAIN_MODULE/build/default/outputs/default/$MAIN_MODULE-default-signed.hap` 4. 应用名称自动更新： - 检查 `AppScope/resources/base/element/string.json` 中的 app_name - 如果 app_name 为 "electron" 或 "entry"，则自动更新为项目文件夹名称 - 使用 sed 命令修改 JSON 文件 5. 配置信息显示： - 在脚本开始时显示项目配置信息 - 包括：包名、主模块、HAP路径 6. 兼容性改进： - 使用 zsh 脚本语法 - 保持与原 run.sh 相同的颜色输出和错误处理机制 - 支持随机临时目录名生成 ### 系统通知功能 时间：2026-03-06 在鸿蒙应用主页面"文件&剪切板操作"分类下添加一个带虚框的"系统通知"按钮。点击后打开新窗口，基于Electron框架实现系统通知功能： 1. 界面设计： - 子窗口标题为"系统通知工具" - 窗口尺寸 700×600，可调整大小 - 现代化渐变背景设计 - 顶部显示工具标题和图标 2. 通知发送功能： - 提供通知标题和内容输入框 - 支持快捷预设按钮（欢迎、提醒、成功、警告） - 点击"发送通知"按钮发送系统级通知 - 使用 Electron Notification API 显示通知 3. 通知历史： - 显示已发送的通知历史记录 - 最多保存10条历史记录 - 显示发送时间和内容摘要 4. 用户体验： - 发送通知时显示加载状态 - 操作成功/失败显示 Toast 提示 - 底部显示使用提示信息 - 支持清空输入内容 ### 硬件信息功能 时间：2026-03-06 在鸿蒙应用主页面"硬件相关"分类下添加"硬件信息"按钮。点击后打开新窗口，显示设备硬件信息： 1. 界面设计： - 子窗口标题为"硬件信息" - 窗口尺寸 800×700，可调整大小 - 现代化渐变背景设计 - 卡片式布局展示信息 2. 基础设备信息： - 设备型号 - 设备类型（如pc） - 系统版本 - 厂商信息 3. 存储信息： - 总内存 - 空闲内存 - 硬盘容量（总容量、已用、可用） 4. 系统信息： - 平台（如openharmony） - 架构（如arm64） - CPU核心数 - 主机名 5. 技术实现： - 使用 Node.js os 模块获取系统信息 - 使用 child_process 执行 df 命令获取硬盘信息 - 页面加载立即显示，无加载动画 - 支持刷新按钮重新获取信息 ### 图片尺寸调节功能 时间：2026-03-06 在鸿蒙应用主页面"媒体相关"分类下添加一个"图片尺寸调节"按钮。点击后弹出子窗口，基于Electron实现图片尺寸调节功能： 1. 界面设计： - 子窗口标题为"图片尺寸调节工具" - 窗口尺寸 900×750，可调整大小 - 现代化渐变背景设计，与截图风格一致 - 顶部显示工具标题和图标 2. 文件选择功能： - 提供"选择文件"按钮，支持选择 JPG、PNG、GIF、BMP、WebP 格式图片 - 显示当前选择的文件名 - 未选择文件时显示提示信息 3. 尺寸调节功能： - 提供宽度和高度输入框，可手动输入目标尺寸 - 支持"锁定比例"复选框，勾选后保持原始宽高比 - 修改宽度时自动计算高度（锁定比例时） - 修改高度时自动计算宽度（锁定比例时） - 输入框限制最小值为1，最大值为10000 4. 图片预览功能： - 实时显示调整后的图片预览 - 预览区域支持滚动查看大图 - 显示原始尺寸、调整后尺寸、缩放比例等信息 - 使用 Canvas 进行高质量图片缩放 5. 保存功能： - 提供"保存图片"按钮 - 弹出保存对话框，默认文件名包含目标尺寸 - 支持保存为 PNG 或 JPEG 格式 - 保存成功后显示提示信息 6. 用户体验： - 加载图片时显示加载动画 - 操作成功/失败显示 Toast 提示 - 底部显示使用提示信息 - 界面响应式，适配不同窗口大小 ### 摄像头调用测试功能 时间：2026-03-04 在鸿蒙应用的主页面中添加一个标题为"摄像头调用测试"的按钮组件。当用户点击该按钮时，应弹出一个子窗口（或模态窗口），该子窗口需用electron框架实现以下功能： 1. 摄像头预览功能：在子窗口中实时显示当前设备摄像头捕获的画面 2. 拍照功能： - 提供一个"拍照"按钮 - 点击后捕获当前摄像头画面并生成图片 - 实现图片保存功能，将生成的图片保存到设备本地文件管理系统 3. 视频录制功能： - 提供"录制"按钮，点击后开始录制视频 - 提供"结束"按钮，点击后停止录制并生成视频文件 - 实现视频保存功能，将录制的视频保存到设备本地文件管理系统 4. 权限处理： - 当用户首次点击"摄像头调用测试"按钮时，必须弹出摄像头权限申请对话框 - 只有在用户同意授予摄像头权限后，才能打开子窗口并启动摄像头预览 - 若用户拒绝权限，需显示友好提示信息，说明功能需要摄像头权限才能使用 ### 位置获取功能 时间：2026-03-05 修复位置获取功能在HarmonyOS环境下的超时问题(code 3)。具体实现要求如下： 1. 问题分析： - 浏览器定位API (navigator.geolocation) 在HarmonyOS环境下返回超时错误(code 3) - Electron BrowserWindow无法直接访问HarmonyOS原生位置服务 2. 解决方案： - 通过IPC桥接机制调用HarmonyOS原生位置服务 - 在main.js中添加get-harmonyos-location IPC处理器 - 尝试加载libadapter.so获取原生上下文 - 调用LocationAdapter.GetCurrentLocation获取位置信息 3. 前端适配： - 修改location.html使用IPC调用替代浏览器API - 通过ipcRenderer.invoke('get-harmonyos-location')获取位置 - 显示位置来源为"HarmonyOS原生定位服务" 4. 错误处理： - 处理适配器加载失败的情况 - 处理原生上下文不可用的情况 - 提供友好的错误提示信息 ### 屏幕录制功能 基于 #web `https://developer.huawei.com/consumer/cn/forum/topic/0201205407303759568` 提供的技术参考，使用Electron框架开发一个具备屏幕录制功能的鸿蒙应用。具体实现要求如下： 1. 应用主页设计： - 在现有主页界面中新增一个视觉突出的"屏幕录制"按钮 - 按钮需符合鸿蒙应用设计规范，包含适当的图标和文字说明 2. 子窗口功能实现： - 点击"屏幕录制"按钮后，打开一个独立的子窗口 - 子窗口标题固定为"屏幕录制器" - 窗口尺寸应设计为适合录制控制操作的合理大小 3. 屏幕录制功能： - 提供屏幕选择功能，允许用户选择需要录制的屏幕区域或特定窗口 - 实现"录制"按钮，点击后启动屏幕录制功能 - 实现"停止"按钮，点击后终止当前录制进程 - 录制过程中应显示录制状态指示和时长计时器 4. 视频保存功能： - 录制停止后，自动弹出文件保存对话框 - 支持用户自定义保存路径和文件名 - 视频文件格式应选择鸿蒙系统兼容的常用格式（如MP4） - 保存过程中需显示进度指示，完成后给予明确提示 5. 技术要求： - 确保屏幕录制功能在鸿蒙系统环境下稳定运行 - 优化录制性能，避免过度占用系统资源 - 实现必要的错误处理和用户提示 - 确保应用符合鸿蒙应用的安全规范和权限要求 ### Web文件下载功能 时间：2026-03-28 在鸿蒙应用主页面"文件类"分类下添加"web文件下载"按钮。点击后打开新窗口，显示外部网页供用户下载文件： 1. 界面设计： - 子窗口标题为"证监会年报下载" - 窗口尺寸 1000×700，可调整大小 - 使用webview标签加载外部URL 2. 网页显示功能： - 显示证监会年报下载页面 `https://www.csrc.gov.cn/csrc/c100024/common_list.shtml` - 支持网页内点击下载PDF文件 - 标题提示"下滑到网页下方可下载证监会年报pdf" 3. 技术实现： - 使用webview标签加载外部URL（HarmonyOS环境下直接loadURL会显示空白） - 创建本地HTML文件嵌入webview - 支持用户在网页内选择下载路径 ### 文件上传预览功能 时间：2026-03-28 在鸿蒙应用主页面"文件类"分类下添加"上传文件"按钮。点击后打开新窗口，支持文件上传和预览： 1. 界面设计： - 子窗口标题为"文件预览" - 窗口尺寸 800×600，可调整大小 - 现代化渐变背景设计 2. 文件选择功能： - 提供"选择文件"按钮 - 支持TXT文本文件格式 - 显示当前选择的文件名 3. 文件预览功能： - 使用IPC通信在主进程读取文件内容 - 在渲染进程显示文件内容 - 支持文本内容滚动查看 4. 技术实现： - HarmonyOS环境下渲染进程无法直接访问文件系统 - 通过IPC调用主进程进行文件读取 - 主进程返回文件内容给渲染进程显示 ### 打印预览功能 时间：2026-03-28 在鸿蒙应用主页面"打印操作"分类下添加打印预览功能。加载TXT文件后可进行打印设置和打印： 1. 界面设计： - 子窗口标题为"打印预览" - 窗口尺寸 1000×700，可调整大小 - 左侧打印设置面板，右侧预览区域 2. 文件加载功能： - 提供"选择文件"按钮 - 支持TXT文本文件格式 - 显示当前选择的文件名 3. 打印设置功能： - 纸张大小选择：A4、A5、Letter、Legal - 打印方向：纵向、横向 - 字体大小：10px - 24px - 页边距设置：上、下、左、右边距 - 行号显示开关 4. 打印预览功能： - 实时预览打印效果 - 模拟纸张显示 - 根据设置动态调整预览样式 5. 打印功能： - 提供"打印"按钮 - 调用window.print()进行打印 - 通过IPC在主进程执行打印操作 6. 技术实现： - 使用CSS @media print控制打印样式 - 根据纸张大小和方向动态调整预览区域 - 支持行号显示功能 ## AI生成代码统计 AI新增生成的代码行数累计：4955 项目新增代码行数累计（不含so等二进制）:4955 AI占比:100% 本次新增约1595行代码（web-download.html ~269行 + file-preview.html ~328行 + print-preview.html ~493行 + main.js新增 ~450行 + renderer.js新增 ~55行） ## 最新功能更新 时间：2026-03-28 - 在主页面新增"文件类"分类模块 - 新增"web文件下载"功能按钮，显示证监会年报下载网页 - 使用webview标签加载外部URL，解决HarmonyOS环境下直接loadURL显示空白问题 - 支持在网页内点击下载PDF文件 - 新增"上传文件"功能按钮，支持TXT文件上传和预览 - 通过IPC通信在主进程读取文件内容，解决渲染进程无法直接访问文件系统问题 - 在主页面新增"打印操作"分类模块 - 新增打印预览功能，支持加载TXT文件进行打印 - 提供打印设置：纸张大小、打印方向、字体大小、页边距、行号显示 - 实时预览打印效果，模拟纸张显示 - 调用window.print()实现打印功能 时间：2026-03-06 - 在"文件&剪切板操作"分类下新增带虚框的"系统通知"功能按钮 - 实现系统通知工具子窗口 - 支持发送自定义标题和内容的系统通知 - 提供快捷预设按钮：欢迎、提醒、成功、警告 - 显示通知历史记录（最多10条） - 使用 Electron Notification API 显示系统级通知 - 现代化渐变背景 UI 设计 - 在"硬件相关"分类下新增"硬件信息"功能按钮 - 实现硬件信息查看子窗口 - 显示基础设备信息：设备型号、设备类型、系统版本、厂商信息 - 显示存储信息：总内存、空闲内存、硬盘容量 - 显示系统信息：平台、架构、CPU核心数、主机名 - 使用 Node.js os 模块和 child_process 获取系统信息 - 页面加载立即显示，无加载动画 - 支持刷新按钮重新获取信息 - 在"媒体相关"分类下新增"图片尺寸调节"功能按钮 - 实现图片尺寸调节工具子窗口 - 支持选择 JPG、PNG、GIF、BMP、WebP 格式图片 - 提供宽度和高度输入框，可手动调节图片尺寸 - 支持"锁定比例"功能，保持原始宽高比避免图像变形 - 实时预览调整后的图片效果 - 显示原始尺寸、调整后尺寸、缩放比例等详细信息 - 支持保存调整后的图片为 PNG 或 JPEG 格式 - 使用 Canvas 进行高质量图片缩放 - 加载图片时显示加载动画 - 操作成功/失败显示 Toast 提示 - 现代化渐变背景 UI 设计 时间：2026-03-05 - 将"位置获取"按钮改为"获取IP地址"功能 - 实现IP地址获取功能，使用Node.js内置模块os.networkInterfaces() - 获取本地所有网络接口的IPv4地址 - 显示IP地址、子网掩码、MAC地址等完整信息 - 智能排序网络接口（优先显示以太网、WiFi接口） - 获取设备主机名 - 尝试获取公网IP地址（通过多个公共服务） - 跨平台兼容：支持Windows、macOS、Linux和鸿蒙PC平台 - 现代化UI设计，渐变色主题风格 ### 摄像头功能更新 时间：2026-03-04 - 新增"摄像头调用测试"功能按钮，与其他按钮保持一致的样式 - 点击按钮后打开独立的摄像头测试子窗口 - 实现摄像头实时预览功能，支持前置摄像头 - 实现拍照功能，可捕获当前画面并生成PNG图片 - 实现视频录制功能，支持录制摄像头画面和音频 - 录制过程中显示实时计时器和录制状态指示 - 拍照和录制完成后可在媒体库中预览 - 支持保存照片和视频文件到本地文件系统 - 实现摄像头权限申请对话框，首次使用时弹出 - 处理权限拒绝、设备无摄像头等异常情况 - 现代化深色主题UI设计，与屏幕录制器风格一致 ### 屏幕录制功能更新 - 新增"屏幕录制"功能按钮，与其他按钮保持一致的样式 - 点击按钮后打开独立的屏幕录制器子窗口 - 实现屏幕源选择功能，支持选择整个屏幕或特定窗口进行录制 - 使用desktopCapturer API获取可录制的屏幕源列表（通过主进程调用） - 使用MediaRecorder API实现视频录制功能 - 录制过程中显示实时计时器和录制状态指示 - 录制完成后可预览录制的视频内容 - 支持保存视频文件，可选择保存路径和文件名 - 支持WebM格式视频文件 - 修复desktopCapturer在渲染进程不可用的问题 - 将"选择录制源"提示改为"需要先选中录制源" - 优化了主界面按钮布局，使所有按钮整齐排列 ## 技术架构 - **HarmonyOS Electron 框架**：提供跨平台桌面应用支持 - **HarmonyOS**：华为鸿蒙操作系统 - **Web 技术**：HTML5 Canvas + CSS3 + JavaScript - **双模块设计**：electron 主模块 + web_engine 引擎模块 ## 功能特性 ### Web文件下载器 - 显示外部网页供用户下载文件 - 使用webview标签加载外部URL - 支持证监会年报下载页面 - 解决HarmonyOS环境下直接loadURL显示空白问题 - 支持在网页内点击下载PDF文件 ### 文件上传预览器 - 支持TXT文本文件上传和预览 - 通过IPC通信在主进程读取文件内容 - 解决渲染进程无法直接访问文件系统问题 - 支持文本内容滚动查看 - 现代化渐变背景 UI 设计 ### 打印预览器 - 支持加载TXT文件进行打印 - 提供打印设置：纸张大小、打印方向、字体大小、页边距、行号显示 - 实时预览打印效果，模拟纸张显示 - 支持A4、A5、Letter、Legal纸张大小 - 支持纵向、横向打印方向 - 字体大小可调节（10px - 24px） - 页边距可自定义设置 - 调用window.print()实现打印功能 ### 系统通知工具 - 发送自定义系统通知 - 快捷预设按钮（欢迎、提醒、成功、警告） - 通知历史记录管理（最多10条） - 使用 Electron Notification API - 加载状态和 Toast 提示 - 现代化渐变背景 UI 设计 - 支持清空输入内容 ### 硬件信息查看器 - 基础设备信息：设备型号、设备类型、系统版本、厂商信息 - 存储信息：总内存、空闲内存、硬盘容量 - 系统信息：平台、架构、CPU核心数、主机名 - 使用 Node.js os 模块获取系统信息 - 使用 child_process 执行系统命令获取硬盘信息 - 页面加载立即显示，无加载动画 - 支持刷新按钮重新获取信息 - 现代化渐变背景 UI 设计 ### 图片尺寸调节器 - 支持选择 JPG、PNG、GIF、BMP、WebP 等常见图片格式 - 提供宽度和高度输入框，可手动输入目标尺寸 - 支持"锁定比例"功能，保持原始宽高比 - 实时预览调整后的图片效果 - 显示原始尺寸、调整后尺寸、缩放比例等详细信息 - 使用 Canvas 进行高质量图片缩放 - 支持保存为 PNG 或 JPEG 格式 - 加载图片时显示加载动画 - 操作成功/失败显示 Toast 提示 - 现代化渐变背景 UI 设计 ### 摄像头测试器 - 完整的摄像头调用功能 - 支持实时预览摄像头画面 - 拍照功能，生成PNG格式图片 - 视频录制功能，支持音频录制 - 录制过程中显示计时器和状态指示 - 拍照和录制完成后可在媒体库预览 - 支持保存照片和视频到本地文件系统 - 摄像头权限申请对话框 - 异常处理（权限拒绝、设备无摄像头等） - 现代化深色主题UI设计 ### 屏幕录制器 - 完整的屏幕录制功能 - 支持选择整个屏幕或特定窗口进行录制 - 实时显示可录制源的缩略图预览 - 录制过程中显示计时器和状态指示 - 录制完成后可预览视频内容 - 支持保存为WebM格式视频文件 - 现代化深色主题UI设计 - 录制状态动画效果 ### 贪食蛇游戏 - 完整的贪食蛇游戏逻辑 - 现代化 UI 设计（渐变背景、发光效果） - 得分和最高分记录（使用 localStorage 保存） - 键盘控制（方向键 / WASD） - 移动端触控支持 - 暂停/继续功能 - 游戏结束检测和重新开始 - 随分数增加的游戏速度提升 ### 窗口管理 - 主窗口：应用主界面 - 子窗口：贪食蛇游戏窗口、屏幕录制器窗口、摄像头测试窗口 - 悬浮窗：始终置顶的小窗口 - IPC 进程间通信 ## 项目结构 ``` ohos_hap347tanshishe/ ├── electron/ # Electron 主应用模块 │ ├── src/main/ets/ # ETS 代码 │ │ ├── entryability/ # 入口能力 │ │ ├── pages/ # 页面 │ │ │ ├── Index.ets # 主页面 │ │ │ └── SubWindow.ets # 子窗口页面 │ │ └── process/ # 进程管理 │ └── build-profile.json5 # 构建配置 ├── web_engine/ # Web 引擎模块 │ ├── src/main/ets/ # ETS 适配器代码 │ │ ├── ability/ # 能力实现 │ │ ├── adapter/ # 平台适配器 │ │ │ └── SubWindowAdapter.ets # 子窗口适配器 │ │ └── components/ # 组件 │ └── src/main/resources/resfile/resources/app/ # Web 应用资源 │ ├── main.js # Electron 主进程 │ ├── index.html # 主页面 │ ├── renderer.js # 渲染进程 │ ├── snake.html # 贪食蛇游戏页面 │ ├── screen-recorder.html # 屏幕录制器页面 │ ├── camera.html # 摄像头测试页面 │ ├── image-resizer.html # 图片尺寸调节页面 │ ├── notification.html # 系统通知页面 │ ├── device-info.html # 硬件信息页面 │ ├── ip-location.html # IP地址获取页面 │ ├── web-download.html # Web文件下载页面 │ ├── file-preview.html # 文件上传预览页面 │ ├── print-preview.html # 打印预览页面 │ ├── child.html # 子窗口页面 │ └── float.html # 悬浮窗页面 ├── AppScope/ # 应用全局配置 ├── docs/ # 项目文档 └── readme.md # 项目说明文档 ## 开发环境 - DevEco Studio - HarmonyOS SDK - Node.js ## 使用说明 ### 运行应用 1. 使用 DevEco Studio 打开项目 2. 构建并运行应用 3. 在主窗口中点击相应功能按钮 4. 子窗口将弹出并显示对应功能界面 ### 游戏操作 | 操作 | 按键 | |------|------| | 向上移动 | ↑ 或 W | | 向下移动 | ↓ 或 S | | 向左移动 | ← 或 A | | 向右移动 | → 或 D | | 暂停/继续 | 空格键 | ## 核心代码说明 ### 摄像头权限申请（重要） 在 HarmonyOS Electron 框架中，摄像头权限申请需要遵循以下步骤： #### 1. 在 module.json5 中声明权限 **重要**：必须在 `web_engine/src/main/module.json5` 文件中声明权限： ```json { "module": { "name": "web_engine", "type": "har", "requestPermissions": [ { "name": "ohos.permission.CAMERA", "reason": "$string:camera_permission_reason", "usedScene": { "abilities": ["EntryAbility"], "when": "inuse" } } ] } } #### 2. 添加权限说明字符串 在 `web_engine/src/main/resources/base/element/string.json` 中添加： ```json { "string": [ { "name": "camera_permission_reason", "value": "用于摄像头拍照和视频录制功能" } ] } #### 3. 主进程请求权限 ```javascript // main.js const { systemPreferences } = require('electron'); // 请求摄像头权限 ipcMain.handle('request-camera-permission', async function() { try { var result = await systemPreferences.requestSystemPermission('camera'); // 重要：返回值可能是布尔值 true，而不是字符串 'granted' var granted = result === true || result === 'granted'; return { granted: granted, status: result }; } catch (error) { return { granted: false, status: 'error', error: error.message }; } }); // 打开权限设置页面 ipcMain.handle('open-permission-settings', async function() { systemPreferences.openApplicationInfoEntry(); }); #### 4. 渲染进程调用 ```javascript // renderer.js const { ipcRenderer } = require('electron'); async function requestCameraPermission() { var result = await ipcRenderer.invoke('request-camera-permission'); if (result.granted) { // 权限已授予，启动摄像头 await startCamera(); } else { // 权限被拒绝，引导用户去设置 ipcRenderer.invoke('open-permission-settings'); } } #### 常见错误 | 错误 | 原因 | 解决方案 | |------|------|---------| | `result === 'granted'` 判断失败 | 返回值是布尔值 `true` 而非字符串 | 使用 `result === true \|\| result === 'granted'` | | `getSystemPermissionStatus is not a function` | 该 API 不存在 | 直接使用 `requestSystemPermission` | | 权限声明不生效 | 声明位置错误 | 在 `web_engine` 模块而非 `electron` 模块声明 | ### 摄像头测试核心代码 启动摄像头：javascript cameraStream = await navigator.mediaDevices.getUserMedia({ video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' }, audio: true }); cameraVideo.srcObject = cameraStream; 拍照：javascript captureCanvas.width = settings.width || 1280; captureCanvas.height = settings.height || 720; const ctx = captureCanvas.getContext('2d'); ctx.drawImage(cameraVideo, 0, 0, captureCanvas.width, captureCanvas.height); captureCanvas.toBlob(function(blob) { // 保存图片 }, 'image/png'); 录制视频：javascript mediaRecorder = new MediaRecorder(cameraStream, { mimeType: 'video/webm;codecs=vp9,opus' }); mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunks.push(event.data); } }; mediaRecorder.start(1000); ### 屏幕录制器核心代码 获取屏幕源：javascript const sources = await desktopCapturer.getSources({ types: ['screen', 'window'], thumbnailSize: { width: 320, height: 180 } }); 开始录制：javascript const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: selectedSource.id, minWidth: 1280, maxWidth: 1920, minHeight: 720, maxHeight: 1080 } } }); mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' }); mediaRecorder.start(1000); 保存视频：javascript mediaRecorder.onstop = () => { recordedBlob = new Blob(recordedChunks, { type: 'video/webm' }); const url = URL.createObjectURL(recordedBlob); previewVideo.src = url; }; ### 创建子窗口 ```javascript function createCameraWindow() { cameraWindow = new BrowserWindow({ width: 950, height: 750, parent: mainWindow, title: '摄像头调用测试', resizable: true, webPreferences: { nodeIntegration: true, contextIsolation: false } }); cameraWindow.loadFile(path.join(__dirname, 'camera.html')); } ### IPC 通信 主进程监听：javascript ipcMain.on('open-camera', function() { createCameraWindow(); }); 渲染进程发送：javascript cameraBtn.addEventListener('click', () => { ipcRenderer.send('open-camera'); }); ### 游戏核心逻辑 ```javascript function update() { direction = { x: nextDirection.x, y: nextDirection.y }; const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; // 边界检测 if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) { gameOver(); return; } // 自身碰撞检测 for (let i = 0; i < snake.length; i++) { if (snake[i].x === head.x && snake[i].y === head.y) { gameOver(); return; } } snake.unshift(head); // 吃食物 if (head.x === food.x && head.y === food.y) { score += 10; spawnFood(); } else { snake.pop(); } } ## HarmonyOS Electron 窗口类型 | 窗口类型 | 说明 | 特性 | |---------|------|------| | 主窗 | 应用主窗口 | 带边框、可拖拽、可改变大小、任务栏显示 | | 子窗 | 弹出对话框等 | 带边框、不可拖拽、不可改变大小 | | 悬浮窗 | 始终在前台显示 | 带边框、不可拖拽、默认置顶 | ## 最佳实践 1. **窗口类型选择**： - 主窗口：使用默认配置 - 模态对话框：使用 subWindow + parent - 始终置顶：使用 floatWindow 2. **IPC 通信**： - 开发阶段使用 `nodeIntegration: true` 和 `contextIsolation: false` - 生产环境建议使用 `contextBridge` 进行安全通信 3. **错误处理**： - 始终在控制台添加日志输出 - 使用 try-catch 捕获可能的异常 - 检查窗口创建是否成功 4. **摄像头权限处理**： - 首次使用时弹出权限申请对话框 - 处理权限拒绝情况，显示友好提示 - 处理设备无摄像头等异常情况 ## 许可证 Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved. Use of this source code is governed by a BSD-style license. --- 版本: 1.1.0