[發明專利]一種網頁同屏方法與系統

在審

• 申請號: 202111168319.1
• 申請日: 2021-10-10
• 公開（公告）號: CN113868575A
• 公開（公告）日: 2021-12-31
• 發明（設計）人: 姜波;路玉太;韓文博
• 申請（專利權）人: 青島希望鳥科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06F16/957
• 代理公司: 暫無信息
• 代理人: 暫無信息

本申請提供了一種網頁同屏方法、系統，所述系統包括服務端、客戶端，所述方法包括：服務端接收同屏創建請求，在服務端瀏覽器實例中加載目標網頁生成目標網頁實例，并注入第一腳本、啟動頁面監聽，在網頁加載完成或監聽到網頁內容變化后，序列化網頁DOM生成同屏數據，或將網頁內容在Canvas上繪制并獲取Canvas數據生成同屏數據，或將網頁的顯示內容生成圖片作為同屏數據，將同屏數據向客戶端發送，另外，接收客戶端發送的網頁操作事件在服務端瀏覽器實例中執行。可見，本申請在客戶端瀏覽同屏網頁、收集操作事件，在服務端實際執行網頁，將執行結果發送至客戶端渲染，可實現對任一網頁或網址快速同屏，具有適用性強、實施快、穩定性高的優勢。

技術領域

本發明涉及互聯網通信技術領域，尤其涉及一種網頁同屏方法與系統。

背景技術

網頁同屏利于網站訪問者通過網站直接互動交流，大大提升了溝通效率。

但現有的網頁同屏技術，存在諸多問題，例如：實現網頁同屏需要定制開發，編寫專門的同屏程序，實施成本高；部分同屏技術采用引入同屏庫的方式實現，同樣需要修改網頁程序、部署網站等步驟，無法做到對任意頁面拿來即用，故實施效率低；局限于對單頁面的同屏,或網頁跳轉后存在同屏業務中斷、重新連接現象，如在同屏過程中包含音視頻通信，則在頁面跳轉時同樣存在音視頻中斷問題,效果較差；同屏過程新用戶加入不能即時同步到當前的同屏狀態,或者需要所有客戶端同時刷新頁面，從頭開始同屏，體驗較差；在同屏過程中不能實時錄制，需等待同屏完成才能錄制，等待時間長；在多個設備之間同屏，受設備差異性限制,各終端顯示不一致,導致涂鴉錯位，影響交流；針對同屏網頁中的一個操作，會對應所有客戶端執行多次,即一個操作會發送多次請求，導致程序運行混亂嚴重問題；如在同屏網頁中存在Canvas，在同屏過程中會產生大量數據,阻塞通信。

因此，考慮現有網頁同屏技術中存在實施成本高、效率低問題，且同屏效果、用戶體驗均存在問題，同時容易導致網絡問題與運行錯誤，亟需提出一種新的網頁同屏實現方法，解決以上問題。

發明內容

針對上述問題，本發明提供一種網頁同屏的方法與系統，旨在高效、快捷的基于任何網頁快速建立同屏交流，同時解決現有技術在實現網頁同屏時存在的網頁跳轉導致同屏業務中斷與音頻中斷、用戶實時加入體驗差、不能實時錄制、涂鴉錯位、多個網頁請求重復執行、Canvas同步時網絡阻塞等問題。本發明提供的技術方案如下：

第一方面，本申請提供了一種網頁同屏方法，所述方法應用于服務端，所述方法包括：

在所述服務端創建一個瀏覽器實例，在所述瀏覽器實例中加載目標網頁，生成目標網頁實例，在所述目標網頁實例中注入第一腳本，并啟動頁面監聽；

在所述目標網頁實例內容加載完成或者監聽到所述目標網頁實例內容發生變化后，序列化所述目標網頁實例DOM生成序列化后的DOM數據，將所述序列化后的DOM數據作為同屏數據向所述客戶端發送，或者，將所述目標網頁實例顯示內容在第一Canvas上執行繪制，基于所述第一Canvas獲取Canvas數據，將所述Canvas數據作為同屏數據向所述客戶端發送，或者，基于所述目標網頁實例顯示內容生成圖片數據，將所述圖片數據作為同屏數據向所述客戶端發送；

還包括：

接收所述客戶端發送的網頁操作事件，執行其包含的網頁操作；

其中，所述目標網頁為用于同屏的網址或網頁文件；所述第一腳本至少包括啟動頁面監聽、DOM序列化處理和/或第一Canvas繪制與獲取Canvas數據和/或生成圖片數據、基于接收的網頁操作事件執行網頁操作功能；所述Canvas數據包括基于所述第一Canvas的繪制生成繪制數據或基于所述第一Canvas顯示內容生成圖片數據；所述客戶端通過訪問同屏網頁實現對所述目標網頁實例內容的同屏瀏覽與操作。