Webrtc+Electron+Vue同屏涂鸦功能（二）Electron 端代码title: Webrtc + Elec

---

title: Webrtc + Electron + Vue 同屏涂鸦功能（二）Electron 端代码 date: 2024-09-27 tags: [WebRTC, Electron, Vue, 涂鸦, 实时通信, 同屏] categories: [技术分享]

Webrtc+Electron+Vue 同屏涂鸦功能（二）Electron端

还是老样子，图片来自于chatGpt

上次我们讲了被控端的网页实现，今天我们来深入分析 Electron 端的代码。这个功能实现主要基于 WebRTC 实时通信来完成屏幕共享，并通过 Vue 和 Electron 实现同屏涂鸦功能。 放一个视频看一下

项目搭建

技术栈

• 框架：Vue 3 + Vite + Electron + Electron-builder + Livekit 该部分可以参考官方文档或网上已有的教程，不再详细赘述。下面直接开始上代码。

目录结构

--electron -- ipcMain.ts // 主要用于渲染进程和主进程之间的通信 -- main.ts // 创建 Electron 实例 -- icons // 存放应用图标 -- output // 打包生成的文件 -- src // 页面和相关逻辑 -- routers // 路由配置 -- styles // 样式文件 -- views // 视图页面

环境依赖

确保你已经安装了项目所需的依赖，运行以下命令初始化项目：

    npm install vue livekit-client electron electron-builder vite

核心功能分析

Electron 主进程代码

import { app, BrowserWindow, systemPreferences, screen, ipcMain, Tray, Menu, dialog } from 'electron';
import setIpc from './ipcMain'
import path from 'path'
let mainWindow: BrowserWindow | null = null
try {
    setIpc.setDefaultMain()
    const createdWindow = () => {
        // 确保 screen 模块可用，并获取显示器信息
        const primaryDisplay = screen.getPrimaryDisplay();

        if (!primaryDisplay || !primaryDisplay.bounds) {
            console.error('Error: Unable to get primary display bounds');
            return;
        }

        const { width, height } = primaryDisplay.workAreaSize;
        mainWindow = new BrowserWindow({
            x: 0,
            y: 0,
            width: width,
            height: height,
            frame: false,
            transparent: true, // 透明主窗口
            alwaysOnTop: true, // 主窗口始终在最上层
            skipTaskbar: true, // 主窗口不出现在任务栏中
            // fullscreenable: true, // 允许全屏
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
                backgroundThrottling: false,
            }
        })
      
        if (process.env.VITE_DEV_SERVER_URL) {
            mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
        } else {
            mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html'));
        }
        mainWindow.setIgnoreMouseEvents(true)
  
    
        app.on('window-all-closed', () => {
            mainWindow = null
            app.quit()
        })
        app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
            //允许私有证书
            event.preventDefault()
            callback(true)
        })
        
        app.commandLine.appendSwitch('ignore-certificate-errors')

        app.whenReady().then(async () => {
            
            createdWindow()
        })
        // 解决9.x跨域异常问题
        app.disableHardwareAcceleration();
        app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors')

        app.commandLine.appendArgument('no-sandbox')
        app.commandLine.appendArgument('disable-setuid-sandbox')
        app.commandLine.appendArgument('disable-web-security')
        app.commandLine.appendArgument('ignore-certificate-errors')

        app.commandLine.appendSwitch('disable-site-isolation-trials')
        app.commandLine.appendSwitch('enable-quic')

        app.on('activate', () => {
            if (BrowserWindow.getAllWindows().length === 0) {
                createdWindow();
            }
        });
    }


} catch (error) {

}

ipcMain.ts屏幕分享的代码：这里可以做很多的拓展。

 /**
 * @description 屏幕分享
 */
ipcMain.handle('screen_share', async (event) => {
    return new Promise((resolve, reject) => {
        desktopCapturer
            .getSources({ fetchWindowIcons: true, types: ['screen'] })
            .then((sources) => {
                let screenListWithPNG = sources.map((item) => ({
                    ...item,
                    appIconPNG: item.appIcon ? item.appIcon.toDataURL() : '',
                    thumbnailPNG: item.thumbnail.toDataURL(),
                }))
                resolve(screenListWithPNG)
            })
            .catch((error) => {
                console.error('获取屏幕和窗口源时出错：', error)
                reject(error)
            })
    })
})

主要的代码就是创建一个透明的并且覆盖桌面的窗口

注意事项

• fullscreenable: true 不要加，会导致窗口黑屏

• mainWindow.setIgnoreMouseEvents(true) 要加上，事件穿透，不影响被控端操作自己的电脑

• alwaysOnTop: true 这个要加上，要让Electron 的窗口一直位于最上方（Linux、Window）在别的窗口最大化的时候，Electron的窗口也可以一直位于最上层，Mac系统上面不行

渲染页面代码

涂鸦功能与 Canvas 的初始化

首先，在 Vue 的 template 部分创建一个 canvas 画布，用于接收并显示涂鸦内容。

<template> 
    <div class="container"> 
        <canvas ref="fullscreenCanvas" class="fullscreen-canvas"></canvas> 
    </div> 
</template>

通过 onMounted 钩子函数初始化 canvas，设置宽高为全屏尺寸，并根据设备的像素比来缩放内容。

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const fullscreenCanvas = ref<HTMLCanvasElement | null>(null)

const initCanvas = () => {
    const canvas = fullscreenCanvas.value
    if (canvas) {
        const context = canvas.getContext('2d')
        if (context) {
            const ratio = window.devicePixelRatio || 1
            canvas.width = window.innerWidth * ratio
            canvas.height = window.innerHeight * ratio
            context.scale(ratio, ratio)
            context.clearRect(0, 0, canvas.width, canvas.height)
        }
    }
}

onMounted(() => {
    initCanvas()
})
</script>

这样，当页面加载时，canvas 会被初始化并准备好进行绘制操作。

WebRTC 房间连接与屏幕共享

在 WebRTC 方面，我们使用了 Livekit 的 Room 类来管理房间的连接和通信。以下是初始化 WebRTC 房间的代码。

import { Room, Track, RoomEvent, setLogExtension } from 'livekit-client'
import { ipcRenderer } from 'electron'

let room: Room | null = null

const liveKitRoomInit = async () => {
    try {
        room = new Room({
            adaptiveStream: false,
            dynacast: false,
            publishDefaults: { videoCodec: 'h264' },
            disconnectOnPageLeave: true,
        })

        room.on(RoomEvent.TrackSubscribed, handleTrackSubscribed)
            .on(RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed)
            .on(RoomEvent.ParticipantConnected, updateParticipants)
            .on(RoomEvent.ParticipantDisconnected, updateParticipants)
            .on(RoomEvent.DataReceived, handleDataReceived)

        // 连接到 WebRTC 房间
        await room.connect(webrtcWss.value, webrtcToken.value)

        // 开始屏幕共享
        const screenId = await ipcRenderer.invoke('screen_share')
        startSharing(screenId[0].id)
    } catch (error) {
        console.error('连接房间失败:', error)
    }
}

liveKitRoomInit 负责初始化房间连接、处理参与者状态的变更以及接收数据通道传输的涂鸦信息。

接下来是启动屏幕共享的部分。我们使用 navigator.mediaDevices.getUserMedia 捕获屏幕流并发布该流到 WebRTC 房间中。

    const startSharing = async (sourceId: string) => {
        const stream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sourceId } },
        })

        const screenTrack = stream.getVideoTracks()[0]
        room?.localParticipant.publishTrack(screenTrack, {
            name: '屏幕分享',
            source: Track.Source.ScreenShare,
        })
    }
    /**
         * 拿到屏幕的分辨率
         */
        ipcMain.handle('screen-primary-tabbar', (event) => {
            return new Promise((resolve, reject) => {
                const primaryDisplay = screen.getPrimaryDisplay();
                const fullHeight = primaryDisplay.bounds.height;
                const workAreaHeight = primaryDisplay.workArea.height;
                const tabBarHeight = fullHeight - workAreaHeight;
                console.log('状态栏高度', tabBarHeight)
                // return tabBarHeight;
                resolve({ tabBarCoefficient: tabBarHeight / fullHeight })
            })

        })

因为没办法在状态栏上面涂鸦，所以我们计算状态栏的高度的百分比传给控制端，然后控制端做相应的处理

涂鸦数据的处理与绘制

WebRTC 数据通道用来传输涂鸦的坐标信息。每当一条数据通过数据通道接收到时，handleDataReceived 函数会解析该数据并在 canvas 上绘制路径。

const handleDataReceived = (payload: ArrayBuffer, participant: any) => {
    const decoder = new TextDecoder()
    const messageData = JSON.parse(decoder.decode(payload))
    const canvas = fullscreenCanvas.value
    const context = canvas ? canvas.getContext('2d') : null

    if (messageData.action === 'Move' && context) {
        messageData.param.forEach((item: any) => {
            drawPath(context, item, canvas)
        })
    }
}

drawPath 函数根据接收到的坐标数据，在 canvas 上绘制相应的路径

 const drawPath = (context: CanvasRenderingContext2D, item: any, canvas: HTMLCanvasElement) => { 
    const scaleX = canvas.width / item.videoWidth / window.devicePixelRatio
            const scaleY = canvas.height / item.videoHeight / window.devicePixelRatio context.strokeStyle = 'red' 
            context.lineJoin = 'round' 
            context.lineCap = 'round' 
            context.lineWidth = 2 context.beginPath() 
            context.moveTo(item.startX * scaleX, item.startY * scaleY) context.lineTo(item.endX * scaleX, item.endY * scaleY) 
            context.stroke()
            }

绘制的路径根据涂鸦数据中的起始坐标和终点坐标，调整缩放比例后完成路径绘制。

总结

通过本文的详细分析，你可以了解到如何通过 WebRTC 实现实时通信与屏幕共享，并结合 Vue 和 Electron 实现跨设备的同屏涂鸦功能。我们通过 Livekit 进行房间的管理和流的传输，并通过 Canvas 实现了涂鸦的显示和路径绘制。