在 RTC 2020 編程挑戰賽春季賽中，像素級、低流量的屏幕共享工具「Syncit」獲得了第二賽道的第一名。項目作者餘彥臻同時還是擁有 6500+Star 的開源項目 rrweb 的作者。
在此前 CSDN 對獲獎者的採訪中我們瞭解到，從事前端開發的餘彥臻，在平時工作中會用到 Teamviewer 等遠程桌面工具。但是，大部分只需遠程控制對方的瀏覽器，不需要操作系統級別的控制。於是他從瀏覽器入手，開發出了這款既關注隱私保護和易用性，又能不佔用過多網絡帶寬的屏幕共享與遠程控制工具「Syncit」。
Syncit 傳遞的數據是文本格式的快照和 op-log。通過觀測網頁視圖的交互和變化，來實現分享和反向控制的能力。數據的傳輸基於 WebRTC + Agora RTM SDK 實現，可以將時延降到更低，保證使用的流暢性。
視頻：Syncit Demo 演示
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：https://github.com/Yuyz0112
作者將在週六的直播分享 Syncit 的實現細節。同時，公開 Syncit 源碼。歡迎大家掃碼報名，在直播間與作者交流更多技術細節。感興趣的同學，可掃碼報名。
瀏覽器內的像素級屏幕共享與遠程控制
餘彥臻
【直播時間】6月20日 14:00
☑瀏覽器視圖快照和 operation log 的實現細節和難點
☑可感知內容的全新隱私保護能力
☑基於 WebRTC 實現的低時延傳輸層
☑沙盒化的遠程控制能力
掃碼報名
