前端實踐：像素級同步、低延時、超低流量的屏幕共享工具 Syncit

在由聲網舉辦的 RTC 2020 編程挑戰賽春季賽中，像素級、低流量的屏幕共享工具「Syncit」得到了第二賽道的第一名。項目做者餘彥臻同時仍是擁有 6500+Star 的開源項目 rrweb 的做者。 在此前 CSDN 對獲獎者的採訪中咱們瞭解到，從事前端開發的餘彥臻，在平時工做中會用到 Teamviewer 等遠程桌面工具。可是，大部分只需遠程控制對方的瀏覽器，不須要操做系統級別的控制。因而他從瀏覽器入手，開發出了這款既關注隱私保護和易用性，又能不佔用過多網絡帶寬的屏幕共享與遠程控制工具「Syncit」。 Syncit 傳遞的數據是文本格式的快照和 op-log。經過觀測網頁視圖的交互和變化，來實現分享和反向控制的能力。數據的傳輸基於 WebRTC + Agora RTM SDK 實現，能夠將時延降到更低，保證使用的流暢性。

6 月 20 日（本週六），餘彥臻將在 RTC meetup 直播中詳細分享開發 Syncit 項目過程當中遇到的難點與實踐經驗，包括如何實現可感知內容的全新隱私保護能力，如何沙盒化的遠程控制能力，以及低時延傳輸層的實現等。

在此以前咱們能夠經過本文簡單瞭解一下「Syncit」的基本功能與實現思路。

基本功能

遠程屏幕共享

咱們須要作到像素級同步、低延時、超低流量佔用。實現思路是將 Web 視圖的變化與交互行爲轉換爲序列化的快照和 op-log，由本端傳輸至對端後重放。對端始終處於沙盒中，以免安全問題。

隱私保護

爲了保護隱私，在屏幕共享過程當中，須要能夠作到靈活遮擋一些內容。Syncit 所遮擋的是內容，而不是固定的位置。視圖中的每一個部分都是結構化的 DOM，不只精確屏蔽視圖，同時屏蔽對應區域內的交互事件。

反向遠程控制

咱們要實現相似 Teamviewer for the Web 的反向遠程控制，但無需安裝客戶端。Syncit 會採集對端的交互事件後在源端進行重放，而且控制權沒法從當前 Web 頁面逃逸，帶來更好的安全性。

適合哪些場景？

遠程客服

你能夠在 Web 應用接入 Syncit，當用戶遇到問題時，客服人員能夠經過 Web 瀏覽器端，提供遠程協助。該功能也能夠與遠程客服視頻等功能結合，實現更好的應用體驗。

弱網環境下的 Web 分享

因爲用戶所處網絡環境複雜，有可能處於弱網環境下，丟包率較高。因此 Syncit 可適用於面向各類網絡環境下的各種終端，經過 Web 瀏覽器進行信息互通、共享，而且「畫質」不降級。相似的場景包括在線教育、遠程辦公等。

Syncit 適用於全部 Web 場景，隨着 Web 應用不斷進化，它的適用場景會不斷變多。

Syncit 的功能設計

直播模式

簡單來講，Syncit 的基礎是將 Web 視圖序列化成了一個文本格式的快照，再將可能對 Web 視圖產生變化的各種操做都記錄成了 op-log。只須要重建快照，再一次重放 op-log 中的操做，就能夠實現 Web 視圖的精確回放。其中涉及到的錄製、序列化、回放、沙盒等細節。咱們會在 6 月 20 日的直播中詳細講解沙盒化的實現。屆時，你們能夠在 Github 中閱讀詳細的說明。

進一步地，要實現直播的效果，Syncit 還包含了 encoder, buffer, transporter 等組件，示意圖以下：

每個組件都是可插拔的，例如：

• 能夠實現 encoder/decoder，對傳輸的數據進行加密、壓縮等操做。（比賽版本中由於 Agora 實時消息 SDK 中包含了 deflate 壓縮，因此沒有啓用額外的 encoder）

• 能夠實現 buffer，對傳輸中的數據進行緩存，當出現網絡異常或時序錯亂時能夠進行重試和排序。（比賽版本中的 buffer 是一個內存中非持久化的實現）

• 能夠實現 transporter，經過暴露標準的接口讓數據在源端和對端之間通訊。（比賽版本使用了 Agora 實時消息 SDK 封裝 transporter，代碼中也包含了一個基於 localStorage 模擬的 transporter 用於快速測試）

因爲傳輸的數據中 op-log 的部分對順序很是敏感，因此 buffer 中的重試和排序是很是重要的實現，能夠保障屏幕共享的穩定性。

buffer 對於用戶側的感覺是一個 1 秒（可控）的延遲，這就意味着只要傳輸的數據時延不超過 1 秒，buffer 均可以將其緩衝爲觀看無延遲的狀態。

控制模式

控制模式在直播模式的基礎上實現。在直播模式時咱們已經經過重建快照在對端構建了一個沙盒視圖，當開啓控制模式後，咱們會開始監聽對端用戶在沙盒中的交互，再傳輸至源端進行實施。

在源端和對端會持續的維護一個徹底同步的 DOM 映射，這樣能夠將每一個交互記錄爲一個序列化的數據進行傳輸。

舉個例子

假設源端頁面是一個按鈕，點擊後 alert 一條消息

1. 在對端重建快照，出現一個一樣的按鈕，但該按鈕在沙盒中，點擊後並不會觸發 alert。

2. 監聽對端沙盒中的交互事件，對端用戶點擊沙盒中的按鈕後，收集到點擊事件和點擊對象。

3. 將點擊事件和點擊對象傳輸至源端，經過程序觸發對應的點擊事件。

4. 源端 alert 一條消息。

5. 源端最新的視圖變化繼續同步至對端。

示意圖以下：

做者、直播與源碼

• 做者 Github @Yuyz0112：github.com/Yuyz0112

做者將在週六的直播分享 Syncit 的實現細節。同時，公開 Syncit 源碼。歡迎你們掃碼報名，在直播間與做者交流更多技術細節。感興趣的同窗，可掃碼報名。