当前位置： 首页 > news >正文

简易屏幕共享工具-基于WebSocket

news 2026/4/18 0:37:38

前面写了两个简单的屏幕共享工具，不过那只是为了验证通过截屏的方式是否可行，因为通常手动截屏的频率很低，而对于视频来说它的帧率要求就很高了，至少要一秒30帧率左右。所以，经过实际的截屏工具验证，我了解了几个Python截屏库的特点和限制。例如，多数截屏库都不支持很高的截屏速度，并且截屏是典型的 CPU 密集任务（我尝试使用多线程截屏，发现速度更慢了，之后有时间我也会把这一点整理成文章发出来）。
所以，我的初始的想法其实是基于 WebSocket 来实现的。现在，就让我们对先前的代码进行重构，采用 WebSocket 来传输图片数据。不过我这里没有使用到它的双向传输的特性，只是将原来 HTTP 传输的图片换成通过 WebSocket 来传输了。不过这里后续还有很多东西可以开发，如果有时间的话，也可以基于这个做一些有趣的东西。

演示

我这个笔记本的性能可能不太行，我只要打开视频帧率就降低了很多，哈哈。

截取播放B站视频

在这里插入图片描述

截取摄像头画面

这样甚至可以远程共享画面了，如果两个人都布置一个，就可以各自看到对话了（不过没有声音，且效率低下，可能也就只能在局域网使用），不过这样它是相当于从服务器的地方获取的数据，而我们平时使用的视频通话工具都是从客户端获取的数据。

而且页面越多，帧率越低，这里可能要优化一下或者它就是这么累赘，只能个人使用。

在这里插入图片描述

说明

注意，这里的测试环境是 Windows，因为有些库依赖于 Windows 提供的特性，所以需要在 Windows 上运行它。在程序启动时，它会开启一个截屏的线程，不断去获取屏幕的截屏，如果有用户访问，它就会通过 WebSocket 连接，把获取的屏幕截图数据传送给前端，前端的逻辑就是将它绘制在 canvas 上，并添加帧率显示。

注意：这部分前端的代码是 AI 生成，对于验证小功能来说，AI 真是太完美了。而且，其实这整个部分都可以让 AI 来做，但是具体是哪些的组合还是自己选择的，毕竟每个人的偏好和技术栈不同。

代码

所有的代码都在这里了，大概60行代码，我把前端压缩成一行代码了。如果要运行代码先要安装 flask, flask_sock, pillow, dxcam 库。

import time
from flask import Flask
from flask_sock import Sock
from io import BytesIO
from PIL import Image
import dxcam# 创建应用
app = Flask(__name__)
sockets = Sock(app)
# 整个应用只创建一个即可
camera = dxcam.create(device_idx=0, output_idx=1)  # output_idx 0 是第一块屏幕，1 是第二块屏幕
camera.start(target_fps=60, video_mode=True)
JPEG_QUALITY = 80 # 默认的jpeg图片质量，越高需要的计算量越大，同时越清晰# 直接前后端写一起了，这个只是一个演示的demo
INDEX_HTML = """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Screen Sharing</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } canvas { border: 1px solid black; } </style> </head> <body> <canvas id="screenCanvas" width="960" height="540"></canvas> <script> const canvas = document.getElementById('screenCanvas'); const ctx = canvas.getContext('2d'); const ws = new WebSocket('ws://'+window.location.host+'/remote_desktop'); ws.onopen = () => { console.log("WebSocket connected"); }; ws.onerror = (event) => { console.error("WebSocket error:", event); }; let lastFrameTime = performance.now(); let frameCount = 0; let fps = 0; ws.onmessage = (event) => { const image = new Image(); image.src = URL.createObjectURL(event.data); image.onload = () => { ctx.drawImage(image, 0, 0, canvas.width, canvas.height); frameCount++; const now = performance.now(); const elapsed = now - lastFrameTime; if (elapsed >= 1000) { fps = frameCount / (elapsed / 1000); frameCount = 0; lastFrameTime = now; } displayFPS(); }; }; function displayFPS() { ctx.font = '30px Arial'; ctx.fillStyle = 'red'; ctx.fillText(`FPS: ${Math.round(fps)}`, 50, 50); } </script> </body> </html>
"""@app.route('/', methods=['GET'])
def index():"""简单的前端"""return INDEX_HTML@sockets.route('/remote_desktop')
def get_desktop(ws):"""获取一帧图片，并发送给前端"""buffer = BytesIO()fps = 0    # 计算后端生成的帧率frame_count = 0last_frame_time = time.perf_counter()while True:reset_buffer(buffer)  # 每次重置buffer，方便复用img_data = get_frame(buffer)frame_count += 1elapsed = time.perf_counter() - last_frame_timeif elapsed >= 1:fps = frame_count // elapsedlast_frame_time = time.perf_counter()frame_count = 0print("backend real frame fps: ", fps)ws.send(img_data)def get_frame(buffer):"""获取一帧，然后处理成jpeg并返回二进制数据"""image_array = camera.get_latest_frame()Image.fromarray(image_array).save(buffer, format="JPEG", quality=JPEG_QUALITY)return buffer.getvalue()def reset_buffer(buffer):# 重置buffer，方便复用buffer.truncate(0)buffer.seek(0)if __name__ == '__main__':    print("remote desktop server starting...")app.run("0.0.0.0", 9000)

相关文章：

简易屏幕共享工具-基于WebSocket

前面写了两个简单的屏幕共享工具&#xff0c;不过那只是为了验证通过截屏的方式是否可行&#xff0c;因为通常手动截屏的频率很低&#xff0c;而对于视频来说它的帧率要求就很高了&#xff0c;至少要一秒30帧率左右。所以&#xff0c;经过实际的截屏工具验证&#xff0c;我了解…...

编程日记 2025/1/6 22:39:53

Redis——主从复制模式

文章目录 1. 引入2. 主从复制模式2.1 概念2.2 配置2.3 原理2.3.1 建立连接阶段2.3.2 命令传播阶段2.3.3 心跳检测机制2.3.4 部分重同步机制(1) 主节点通过 复制积压缓冲区 记录写命令(2) 主节点通过 复制偏移量 判断从节点是否满足执行部分重同步的条件(3) 执行部分重同步操作 …...

编程日记 2025/1/6 22:30:39

简历_熟悉缓存高并发场景处理方法，如缓存穿透、缓存击穿、缓存雪崩

系列博客目录 文章目录 系列博客目录1.缓存穿透总结 2.缓存雪崩3.缓存击穿代码总结 1.缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远不会生效&#xff0c;这些请求都会打到数据库。 常见的解决方案有两种&#xff1a; 缓存空对…...

编程日记 2025/1/6 22:26:32

阿里云电商平台用户行为分析与人群画像系统设计与实现

通过在阿里云&#xff08;https://baike.baidu.com/item/%E9%98%BF%E9%87%8C%E4%BA%91/297128&#xff09;上构建包含数据源层、数据存储层、数据处理层、数据分析层和数据应用层的系统架构&#xff0c;并设计合理的数据模型、ETL流程、数据质量与性能监控机制以及安全与合规性…...

编程日记 2025/1/6 22:25:31

Go语言的 的输入/输出流（I/O Streams）核心知识

Go语言的输入/输出流&#xff08;I/O Streams&#xff09;核心知识 前言 Go语言是一种现代编程语言&#xff0c;因其高效性、简洁性及强大的并发支持而受到开发者的喜爱。在开发应用程序时&#xff0c;输入/输出&#xff08;I/O&#xff09;操作是一个不可或缺的部分。无论是…...

编程日记 2025/1/6 22:19:25

57.在 Vue 3 中使用 OpenLayers 点击选择 Feature 设置特定颜色

在 Web 开发中&#xff0c;地图应用是非常常见的需求&#xff0c;而 OpenLayers 是一个非常强大的地图库&#xff0c;它提供了丰富的地图操作功能。今天&#xff0c;我们将一起学习如何在 Vue 3 中结合 OpenLayers 使用点击事件来选择地图上的 Feature&#xff0c;并设置特定的…...

编程日记 2025/1/6 22:13:14

数据结构C语言描述8(图文结合)--哈希、哈希冲突、开放地址法、链地址法等实现

前言 这个专栏将会用纯C实现常用的数据结构和简单的算法&#xff1b;有C基础即可跟着学习&#xff0c;代码均可运行&#xff1b;准备考研的也可跟着写&#xff0c;个人感觉&#xff0c;如果时间充裕&#xff0c;手写一遍比看书、刷题管用很多&#xff0c;这也是本人采用纯C语言…...

编程日记 2025/1/6 22:11:01

自动化立体库安全使用管理制度完整版

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。欢迎大家到本文底部评论区留言。 新书《智能物流系统构成与技术实践》人俱乐部 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 以下是《…...

编程日记 2025/1/6 22:08:53

云打印之拼多多打印组件交互协议

拼多多打印组件交互协议相关介绍如下&#xff1a; 1、打印组件下载地址 http://meta.pinduoduo.com/api/one/app/v1/lateststable?appIdcom.xunmeng.pddprint&platformwindows&subTypemain 2、socket连接端口 如果是http的话&#xff0c;端口是5000 socket new …...

编程日记 2025/1/6 22:02:45

TCP 演进之路：软硬件跷跷板与新征程

今天依旧是与 TCP 相关的一个短评。 先看软硬件间的胶着。晶体管诞生以来&#xff0c;硬件一直在突飞猛进发展&#xff0c;后来这个事被摩尔定律正则化&#xff0c;人们开始可以预测未来&#xff0c;但即便如此&#xff0c;软件依然跟不上来&#xff0c;不过几年&#xff0c;老…...

编程日记 2025/1/6 21:53:37

React最小状态管理Jotai

Jotai 状态管理 1. 简介 Jotai 是一个基于原子 atom 概念的 React 状态管理库&#xff0c;它提供了简单且灵活的方式来管理应用状态, 而且非常轻量&#xff0c; 大厂用的非常多。 JotaiRedux适合单个页面&#xff0c;多次用到的属性适合全局公共属性超级轻量&#xff08;与use…...

编程日记 2025/1/6 21:52:35

计算机网络 —— 网络编程（TCP）

计算机网络 —— 网络编程&#xff08;TCP&#xff09; TCP和UDP的区别TCP (Transmission Control Protocol)UDP (User Datagram Protocol) 前期准备listen &#xff08;服务端&#xff09;函数原型返回值使用示例注意事项 accpect &#xff08;服务端&#xff09;函数原型返回…...

编程日记 2025/1/6 21:51:33

字玩FontPlayer开发笔记4 性能优化 首屏加载时间优化

字玩FontPlayer开发笔记4 性能优化 首屏加载时间优化 字玩FontPlayer是笔者开源的一款字体设计工具&#xff0c;使用Vue3 ElementUI开发&#xff0c;源代码&#xff1a; github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontplayer …...

编程日记 2025/1/6 21:50:29

RabbitMQ案例

1. 导入依赖 <!--AMQP依赖&#xff0c;包含RabbitMQ--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 发送消息 注入RabbitTemplate Autowired RabbitT…...

编程日记 2025/1/6 21:49:28

智能工厂的设计软件 应用场景的一个例子：为AI聊天工具添加一个知识系统 之13 方案再探之4：特定于领域的模板 之 div模型（完整版）

前景提要 整个“方案再探”篇 围绕着如何将项目附件文档中Part 1 部分中给出的零散问题讨论整理、重组为一个结构化的设计文档。为此提出了讨论题目&#xff1a; 特定于领域的模板--一个三套接的hoc结构 它是本项目actors 的剧本原型。其地位&#xff1a; 祖传代码脚本模板…...

编程日记 2025/1/6 21:48:27

WebRtc02:WebRtc架构、目录结构、运行机制

整体架构 WebRtc主要分为三层&#xff1a; CAPI层&#xff1a;外层调用Session管理核心层&#xff1a;包括视频引擎、音频引擎、网络传输 可由使用者重写视频引擎&#xff1a;编解码器、视频缓存、视频增强音频引擎&#xff1a;编解码器、音频缓存、回音消除、降噪传输&#x…...

编程日记 2025/1/6 21:46:25

数据结构复习 (顺序查找,对半查找,斐波那契查找,插值查找,分块查找)

查找&#xff08;检索&#xff09;&#xff1a; 定义&#xff1a;从给定的数据中找到对应的K 1&#xff0c;顺序查找&#xff1a; O(n)的从前向后的遍历 2&#xff0c;对半查找&#xff0c;要求有序 从中间开始查找&#xff0c;每次检查中间的是否正确&#xff0c;不正确就…...

编程日记 2025/1/6 21:45:23

el-input输入框需要支持多输入，最后传输给后台的字段值以逗号分割

需求&#xff1a;一个输入框字段需要支持多次输入&#xff0c;最后传输给后台的字段值以逗号分割 解决方案&#xff1a;结合了el-tag组件的动态编辑标签 那块的代码 //子组件 <template><div class"input-multiple-box" idinputMultipleBox><div>…...

编程日记 2025/1/6 21:43:21

C# 枚举格式字符串

总目录 前言 当前文章为 C# 中的格式设置(格式化字符串) 大全 中的一个小章节。 一、概述 1. 基本信息 可以使用 Enum.ToString 方法&#xff0c;新建表示枚举成员的数字值、十六进制值或字符串值的字符串对象。枚举格式说明符不区分大小写。 二、自定义数字格式说明符详解…...

编程日记 2025/1/6 21:39:18

【51单片机-零基础chapter1】

安装软件(配套的有,不多赘述) 1.管理员身份运行keil和破解软件kegen 将CID代码复制粘贴到 一定要管理员方式,不然会error 插入板子 我的电脑,管理 1.如果是拯救者,查看端口,如果没有则显示隐藏 2.苹果不知道,好像不可以 3.其他电脑在"其他设备找" (注:本人在校已…...

编程日记 2025/1/6 21:37:16

终极性能优化指南：3分钟掌握Thorium浏览器的极致体验

终极性能优化指南&#xff1a;3分钟掌握Thorium浏览器的极致体验 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Source code and Linux releases. Windows/MacOS/ARM builds served in different repos, links are towards the top of the …...

编程新知 2026/4/18 0:13:25

从零到一：实战微调Transformer处理多标签文本分类

1. 为什么选择Transformer处理多标签分类&#xff1f; 我第一次接触多标签分类任务是在处理电商商品属性标注时。当时用传统机器学习方法效果总是不理想&#xff0c;直到尝试了Transformer架构才发现新大陆。Transformer之所以适合这类任务&#xff0c;核心在于它的自注意力机制…...

编程新知 2026/4/17 23:42:16

【Blender】别再只会 “搭积木”！Blender 点线面编辑，新手建模的真正起点

&#x1fae7;个人主页&#xff1a;小年糕是糕手 &#x1f4ab;个人专栏&#xff1a;《C》《Linux》《数据结构》《Blender》 &#x1f3a8;你不能左右天气&#xff0c;但你可以改变心情&#xff1b;你不能改变过去&#xff0c;但你可以决定未来&#xff01; 目录 从 “搭积木…...

编程新知 2026/4/17 23:18:03

若依WMS仓库管理系统：企业级仓储管理的现代化解决方案

若依WMS仓库管理系统&#xff1a;企业级仓储管理的现代化解决方案 【免费下载链接】RuoYi-WMS-VUE 若依wms是一套基于若依的wms仓库管理系统&#xff0c;支持lodop和网页打印入库单、出库单。包括仓库/库区/货架管理&#xff0c;出入库管理&#xff0c;客户/供应商/承运商&…...

编程新知 2026/4/17 22:32:51

4月18日腾讯云「龙虾公开课」落地合肥！免费线下AI实战课，还有限定周边等你拿

合肥线下&#xff1a;免费AI实战课的吸引力4月18日&#xff0c;腾讯云开发者社区「龙虾公开课」将在合肥高新区中安创谷科技园二期H1栋国际会客厅举办。此次活动提供免费的线下AI Agent实战课&#xff0c;即使是零基础的参与者也能参与。课程涵盖1对1装机指导、现场实操工坊&am…...

编程新知 2026/4/17 22:00:20

Qwerty Learner终极指南：5分钟掌握英语打字与单词记忆的完美结合

Qwerty Learner终极指南&#xff1a;5分钟掌握英语打字与单词记忆的完美结合 【免费下载链接】qwerty-learner 为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers 项目地址: h…...

编程新知 2026/4/17 21:36:02

Lv驱动库底层实际使用 Q8定点及其定点实现

目录 一、定点化 二、数据节点规划 三、Lv Q8定点计算代码实现 四、数据线性插值 ISP Pipeline中Lv实现方式探究之一ISP Pipeline中Lv实现方式探究之二ISP Pipeline中Lv实现方式探究之三--lv计算定点实现ISP Pipeline中Lv实现方式探究之四----正LV值定点实现 一、定点化 如上…...

编程新知 2026/4/17 21:23:41

DeepMosaics终极指南：3个简单步骤掌握AI智能马赛克处理技术

DeepMosaics终极指南&#xff1a;3个简单步骤掌握AI智能马赛克处理技术 【免费下载链接】DeepMosaics Automatically remove the mosaics in images and videos, or add mosaics to them. 项目地址: https://gitcode.com/gh_mirrors/de/DeepMosaics 想要一键去除图片中的…...

编程新知 2026/4/17 20:49:08

当LLM开始“编译”你的Prompt：从AST解析视角重构智能代码生成工作流（含Python/TypeScript双语言Prompt IR中间表示规范）

第一章&#xff1a;智能代码生成Prompt工程指南 2026奇点智能技术大会(https://ml-summit.org) 高质量Prompt是驱动智能代码生成模型产出可运行、可维护、符合上下文语义的关键杠杆。与通用文本生成不同&#xff0c;代码生成对结构精确性、语法合法性、边界条件覆盖及API兼容…...

编程新知 2026/4/17 20:06:43

路径规划算法完整指南：从零到精通的终极学习路径

路径规划算法完整指南&#xff1a;从零到精通的终极学习路径 【免费下载链接】PathPlanning Common used path planning algorithms with animations. 项目地址: https://gitcode.com/gh_mirrors/pa/PathPlanning 无论你是机器人工程师、自动驾驶开发者还是游戏AI程序员…...

编程新知 2026/4/17 19:14:11