一种基于WebRTC与UDP组播的一对多远程控制桌面的实现思路

最新推荐文章于 2024-07-08 15:07:37 发布
最新推荐文章于 2024-07-08 15:07:37 发布
阅读量1.7k 收藏 7
点赞数 1
文章标签： 网络 前端 ViewUI
原文链接：https://juejin.im/post/5c4ef28d5188252533160efc
版权
本文介绍了使用WebRTC获取视频流和UDP组播实现一对多远程桌面控制的方法，针对UDP传输不可靠问题，提出了包括包序号、缓冲区、权重、合包拆包等解决方案，同时讨论了解决客户端卡顿和服务器负载问题的策略。
摘要由CSDN通过智能技术生成
  • 苏格团队
  • 作者：Jason

前言

笔者最近收到要求 远程控制局域网内多N台终端同步操作 的需求（功能类似windows上的远程桌面）。 最终笔者实现了一种不太成熟，不太稳定，但基本满足现阶段需求的方案，且未来会持续迭代。

出于种种复杂原因，笔者无法使用现在一些市面上很成熟的解决方案。但由于该项目仅限于内部人员使用，即对方案的成熟性，可靠性，可维护性没有太多要求（面部表情逐渐舒展）。

分析

远程控制桌面，无论是1对1还是1对多。核心的数据的无非就是俩类。音视频信息，控制信息 (键盘，鼠标，快捷键等)。当得到这俩个数据时，我们就可以 在控制端实时获取受控端的视频信息以及传输控制指令 。那么接下的操作就是：

1.获取被控制端的视频流

作为一个前端开发工程师，对于如何获取设备的音视频信息这件事，本能的我就想起了 WebRTC (网页即时通讯)协议。
然后就是分析具体的设备和场景是否适用，一顿脑补分析后，我看行（主要是WebRTC本身强大）。

2.发送与接收控制信息

由于具体业务和某些神秘的限定和权衡。采用TCP协议传输消息是不可能的。那没啥好说的了，UDP救我！
虽然他们一次次给我带来的都是，这个不行，那个也不行 的种种限制，但是好消息也是有的，在一系列复杂的操作后，我拿到了受控方模拟鼠标和键盘操作的接口。得，齐活！

UDP传输不可靠怎么办？

开发初期，笔者遇到的最大的问题就是UDP的传输是无连接的，不保证可靠性，但是在该业务场景下 多个受控端需要对比一段操作

最低0.47元/天 解锁文章
weixin_33885253
关注
有了WebRTC，直播可以这样玩！
yinshipin007的博客
07-07 705
​如何实现两个人的实时视频通话呢？你可能会首先想到直播手段：采流 -> 推流 -> 拉流。但是，如果把这个过程放在前端去实现，那只能天台见了。然而，WebRTC的出现，扭转了这个现状。​借助WebRTC，前端可以不用去关注“采流 -> 推流 -> 拉流”这种过程，倾轻松就可以实现直播甚至实时音视频通话。 WebRTC是什么？底层原理是什么？怎么用？ 什么是WebRTC？ WebRTC全称Web Real-time Communication，网页即时通讯技术。它是由Google发起的一个的实时通讯解决方案。
joiny:WebRTC的简单组播
05-18
JoinyJS-使用WebRTC的简单多播 JoinyJS简化了WebRTC API，并允许您透明地与多个对等方进行通信。 import { createWebRTC } from 'joiny' ; // get a WebRTC object const webRTC = createWebRTC ( { media : { video : true , audio : true } channels : [ { chat : { reliable : false } } , { file : { reliable : true } } ] } ) ; // get a local peer with a callback webRTC . on ( 'local' , ( peer ) => { ... } ) ; // g
TeamControl:基于WebRTC的Visual Desktop远程控制应用程序
04-30
团队控制 基于WebRTC的Visual Desktop远程控制应用程序 在要控制的计算机上 npm install node controllee/ 将在默认浏览器中自动打开 。 然后提示您输入房间名称，输入您喜欢的任意名称。 并提示您选择要共享的屏幕部分，选择“您的整个屏幕”，然后单击“共享”按钮。 在计算机上进行控制 打开浏览器（推荐使用Chrome）并访问 （很抱歉，服务器最近未维护，也许将来会维护。但是您可以自己运行服务器，请参见下文）。 然后输入您之前命名的房间名称。 好的，您可以远程控制鼠标的位置！ 如果要自己运行服务器，请在服务器上 npm install node server/ 可能需要将一些代码从“ gonnavis.com”替换为“您的域”。 并注意，WebRTC需要https服务器。 类似项目 相对教程
基于webRTC+Electron实现远程控制
最新发布
qq_35485206的博客
07-08 759
此文写得比较粗糙，具体实现结合源码理解主要几步：先启动项目调用createOffer，得到offer再在傀儡端把上面得到的offer传入createAnswer，并调用，得到pc.localDescription，在此函数中还得添加桌面流再在控制端把上面得到的pc.localDescription传入setRemote，并...
基于WebRtc网页远程桌面监控
03-04
1.不需要安装任何插件可以在网页上实时浏览远程桌面信息； 2.基于WebRtc技术，超低延时； 3.不是简单，直接双击就可以运行，且带有详细的用户手册； 4.适用于任何想实时查看远程桌面的场景；
寻求基于webRTC的远程桌面+键鼠控制方案
追求卓越，成功就在不经意间追上你
10-24 2788
请留言或者加QQ 3684170，需求有偿服务!
webrtc多人在线视频通讯
oqqLZM的专栏
07-18 2128
GitHub项目地址:https://github.com/lzming9511/webrtc webrtc多人在线视频通讯项目，采用P2P点对点连接，后端服务只进行信令的交换，不参与音频流的交换，服务端的压力小 1.发起请求的客服端发送_offer到服务端，服务端群发给同房间的接收的客服端 2.发起请求的客服端发送_ice_candidate到服务端，服务端群发给同房间的接收的客服端 3...
WebRTC简介及实战应用 — 从0到1实现实时音视频聊天等功能
不怕麻烦的鹿丸的博客
03-07 4050
简单来说，RTCDataChannel 就是在点对点连接中建立一个双向的数据通道，从而获得文本、文件等数据的点对点传输能力。它依赖于流控制传输协议（SCTP），SCTP 是一种传输协议，类似于 TCP 和 UDP，可以直接在 IP 协议之上运行。但是，在 WebRTC 的情况下，SCTP 通过安全的 DTLS 隧道进行隧道传输，该隧道本身在 UDP 之上运行。另外总的来说 RTCDataChannel 和 WebSocket 很像，只不过 WebSocket 不是 P2P 连接，需要服务器做中转。
有了WebRTC，直播可以这样玩
yinshipin007的博客
05-12 1614
如何实现两个人的实时视频通话呢？你可能会首先想到直播手段：采流 -> 推流 -> 拉流。但是，如果把这个过程放在前端去实现，那只能天台见了。然而，WebRTC的出现，扭转了这个现状。 借助WebRTC，前端可以不用去关注“采流 -> 推流 -> 拉流”这种过程，倾轻松就可以实现直播甚至实时音视频通话。 WebRTC是什么？底层原理是什么？怎么用？让烧烤哥给你娓娓道来！ 什么是WebRTC？ WebRTC全称Web Real-time Communication，网..
基于WebRTC的数据传输与实时操作
WebRTC（Web Real-Time Communication）是一种基于Web技术的实时通信协议，可以实现浏览器之间的实时音视频通话、数据传输和实时操作功能。WebRTC主要由Google发起并推动，目前已经成为W3C和IETF的标准。 WebRTC的...
使用WebRTC从IP摄像机广播视频流
04-13
本文介绍了用于在线视频广播目的的新Web实时通信技术和IP摄像机的集成。
基于webrtc的一对多音视频通讯(windows)
07-30
基于webrtc的一对多音视频通讯(windows)的demo，注意是demo。这个时入门新手用的，没有太大的价值，如果无法下载 请私信我。
WebRTC桌面共享「WebRTC Desktop Sharing」-crx插件
03-15
基于WebRTC的P2P HQ / HD屏幕共享。共享音频+标签或任何应用程序的屏幕。甚至分享全部/整个屏幕。 Snappshott浏览器选项卡共享应用 支持语言:English
vrdp：使用WebRTC和WebVR的虚拟现实远程桌面查看器
02-06
虚拟现实远程桌面查看器 这是使用WebRTC和WebVR的简单远程桌面查看器的演示（因此，不需要电缆，也无需安装）。 最终目标是能够将虚拟监视器放置在轻松的虚拟环境中，例如在树林中或海滩上。 运行本地实例 该项目使用Docker，但是所有这些都隐藏在go.sh脚本中。 要构建和运行演示，请使用： $ ./go.sh build $ ./go.sh tcp 这将构建Docker映像，然后在端口8800上运行TCP服务器。然后您可以通过连接到您的实例。 如果要在远程服务器上运行它，则由于WebRTC的限制，您将需要具有HTTPS证书。 在localhost上运行应该可以正常工作 :trade_mark_selector: 。 执照
webrtc-java:用于运行 Java 的桌面平台的 WebRTC
08-05
webrtc-java 基于免费、开放的项目的 Java 原生接口实现。 该项目的目标是为运行 Java 的桌面平台开发 RTC 应用程序。 本项目封装了WebRTC Native API，类似于 。 < dependency> < groupId>dev.onvoid.webrtc</ groupId> < artifactId>webrtc-java</ artifactId> < version>0.2.0</ version> </ dependency> 支持的平台 Maven Central 工件包含可以在以下平台上加载的本机库： Linux x86_64 苹果系统 x86_64 视窗 x86_64 本机库是使用 WebRTC 分支 M91 构建的。 演示 客户端演示实现了信号协议，该协议允许 JavaFX 演示应用程序与浏览器中
基于webrtc多人音视频的研究（二）
liuweihui521的专栏
06-15 878
基于webrtc多人音视频的研究（二）置顶2017年02月28日 17:03:09阅读数：3194 基于webrtc多人音视频的研究                                                                                       ...
websocket 局域网 webrtc 一对一 多对多 视频通话 的示例
Don't Look Down的博客
03-30 2665
基本介绍 使用websocket来 WebRTC 建立连接时的 数据的传递和交换。 WebRTC 建立连接时，通常需要按照以下顺序执行一些步骤： 1.创建本地 PeerConnection 对象：使用 RTCPeerConnection 构造函数创建本地的 PeerConnection 对象，该对象用于管理 WebRTC 连接。 2.添加本地媒体流：通过调用 getUserMedia 方法获取本地的音视频流，并将其添加到 PeerConnection 对象中。这样可以将本地的音视频数据发送给远程对等方。 3
java web 远程桌面_从零开始实现内网远程桌面①：编译kvswebrtc
weixin_39761491的博客
02-24 1004
市面上常见的桌面助手有：Windows远程桌面/Vnc/Teamviewer/向日葵等。经过技术分析，我们发现支持内网的助手其网络交互模式与webrtc十分类似，有mediastream用于传输画面，然后用datachannel传输键鼠指令以及可能有的文件传输。因此我们底层使用webrtc来构建由于我一直提倡“知其所以然”。所以我选用开源的项目来构建kvswebrtc依赖于openssl、srtp...
C++基于webrtc的udp通讯
06-03
基于WebRTC的UDP通信需要使用一些第三方库，比如libwebrtc、boost.asio等。以下是一个使用C++编写的基于WebRTC的UDP通信的简单示例： ```cpp #include <boost/asio.hpp> #include <boost/bind.hpp> #include <boost/thread.hpp> #include <webrtc/api/peerconnectioninterface.h> #include <webrtc/api/test/fakeconstraints.h> using namespace std; using namespace boost::asio; // 本地IP地址 string local_ip = "127.0.0.1"; // 本地端口号 int local_port = 8888; // 远端IP地址 string remote_ip = "127.0.0.1"; // 远端端口号 int remote_port = 9999; // 数据缓冲区大小 const int kBufferSize = 1024; // WebRTC创建的PeerConnection对象 webrtc::PeerConnectionInterface* pc = nullptr; // 数据接收回调函数 void OnDataChannelMessage(const webrtc::DataBuffer& buffer) { cout << "Received message: " << buffer.data.data() << endl; } // 初始化WebRTC void InitWebRTC() { // PeerConnection初始化配置 webrtc::PeerConnectionInterface::RTCConfiguration config; config.sdp_semantics = webrtc::SdpSemantics::kUnifiedPlan; config.enable_dtls_srtp = true; // PeerConnection约束条件 webrtc::PeerConnectionInterface::IceServers servers; webrtc::PeerConnectionInterface::IceServer server; server.uri = "stun:stun.l.google.com:19302"; servers.push_back(server); webrtc::PeerConnectionInterface::RTCConfigurationConstraints constraints; constraints.servers = servers; constraints.type = webrtc::PeerConnectionInterface::RTCConfigurationType::kPublic; // 创建PeerConnection对象 pc = webrtc::CreatePeerConnectionOrError(config, constraints); if (!pc) { cerr << "Failed to create PeerConnection" << endl; return; } // 创建数据通道 webrtc::DataChannelInit config; config.id = 0; config.negotiated = false; config.ordered = true; config.maxRetransmits = -1; config.maxRetransmitTime = -1; config.protocol = ""; auto data_channel = pc->CreateDataChannel("test", &config); if (!data_channel) { cerr << "Failed to create data channel" << endl; return; } // 注册数据接收回调函数 data_channel->RegisterObserver(new rtc::RefCountedObject<webrtc::DataChannelObserver>( [](webrtc::DataChannelInterface* channel) { channel->SetMessageCallback(OnDataChannelMessage); })); } // UDP通信回调函数 void OnUdpReceive(const boost::system::error_code& error, size_t bytes_transferred, ip::udp::socket* socket, char* buffer) { if (!error || error == boost::asio::error::message_size) { // 发送数据到WebRTC数据通道 webrtc::DataBuffer data_buffer( rtc::CopyOnWriteBuffer(buffer, bytes_transferred), true); if (pc) { pc->data_channel()->Send(data_buffer); } // 继续接收数据 socket->async_receive_from(buffer, ip::udp::endpoint(ip::address::from_string(remote_ip), remote_port), boost::bind(OnUdpReceive, boost::asio::placeholders::error, boost::asio::placeholders::bytes_transferred, socket, buffer)); } } int main() { // 初始化WebRTC InitWebRTC(); // 初始化UDP通信 io_service io_service; ip::udp::endpoint local_endpoint(ip::address::from_string(local_ip), local_port); ip::udp::endpoint remote_endpoint(ip::address::from_string(remote_ip), remote_port); ip::udp::socket socket(io_service, local_endpoint); char buffer[kBufferSize]; socket.async_receive_from(buffer, remote_endpoint, boost::bind(OnUdpReceive, boost::asio::placeholders::error, boost::asio::placeholders::bytes_transferred, &socket, buffer)); // 运行事件循环 io_service.run(); // 释放资源 delete pc; return 0; } ``` 该示例中，使用Boost.ASIO库创建了一个UDP socket，通过异步接收数据的方式监听来自远端的数据。当接收到数据后，将其发送到WebRTC创建的数据通道中。同时，WebRTC的数据通道也会接收来自远端的数据，并调用通过注册的回调函数进行处理。需要注意的是，该示例仅仅是一个简单的示例，实际应用中还需要根据具体情况进行相应的修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值