[發明專利]頁面視頻渲染方法及裝置

有效

• 申請號: 202010113625.4
• 申請日: 2020-02-24
• 公開（公告）號: CN111432262B
• 公開（公告）日: 2022-05-24
• 發明（設計）人: 王浩東;朱珍
• 申請（專利權）人: 杭州海康威視數字技術股份有限公司
• 主分類號: H04N21/431
• 分類號: H04N21/431;H04N21/44;H04N21/443;H04N21/4402;H04N21/81
• 代理公司: 北京匯思誠業知識產權代理有限公司 11444
• 代理人: 馮偉

本發明公開一種頁面視頻渲染方法及裝置。由主線程創建至少一個子線程，在播放頁面視頻時，當主線程接收到多個視頻窗口的視頻原始碼流時，主線程調用子線程分別對每個視頻窗口的視頻原始碼流進行視頻解碼，以獲得每個視頻窗口的圖像數據；然后，主線程接收子線程回調的每個所述視頻窗口的圖像數據，當頁面刷新時，主線程將多個所述視頻窗口的圖像數據合并提交至圖形處理器。進而，主線程還將基于多個所述視頻窗口的圖像數據，向所述圖形處理器合并提交繪制指令。本技術方案由于將視頻解碼的過程分配到子線程中，從而提高了多核CPU的利用率，并且通過合并提交圖像數據以及合并繪制指令，降低了多視頻窗口下的操作耗時及系統開銷。

【技術領域】

本發明涉及網頁視頻渲染技術領域，尤其涉及一種頁面視頻渲染方法及裝置。

【背景技術】

Web圖形庫(Web Graphics Library，簡稱WebGL)是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，以使Web開發人員可以借助系統顯卡在瀏覽器里更流暢地展示3D場景和模型，還能創建復雜的導航和數據視覺化。可見，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜3D結構的網站頁面，甚至可以用來設計3D網頁游戲。

圖1A是現有技術中的一種頁面視頻渲染方法的信令時序示意圖。

參考圖1A，在視頻播放過程中，流媒體服務101向頁面發送視頻原始碼流，JS(即JavaScript)頁面線程102接收到視頻原始碼流后進行視頻解碼，并將解碼后的紋理數據以及繪制指令發送至圖形處理器103(Graphics Processing Unit，簡稱GPU)，GPU基于接收到的紋理數據和執行制定窗口畫面的繪制指令，完成畫面渲染。

但是，由于操作系統中單個線程只能使用一個CPU核心進行計算，因此在頁面中存在多個窗口同時播放視頻的場景下，頁面視頻播放過程中占用JS頁面線程的時間將增加，導致JS頁面線程的負荷過大。

圖1B是采用圖1A所示的頁面視頻渲染方法的過程中JS頁面線程的耗時分布示意圖。

參考圖1B，以頁面中存在三個窗口播放視頻為例，每個窗口接收到一幀視頻原始碼流都將進行視頻解碼，提交紋理數據和繪制指令三個過程，這三個過程的耗時分別表示為A，B，C，而JS頁面線程處理事件(例如用戶輸入，定時器等)、頁面業務邏輯處理以及空閑狀態等耗時過程表示為D。

具體地，當JS頁面線程接收到窗口1的視頻原始碼流，進行視頻解碼，提交紋理數據和繪制指令分別對應的耗時過程表示為A1、B1以及C1。經過耗時過程D，當JS頁面線程接收到窗口2的視頻原始碼流，進行視頻解碼，提交紋理數據和繪制指令分別對應的耗時過程表示為A2、B2以及C2。經過耗時過程D，當JS頁面線程接收到窗口3的視頻原始碼流，進行視頻解碼，提交紋理數據和繪制指令分別對應的耗時過程表示為A3、B3以及C3。

可見，當窗口個數增長時，頁面視頻播放過程占用JS頁面線程的時間將線性增加，導致線程負荷過大，該線程會很快滿載甚至超載運行，從而導致視頻解碼速率跟不上接收視頻數據的速率，頁面視頻幀率下降，無法及時響應用戶輸入事件，頁面卡頓等問題。

【發明內容】

有鑒于此，本發明實施例提供了一種頁面視頻渲染方法及裝置，用以解決現有技術中當頁面存在多個窗口播放視頻時，會出現頁面卡頓等技術問題。

一方面，本發明實施例提供了一種頁面視頻渲染方法，包括：當播放頁面視頻時，若主線程接收到多個視頻窗口的視頻原始碼流，所述主線程調用子線程分別對每個視頻窗口的視頻原始碼流進行視頻解碼，以獲得每個視頻窗口的圖像數據；所述主線程接收子線程回調的每個所述視頻窗口的圖像數據；當頁面刷新時，所述主線程將多個所述視頻窗口的圖像數據合并提交至圖形處理器。