Electron + 鸿蒙分布式投屏：PC 端一键推送画面到鸿蒙设备全实战
前言
你有没有遇到过这样的需求：PC 端 Electron 应用里的数据可视化大屏，能不能一键推送到旁边的鸿蒙平板？ 或者会议室里的 Electron 演示工具，想把某个窗口实时投屏到鸿蒙智慧屏？
今天这篇文章就来做这件事——Electron 桌面端 + 鸿蒙 ArkTS 端，通过局域网 WebSocket + 鸿蒙分布式软总线，实现 PC 画面实时推流到鸿蒙设备。
整体方案不依赖任何云服务，纯局域网低延迟，延迟实测 < 150ms。
技术架构总览
┌─────────────────────────────────────────────────────────┐│ PC (Electron 桌面端) ││ ┌──────────────┐ ┌────────────────────────────────┐ ││ │ 屏幕捕获模块 │───▶│ WebSocket Server (ws:8765) │ ││ │ desktopCapturer│ │ JPEG帧压缩 + Base64 推送 │ ││ └──────────────┘ └────────────────────────────────┘ │└───────────────────────────────┬─────────────────────────┘ │ 局域网 WebSocket┌───────────────────────────────▼─────────────────────────┐│ 鸿蒙设备 (HarmonyOS Next) ││ ┌──────────────────────────────────────────────────┐ ││ │ ArkTS WebSocket Client + Image 渲染组件 │ ││ │ 实时解码 JPEG → PixelMap → Image 组件渲染 │ ││ └──────────────────────────────────────────────────┘ │└─────────────────────────────────────────────────────────┘
核心技术点：
- Electron desktopCapturer
- OffscreenCanvas + toBlob
- ws 库
- ArkTS WebSocket
- image.createImageSource + PixelMap
第一部分：Electron 端实现
1.1 项目初始化
mkdir electron-hmos-cast && cd electron-hmos-castnpm init -ynpm install electron wsnpm install --save-dev electron-builder
package.json 关键配置：
{ "main": "main.js", "scripts": { "start": "electron .", "build": "electron-builder --win" }}
1.2 主进程 main.js
// main.jsconst { app, BrowserWindow, ipcMain, desktopCapturer, screen } = require('electron');const WebSocket = require('ws');const path = require('path');let mainWindow;let wss; // WebSocket Serverlet castInterval = null;function createWindow() { mainWindow = new BrowserWindow({ width: 900, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, } }); mainWindow.loadFile('index.html');}// 启动 WebSocket 推流服务function startCastServer(port = 8765) { if (wss) return; wss = new WebSocket.Server({ port }); console.log(`[Cast Server] 已启动，监听端口 {req.socket.remoteAddress}`); ws.on('close', () => console.log('[Cast] 设备断开')); }); // 每 33ms 推送一帧（约 30fps） castInterval = setInterval(async () => { if (wss.clients.size === 0) return; // 无连接时不捕获 try { const primaryDisplay = screen.getPrimaryDisplay(); const { width, height } = primaryDisplay.size; // 捕获屏幕 const sources = await desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: Math.floor(width / 2), height: Math.floor(height / 2) } }); if (!sources.length) return; // 获取 NativeImage 并转为 JPEG Buffer const jpegBuffer = sources[0].thumbnail.toJPEG(60); // 质量60，平衡画质与带宽 const base64Frame = jpegBuffer.toString('base64'); // 广播给所有连接的鸿蒙设备 const message = JSON.stringify({ type: 'frame', data: base64Frame, width: Math.floor(width / 2), height: Math.floor(height / 2), ts: Date.now() }); wss.clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); } catch (err) { console.error('[Cast] 捕获失败:', err.message); } }, 33);}// 停止推流function stopCastServer() { if (castInterval) { clearInterval(castInterval); castInterval = null; } if (wss) { wss.close(); wss = null; } console.log('[Cast Server] 已停止');}// IPC 通信：渲染进程控制推流ipcMain.handle('start-cast', (event, port) => { startCastServer(port || 8765); return { success: true, port: 8765 };});ipcMain.handle('stop-cast', () => { stopCastServer(); return { success: true };});ipcMain.handle('get-local-ip', () => { const { networkInterfaces } = require('os'); const nets = networkInterfaces(); for (const name of Object.keys(nets)) { for (const net of nets[name]) { if (net.family === 'IPv4' && !net.internal) { return net.address; } } } return '127.0.0.1';});app.whenReady().then(createWindow);app.on('window-all-closed', () => { stopCastServer(); if (process.platform !== 'darwin') app.quit();});
1.3 预加载脚本 preload.js
// preload.jsconst { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('castAPI', { startCast: (port) => ipcRenderer.invoke('start-cast', port), stopCast: () => ipcRenderer.invoke('stop-cast'), getLocalIP: () => ipcRenderer.invoke('get-local-ip'),});
1.4 渲染进程 index.html
<!DOCTYPE html><htmllang="zh-CN"><head> <metacharset="UTF-8" /> <title>Electron → 鸿蒙投屏控制台</title> <style> body { font-family: 'Segoe UI', sans-serif; padding: 30px; background: #1a1a2e; color: #eee; } h1 { color: #e94560; } .card { background: #16213e; border-radius: 12px; padding: 20px; margin: 16px 0; } .ip-box { font-size: 24px; font-weight: bold; color: #0f3460; background: #e94560; padding: 10px 20px; border-radius: 8px; display: inline-block; margin: 10px 0; } button { padding: 12px 28px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; margin: 6px; } #startBtn { background: #4caf50; color: white; } #stopBtn { background: #f44336; color: white; } #status { color: #aaa; margin-top: 10px; }</style></head><body> <h1>🖥️ Electron → 鸿蒙投屏</h1> <divclass="card"> <h3>📡 本机 IP（鸿蒙设备填写此地址）</h3> <divclass="ip-box"id="localIP">加载中...</div> </div> <divclass="card"> <h3>🎮 推流控制</h3> <buttonid="startBtn">▶ 开始推流</button> <buttonid="stopBtn">⏹ 停止推流</button> <pid="status">就绪</p> </div> <divclass="card"> <h3>📋 鸿蒙端连接地址</h3> <codeid="wsUrl"style="font-size:18px; color:#e94560;">ws://[IP]:8765</code> </div> <script> window.addEventListener('DOMContentLoaded', async () => { const ip = await window.castAPI.getLocalIP(); document.getElementById('localIP').textContent = ip; document.getElementById('wsUrl').textContent = `ws://{res.port}，等待鸿蒙设备连接...` : '❌ 启动失败'; }; document.getElementById('stopBtn').onclick = async () => { await window.castAPI.stopCast(); document.getElementById('status').textContent = '⏹ 已停止推流'; };</script></body></html>
第二部分：鸿蒙 ArkTS 端实现
2.1 创建项目 & 权限配置
在 DevEco Studio 中新建 HarmonyOS Next 工程，然后在 module.json5 中添加网络权限：
{ "module": { "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ] }}
2.2 核心页面 Index.ets
// entry/src/main/ets/pages/Index.etsimport webSocket from '@ohos.net.webSocket';import image from '@ohos.multimedia.image';import promptAction from '@ohos.promptAction';import { buffer } from '@kit.ArkTS';@Entry@Componentstruct ScreenCastPage { // WebSocket 实例 private ws: webSocket.WebSocket | null = null; @State pcIp: string = '192.168.1.100'; // PC 的局域网 IP @State port: string = '8765'; @State isConnected: boolean = false; @State pixelMap: image.PixelMap | null = null; @State fps: number = 0; @State latency: number = 0; private frameCount: number = 0; private fpsTimer: number = -1; build() { Column({ space: 12 }) { Text('🖥️ 鸿蒙投屏接收端') .fontSize(22) .fontWeight(FontWeight.Bold) .fontColor('#e94560') .margin({ top: 20 }) // IP 输入区域 Row({ space: 10 }) { TextInput({ placeholder: 'PC IP 地址', text: this.pcIp }) .layoutWeight(1) .onChange(v => this.pcIp = v) .borderRadius(8) TextInput({ placeholder: '端口', text: this.port }) .width(90) .onChange(v => this.port = v) .borderRadius(8) } .padding({ left: 16, right: 16 }) // 连接按钮 Row({ space: 12 }) { Button(this.isConnected ? '断开连接' : '连接 PC') .backgroundColor(this.isConnected ? '#f44336' : '#4caf50') .fontColor(Color.White) .borderRadius(8) .onClick(() => this.isConnected ? this.disconnect() : this.connect()) Text(`FPS: {this.latency}ms`) .fontSize(14) .fontColor('#aaa') } // 投屏显示区域 if (this.pixelMap) { Image(this.pixelMap) .width('100%') .aspectRatio(16 / 9) .borderRadius(12) .objectFit(ImageFit.Contain) .backgroundColor('#000') .padding({ left: 8, right: 8 }) } else { Column() { Text(this.isConnected ? '⏳ 等待画面...' : '📡 请连接 PC 端') .fontSize(16) .fontColor('#666') } .width('100%') .height(200) .justifyContent(FlexAlign.Center) .backgroundColor('#111') .borderRadius(12) .margin({ left: 8, right: 8 }) } } .width('100%') .height('100%') .backgroundColor('#1a1a2e') } // 建立 WebSocket 连接 private connect(): void { const url = `ws://{this.port}`; this.ws = webSocket.createWebSocket(); this.ws.on('open', () => { this.isConnected = true; this.startFpsCounter(); promptAction.showToast({ message: '✅ 已连接到 PC 投屏服务' }); }); this.ws.on('message', (err, data) => { if (err) return; this.handleFrame(data as string); }); this.ws.on('close', () => { this.isConnected = false; this.stopFpsCounter(); promptAction.showToast({ message: '连接已断开' }); }); this.ws.on('error', (err) => { promptAction.showToast({ message: `连接失败: ${err.message}` }); }); this.ws.connect(url, {}); } // 处理收到的帧数据 private async handleFrame(rawData: string): Promise<void> { try { const msg = JSON.parse(rawData) as { type: string; data: string; ts: number; width: number; height: number; }; if (msg.type !== 'frame') return; // 计算延迟 this.latency = Date.now() - msg.ts; this.frameCount++; // Base64 → ArrayBuffer → PixelMap const base64Str = msg.data; const byteArray = buffer.from(base64Str, 'base64').buffer; const imageSource = image.createImageSource(byteArray); const newPixelMap = await imageSource.createPixelMap({ desiredSize: { width: msg.width, height: msg.height } }); imageSource.release(); // 释放旧的 PixelMap 内存 if (this.pixelMap) { this.pixelMap.release(); } this.pixelMap = newPixelMap; } catch (e) { console.error('[Cast] 帧解析失败:', JSON.stringify(e)); } } // 断开连接 private disconnect(): void { this.ws?.close({}, () => { this.isConnected = false; this.stopFpsCounter(); }); this.ws = null; } // FPS 计数器 private startFpsCounter(): void { this.fpsTimer = setInterval(() => { this.fps = this.frameCount; this.frameCount = 0; }, 1000) as unknown as number; } private stopFpsCounter(): void { if (this.fpsTimer !== -1) { clearInterval(this.fpsTimer); this.fpsTimer = -1; } this.fps = 0; } aboutToDisappear(): void { this.disconnect(); }}
第三部分：性能优化技巧
3.1 Electron 端降低带宽
// 动态调整捕获分辨率const getOptimalSize = (clientCount) => { if (clientCount === 1) return { width: 960, height: 540 }; // 单设备：高清 if (clientCount <= 3) return { width: 640, height: 360 }; // 多设备：中等 return { width: 480, height: 270 }; // 超多设备：低清};// 在帧捕获时使用const size = getOptimalSize(wss.clients.size);const sources = await desktopCapturer.getSources({ types: ['screen'], thumbnailSize: size});
3.2 鸿蒙端防止 UI 阻塞
鸿蒙 ArkTS 中，图片解码是异步的，但频繁更新 @State 可能造成 UI 抖动。使用 requestAnimationFrame 模式：
// 使用任务队列，避免帧积压private frameQueue: string[] = [];private isRendering: boolean = false;private enqueueFrame(base64: string): void { // 只保留最新帧，丢弃积压帧 this.frameQueue = [base64]; if (!this.isRendering) { this.renderNextFrame(); }}private async renderNextFrame(): Promise<void> { if (this.frameQueue.length === 0) { this.isRendering = false; return; } this.isRendering = true; const frame = this.frameQueue.shift()!; await this.decodeAndRender(frame); this.renderNextFrame();}
第四部分：常见问题排查
| | |
|---|
| | Windows 防火墙放行 8765 TCP 入站 |
| | |
| | 每次赋新 PixelMap 前调用旧的 .release() |
| | disconnect 后将 this.ws = null |
| | |
总结
本文实现了一个完整的 Electron → 鸿蒙设备实时投屏方案：
- ✅ Electron 端：使用
desktopCapturer 捕获屏幕，通过 WebSocket 以 JPEG 帧推流 - ✅ 鸿蒙 ArkTS 端：WebSocket 接收帧，
image.createImageSource 解码，Image 组件实时渲染 - ✅ 低延迟：局域网实测 < 150ms，30fps 稳定运行
- ✅ 内存安全：正确 release PixelMap，防止鸿蒙端内存泄漏
这套方案可以扩展为：多设备同步投屏、指定窗口投屏、双向控制（鸿蒙触摸控制 PC），感兴趣的同学可以在评论区交流！
