了解如何使用 Java、Node.js 和 JxBrowser 建構螢幕共享應用程式。
遠端螢幕共享用于各種應用程式和服務，從網絡會議到遠端通路應用程式。二線工程師可以使用它來協助一線的同僚，或者技術支援專家可以使用它來準确了解到客戶的故障現象。
你可以使用 TeamViewer 、Todesk、向日葵等第三方應用程式。但是，如果你需要在 Java 應用程式中擁有遠端通路功能怎麼辦？在本文中，将展示一種方法，該方法允許使用JxBrowser的功能在不同 PC 上運作的兩個 Java 應用程式之間實作螢幕共享。
JxBrowser 是一個跨平台的 Java 庫，可讓将基于 Chromium 的 Web 浏覽器控件內建到 Java Swing、JavaFX、SWT 應用程式中，并使用數百種 Chromium 功能。
為了在 Java 中實作螢幕共享，将利用 Chromium 支援即時使用的螢幕共享和 JxBrowser 提供對它的程式設計通路這一功能。
概述
該項目由兩部分組成：Node.js 上的伺服器和兩個 Java 應用程式。
服務端通過WebRTС 伺服器來實作。這一部分包含用于連接配接到伺服器和啟動螢幕共享會話的 JavaScript 代碼。
Java 用戶端是兩個桌面應用程式。第一個是帶有按鈕的視窗。單擊該按鈕開始共享會話。第二個應用程式自動接收視訊流并顯示它。還有一個停止螢幕共享的按鈕。
WebRTC 伺服器
WebRTC 伺服器配置為用于兩個用戶端之間的互動：一個流媒體和一個接收器。它分别服務于兩個靜态頁面
streamer.html``receiver.html
。
const app = express();
app.use(express.static('public'));
app.get('/streamer', (req, res) => {
res.sendFile(rootPath + 'public/streamer.html');
});
app.get('/receiver', (req, res) => {
res.sendFile(rootPath + 'public/receiver.html');
});
複制代碼 每個 HTML 檔案都包含連接配接到伺服器并通過 WebRTC 設定螢幕共享的 JavaScript 代碼。當流媒體開始捕獲時，我們将其螢幕視圖作為視訊流接收。為了顯示它，我們在接收器端使用内置的 HTML5 視訊播放器。
打開兩個浏覽器視窗檢視是否正常。
該項目的源代碼可在GitHub 上獲得。
Java 用戶端
接下來配置 Java 用戶端并将它們與 JavaScript 應用程式內建。需要初始化一個空的Gradle 項目并使用
JxBrowser Gradle Plug-in
添加
JxBrowser
依賴項。
plugins {
…
id("com.teamdev.jxbrowser.gradle") version "0.0.3"
}
jxbrowser {
version = "7.24"
}
dependencies {
// Detects the current platform and adds the corresponding Chromium binaries.
implementation(jxbrowser.currentPlatform())
// Adds a dependency to Swing integration.
implementation(jxbrowser.swing())
}
複制代碼 流媒體應用
接下來從一個将共享其螢幕的應用程式開始，需要代表流媒體連接配接到伺服器。首先，需要建立
Engine
和
Browser
執行個體：
Engine engine = Engine.newInstance(HARDWARE_ACCELERATED);
Browser browser = engine.newBrowser();
複制代碼 加載所需的 URL：
browser.navigation().loadUrlAndWait("http://localhost:3000/streamer");
複制代碼 加載 URL 後，通路JavaScript 代碼
streamer.html
，可以在單擊按鈕時直接從 Java 開始螢幕共享：
JButton startSharingButton = new JButton("Share your screen");
startSharingButton.addActionListener(e -> {
browser.mainFrame().ifPresent(mainFrame ->
mainFrame.executeJavaScript("startScreenSharing()"));
});
複制代碼 預設情況下，當網頁想要從螢幕捕獲視訊時，Chromium 會顯示一個對話框，我們可以在其中選擇捕獲源。使用 JxBrowser API，我們可以在代碼中選擇捕獲源：
browser.set(StartCaptureSessionCallback.class, (params, tell) -> {
CaptureSources sources = params.sources();
// Share the entire screen.
CaptureSource screen = sources.screens().get(0);
tell.selectSource(screen, AudioCaptureMode.CAPTURE);
});
複制代碼 讓我們儲存
CaptureSession
的執行個體，以便稍後以程式設計方式停止它。
private CaptureSession captureSession;
…
browser.on(CaptureSessionStarted.class, event ->
captureSession = event.capture()
);
複制代碼 為此我們還需要一個按鈕：
JButton stopSharingButton = new JButton("Stop sharing");
stopSharingButton.addActionListener(e -> {
captureSession.stop();
});
複制代碼 接收器應用程式
在接收器應用程式中，我們将顯示共享螢幕。
就像在流媒體應用程式中一樣，我們需要連接配接到 WebRTC 伺服器，但這次是作為接收器。是以，建立
Engine
、
Browser
執行個體，并導航到接收者的 URL：
Engine engine = Engine.newInstance(HARDWARE_ACCELERATED);
Browser browser = engine.newBrowser();
browser.navigation().loadUrlAndWait("http://localhost:3000/receiver");
複制代碼 要在 Java 應用程式中顯示流媒體螢幕，建立 Swing
BrowserView
元件并将其嵌入到
JFrame
：
private static void initUI(Browser browser) {
BrowserView view = BrowserView.newInstance(browser);
JFrame frame = new JFrame("Receiver");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.setSize(700, 500);
frame.add(view, BorderLayout.CENTER);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
複制代碼 該元件将使用HTML5
BrowserView
視訊播放器顯示加載網頁的内容，我們将能夠看到流媒體的螢幕。