使用 Javascript、Python 和 WebRTC 构建远程桌面应用程序

本文分享使用 Javascript、Python 和 WebRTC 构建远程桌面应用程序。

要开发远程桌面应用程序，我们需要Electron，在“Electron”的帮助下，可以使用 Javascript 构建我们的应用程序。Python 用于执行从客户端接收到的鼠标和键盘事件，这里将使用PyAutoGui库来执行事件。为了在 Electron 和 Python 之间建立通信，我们将使用“ WebSockets ”库创建一个本地服务器，用于在 Electron (Javascript) 和 Python 之间传输数据。

这个远程桌面应用程序如何运行？

使用 Javascript、Python 和 WebRTC 构建远程桌面应用程序 — 远程桌面客户端和服务器概念图

我们要构建的远程桌面应用程序完全基于“WebRTC”。它是一种实时通信技术，可用于在两个客户端之间建立点对点通信。通过使用“WebRTC”，我们可以直接从浏览器传输音频和视频，并且我们还可以使用“ Screen Share API”共享计算机屏幕。

要实现这个项目，我们需要构建三个主要部分，它们是信令服务器、屏幕共享应用程序和客户端Web应用程序。

信令服务器

步骤 1：构建信令服务器是我们项目的第一步。该服务器只需要在两个客户端之间建立 WebRTC 连接。在我们的案例中，这将是屏幕共享应用程序和客户端 Web 应用程序。

屏幕共享应用程序

第 2 步：使用 Electron 和 Python，我们将创建一个屏幕共享应用程序，它将向客户端传输实时屏幕，同时接收客户端的键盘和鼠标事件，并在同一（主机或远程）系统上执行。

客户端Web应用程序

第 3 步：这是项目的最后一步，在这一阶段，我们将创建一个客户端Web应用程序，该程序将接收来自远程计算机的实时屏幕，我们还可以通过该Web应用程序控制远程计算机。

我们要做什么？

创建一个简单的网页，在浏览器上共享屏幕，其中我们将整合鼠标点击事件，该事件将从浏览器获取，并使用 “Python “在桌面上执行。

注：基本上，屏幕共享 API 只允许我们共享屏幕及其音频。它不提供控制功能，如鼠标移动或点击事件。因此，我们将手动添加控制功能。

要求

Python 3.4 以上版本
HTML & JavaScript

Python 库

PyAutoGui
websockets

开始编码

第 1 步：使用 Share Screen Share API 创建客户端网页

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./app.js"></script>
    <link href="./style.css" rel="stylesheet">
</head>
<body>
    <video id="vid" 
    autoplay 
    onclick="pointer(event)" 
    width="1920" height="1080">
</video>
</body>
</html>

style.css

body {
    display: flex;
    justify-content: center;
}

app.js

/* code to connect with websocket server */
const socket = new WebSocket('ws://localhost:5000')
/* code to get screen display */
navigator.mediaDevices.getDisplayMedia({video: true, audio: true})
.then(stream => {
    // inject stream object as a source for video element //
    document.getElementById('vid').srcObject = stream
    document.getElementById('vid').play
    // inject stream object as a source for video element //
})
.catch(e => console.log(e))
/* The below function send the mouse coordinates to the server */
function pointer(e) {
    let posX = document.getElementById('vid').offsetLeft
    let posY = document.getElementById('vid').offsetTop
    let X = e.pageX - posX
    let Y = e.pageY - posY
    let pointer = X.toString() + ',' + Y.toString()
    console.log(pointer)
    socket.send(pointer)
}

注意：上面的 JavaScript 代码将充当客户端，它将鼠标坐标（单击事件）发送到服务器。

第 2 步：使用 Python 创建一个 websocket 服务器，在桌面上执行鼠标移动操作

implementer.py

import asyncio      # importing asyncio library #
import websockets   # importing websocket library #
import pyautogui    # importing pyautogui library #
# Asynchronous function receive the message from client #
async def handler(websocket, path):
    async for message in websocket:
        try:
            pointer = message.split(',')
            pyautogui.moveTo(int(pointer[0]), int(pointer[1]))
            print('X : ', pointer[0])
            print('Y : ', pointer[1])
        except:
            pass
# Iinitating the server #
start_server = websockets.serve(handler, "localhost", 5000)
# Run's the server continuously #
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

注：在上述 python 程序中，我们接收的是字符串形式的坐标，而不是对象形式的坐标，并通过将 “comma “作为参数来分割坐标。以 “string”格式发送和接收坐标是有原因的。因为在本示例中，我们使用 websockets 集成了鼠标点击事件功能，但今后将使用 “WebRTC “而不是 websockets 或 socket.io 在两台不同的计算机之间建立远程连接，因此使用 WebRTC 传输对象可能无法正常工作。因此，我们以字符串的形式传输坐标。