[發明專利]基于HTML5的WEB音視頻自定義渲染方法

在審

• 申請號: 202011161151.7
• 申請日: 2020-10-26
• 公開（公告）號: CN112423100A
• 公開（公告）日: 2021-02-26
• 發明（設計）人: 汪云;劉毅;王濤
• 申請（專利權）人: 深圳市瑞馳信息技術有限公司
• 主分類號: H04N21/434
• 分類號: H04N21/434;H04L29/08;H04N21/236;H04N21/43;H04N21/44;H04N21/8547
• 代理公司: 深圳市中科創為專利代理有限公司 44384
• 代理人: 彭西洋;謝亮

1.一種基于HTML5的WEB音視頻自定義渲染方法，其特征在于，包括步驟：

S1、Web端接收需要自定義渲染的音視頻幀數據及渲染內容；

S2、通過FFMPEG導出導wasm接口將音視頻幀數據解碼成PCM數據和YUV圖像；

S3、通過WebAudio和WebGL進行音視頻自定義渲染。

2.根據權利要求1所述的基于HTML5的WEB音視頻自定義渲染方法，其特征在于，所述步驟S3具體包括：

S31、創建Canvas對象，初始化WebGL，包含YUV圖像渲染、自定義內容渲染需要用到的資源；

S32、創建一個YUV圖像隊列yuvque，該隊列用于存儲視頻解碼后的YUV圖像及自定義渲染數據；并通過一個回調函數在屏幕刷新時檢測當前Audio的播放時間戳acurpts，并將yuvque中所有時間戳PTS小于等于acurpts的YUV圖像渲染到屏幕上；

S33、創建2個MessageChannel mc1和mc2，其中mc1用于視頻幀數據和自定義渲染數據通信，mc2用于音頻幀數據通信；

S34、創建音視頻幀接收線程WebWorker1，創建后暫時先不鏈接服務器，待后續資源準就緒后再傳輸數據流；設置mc1.port1為視頻幀數據發送端，設置mc2.port1為音頻幀數據發送端；

S35、創建視頻解碼線程WebWorker2，綁定mc1.port2為視頻幀接收端；創建音頻解碼線程WebWorker3，綁定mc2.port2為音頻幀接收端；

S36、創建WebAudio，使用默認參數對播放設備進行初始化，并調用resume()接口使能聲音播放；

S37、等待WebWorker2和WebWorker3中的wasm初始化完畢后，通知WebWorker1鏈接視頻服務器進行視頻流傳輸；

S38、當WebWorker1接收到數據后，解析出其中的音視頻幀及自定義渲染數據。

3.根據權利要求2所述的基于HTML5的WEB音視頻自定義渲染方法，其特征在于，步驟S38具體包括：

S381、如果是視頻幀，則發送到視頻解碼模塊，解碼完成后，將YUV圖像發送到UI線程，并按照YUV圖像的顯示時間戳PTS升序排序存儲到yuvque，cbDisplayFun回調中通過檢測音頻播放時間戳將圖像幀及自定義數據渲染到屏幕上；

S382、如果是音頻幀，則發送到音頻解碼模塊，解碼完畢后，將PCM數據發送到UI線程，如果音頻參數與WebAudio初始化參數一致，則直接進行音頻數據播放，如果音頻參數與WebAudio初始化參數不一致，重新初始化WebAudio后，再進行音頻數據播放。

4.根據權利要求3所述的基于HTML5的WEB音視頻自定義渲染方法，其特征在于，步驟S3還包括如下步驟：

S39、當用戶離開頁面時，按照以下順序清理資源：關閉WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注冊，關閉mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。