[發明專利]一種基于HTML5的VR在線播放方法、系統及播放器

在審

• 申請號: 201710040301.0
• 申請日: 2017-01-20
• 公開（公告）號: CN106658212A
• 公開（公告）日: 2017-05-10
• 發明（設計）人: 曹杰;馮雨暉;李屹楠;張濤;馬進
• 申請（專利權）人: 北京紅馬傳媒文化發展有限公司
• 主分類號: H04N21/4782
• 分類號: H04N21/4782;H04N21/81;H04N21/44;G06T15/10
• 代理公司: 北京天奇智新知識產權代理有限公司11340
• 代理人: 劉黎明

技術領域

本發明涉及VR在線播放技術領域，尤其涉及一種基于HTML5的VR在線播放方法、系統及播放器。

背景技術

目前全景視頻(Virtual Reality，VR)，又叫虛擬實境視頻，是指能工巧匠利用專業的VR攝影功能將現場環境真實地記錄下來，再通過計算機進行后期處理，所形成的可以實現三維的空間展示功能的視頻。

目前在VR領域，最缺乏的就是內容，而對于視頻行業來說，內容總是會不斷產生的。如果能將視頻內容和VR技術很好地結合，對于影視行業來說，將為其增添可看性；對于VR設備來說，豐富的視頻會為其增添內容，使其贏得大眾的認可；對于用戶來說，他們對VR視頻有極高的期待，VR技術與視頻的結合將給他們帶來好的體驗。移動終端為載體的VR視頻播放的過程中，95％的視頻都要基于App來播放，但是很多VR版本的廣告、直播、宣傳片需要通過微信、QQ等社交軟件進行傳播和擴散，用戶體驗較差，因此，將VR視頻通過HTML5播放，會給用戶帶來更好的觀看體驗。

由于Krpano是html5VR視頻播放器的先驅，也是全球最大，使用最為廣泛的html5VR視頻播放器SDK，但是這款播放器至今都只能播放mp4視頻文件，不支持HLS協議，同時也不支持Android端的播放。不支持HLS，就意味著mp4視頻必須要完全下載完畢才能播放，這樣用戶等待的時間比較長，如果視頻較大，將會導致移動端瀏覽器直接崩潰。不支持Android端意味著將損失移動領域80％以上的受眾群體。

發明內容

本發明提供了一種基于HTML5的VR在線播放方法、系統及播放器，主要解決VR視頻在微信、QQ以及手機瀏覽器中播放的技術問題；達到支持IOS和Android版本，并支持基于HLS協議點播視頻和直播視頻的播放的目的。

為達到上述目的，本發明一方面提供了一種基于HTML5的VR在線播放方法，包括：

創建球體模型；

獲取全景視頻采集裝置采集的多個視頻數據的每一幀數據，將所述數據轉換成支持的格式后，渲染到球體模型上，得到全景視頻；

接收基于客戶端載體發送的角度變換數據，根據角度變換數據調整球體模型視圖矩陣值。

進一步的，所述創建球體模型，包括：

在服務器內存中建立至少一個球體緩沖區，形成至少一個球體模型。

進一步的，所述獲取全景視頻采集裝置采集的多個視頻數據的每一幀數據，將所述數據轉換成支持的格式后，渲染到球體模型上，得到全景視頻，包括：

監聽并獲取全景視頻采集裝置采集的多個視頻數據的每一幀數據；

將所述每一幀數據轉換成支持的格式后，貼在球體模型的球面紋理上，并將球面紋理附著于球體模型上之后，合成多個視頻數據，得到全景視頻。

進一步的，所述監聽并獲取全景視頻采集裝置采集的多個視頻數據的每一幀數據，將所述每一幀數據轉換成支持的格式后，貼在球體模型的球面紋理上，并將球面紋理附著于球體模型上之后，合成多個視頻數據，得到全景視頻包括：

創建Video組件，為Video組件設置playsinline屬性，監聽并獲取全景視頻采集裝置采集的多個視頻數據的Video的Play、Puse和Ended事件；

在Video的onPlay事件中做三維場景的初始化，初始化動作包括：

創建場景；

通過透視投影算法為場景添加透視相機；

將視頻數據創建為視頻紋理；

創建材質，將視頻紋理貼在材質上；

創建網格，將材質附著于球體緩沖區上；

創建渲染器，將渲染器渲染后的畫面繪制在Canvas上，通過透視相機使用透視投影算法獲得Canvas上的畫面。

進一步的，所述監聽并獲取全景視頻采集裝置采集的多個視頻數據的每一幀數據，將所述每一幀數據轉換成支持的格式后，貼在球體模型的球面紋理上，并將球面紋理附著于球體模型上之后，合成多個視頻數據，得到全景視頻包括：

創建Video組件，為Video組件設置playsinline屬性，監聽并獲取全景視頻采集裝置采集的多個視頻數據的Video的Play、Puse和Ended事件；

在Video的onPlay事件中做三維場景的初始化，初始化動作包括：

創建Canvas，將Video的每幀畫面復制于Cavans上；

創建場景；

通過透視投影算法為場景添加透視相機；

將視頻數據創建為視頻紋理；

創建材質，將視頻紋理貼在材質上；