WebRTC有分享屏幕的功能。使用的是getDisplayMedia方法。用户同意分享屏幕后，可以拿到视频流。 再结合MediaRecorder和Blob，把视频流数据存下来，就能得到录制屏幕的视频。

这篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。 为什么要使用WebRTC

getUserMedia：可以获取本地的媒体流，一个流包含几个轨道，比如视频和音频轨道。 RTCPeerConnection：用于建立 P2P 连接以及传输多媒体数据。 RTCDataChannel：建立一个双向通信的数据通道，可以传递多种数据类型。 Peer A使用 ICE …

通过electron + Vue，基于WebRTC实现一个内网远程连接工具，可以在主面板对鼠标、键盘和屏幕进行分别控制。

为了持续增强 Rubick 用户的使用体验，我们计划开启 5.0 版本的迭代，为了调动社区维护的积极性，我们开启了本次开发者激励计划，只要参与开源项目开发，即可获得现金奖励！

一个远程桌面控制，需要用到哪些技术？分享一下，项目中的远程控制实现方案，两个web端，一个node服务端，一个electron桌面应用端，外加webrtc协议，websocket协议，自定义协议等

WebRTC + Electron + Vue + Canvas 同屏涂鸦功能。具体来说，就是 B 将电脑的屏幕分享出来，然后 A 在平板的页面上进行涂鸦，涂鸦内容实时显示在 B 的电脑屏幕上。

了解webRTC底层实现技术，亲自撸代码实现控制远程桌面原理，学习到getUserMedia、RTCPeerConnectio、RTCPeerConnection等函数，并其实现方式。

title: Webrtc + Electron + Vue 同屏涂鸦功能（二）Electron 端代码 date: 2024-09-27 tags: [WebRTC, Electron, Vue,