┌─────────────────────────────────────────────────────────┐│  PC (Electron 桌面端)                                    ││  ┌──────────────┐    ┌────────────────────────────────┐ ││  │ 屏幕捕获模块  │───▶│  WebSocket Server (ws:8765)   │ ││  │ desktopCapturer│   │  JPEG帧压缩 + Base64 推送     │ ││  └──────────────┘    └────────────────────────────────┘ │└───────────────────────────────┬─────────────────────────┘                                │ 局域网 WebSocket┌───────────────────────────────▼─────────────────────────┐│  鸿蒙设备 (HarmonyOS Next)                               ││  ┌──────────────────────────────────────────────────┐   ││  │  ArkTS WebSocket Client + Image 渲染组件          │   ││  │  实时解码 JPEG → PixelMap → Image 组件渲染         │   ││  └──────────────────────────────────────────────────┘   │└─────────────────────────────────────────────────────────┘

mkdir electron-hmos-cast && cd electron-hmos-castnpm init -ynpm install electron wsnpm install --save-dev electron-builder

{  "main": "main.js",  "scripts": {    "start": "electron .",    "build": "electron-builder --win"  }}

// 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();});

// 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'),});

<!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>

{  "module": {    "requestPermissions": [      { "name": "ohos.permission.INTERNET" }    ]  }}

// 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();  }}

// 动态调整捕获分辨率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});

// 使用任务队列，避免帧积压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();}