本發(fā)明涉及VR在線播放技術(shù)領(lǐng)域，尤其涉及一種基于HTML5的VR在線播放方法、系統(tǒng)及播放器。

背景技術(shù)：

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

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

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

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明提供了一種基于HTML5的VR在線播放方法、系統(tǒng)及播放器，主要解決VR視頻在微信、QQ以及手機(jī)瀏覽器中播放的技術(shù)問題；達(dá)到支持IOS和Android版本，并支持基于HLS協(xié)議點(diǎn)播視頻和直播視頻的播放的目的。

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

創(chuàng)建球體模型；

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

接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值。

進(jìn)一步的，所述創(chuàng)建球體模型，包括：

在服務(wù)器內(nèi)存中建立至少一個(gè)球體緩沖區(qū)，形成至少一個(gè)球體模型。

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

監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)；

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

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

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上；

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

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

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建Canvas，將Video的每幀畫面復(fù)制于Cavans上；

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格；將材質(zhì)附著于球體緩沖區(qū)上；

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

進(jìn)一步的，所述接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值，包括：

接收基于客戶端載體發(fā)送的手勢變換數(shù)據(jù)或通過角度傳感器及重力傳感器獲取的客戶端角度及重力變換數(shù)據(jù)；

通過創(chuàng)建的重力及觸摸控制組件根據(jù)角度及重力反饋的變換數(shù)據(jù)，實(shí)現(xiàn)拖動(dòng)，調(diào)整場景相機(jī)的視角；

在渲染過程中更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；或在渲染過程中先完成Video畫面的拷貝，更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)。

本發(fā)明另一方面還提供了一種基于HTML5的VR在線播放系統(tǒng)，包括：

創(chuàng)建模塊，用于創(chuàng)建球體模型；

渲染模塊，用于獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻；

調(diào)整模塊，用于接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值。

進(jìn)一步的，所述創(chuàng)建模塊，包括：

創(chuàng)建單元，用于在服務(wù)器內(nèi)存中建立至少一個(gè)球體緩沖區(qū)，形成至少一個(gè)球體模型。

進(jìn)一步的，所述渲染模塊，包括：

監(jiān)聽單元，用于監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)；

合成單元，用于將所述每一幀數(shù)據(jù)轉(zhuǎn)換成支持的格式后，貼在球體模型的球面紋理上，并將球面紋理附著于球體模型上之后，合成多個(gè)視頻數(shù)據(jù)，得到全景視頻。

進(jìn)一步的，監(jiān)聽單元和合成單元的實(shí)現(xiàn)步驟包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上；

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

進(jìn)一步的，監(jiān)聽單元和合成單元的實(shí)現(xiàn)步驟還包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建Canvas，將Video的每幀畫面復(fù)制于Cavans上；

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格；將材質(zhì)附著于球體緩沖區(qū)上；

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

進(jìn)一步的，所述調(diào)整模塊，包括：

接收單元，用于接收基于客戶端載體發(fā)送的手勢變換數(shù)據(jù)或通過角度傳感器及重力傳感器獲取的客戶端角度及重力變換數(shù)據(jù)；

調(diào)整單元，用于通過創(chuàng)建的重力及觸摸控制組件根據(jù)角度及重力反饋的變換數(shù)據(jù)，實(shí)現(xiàn)拖動(dòng)，調(diào)整場景相機(jī)的視角；

更新單元，用于在渲染過程中更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；或在渲染過程中先完成Video畫面的拷貝，更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)。

本發(fā)明另一方便還提供了一種基于HTML5的VR在線播放器，包括前述任一項(xiàng)所述的系統(tǒng)。

本發(fā)明通過創(chuàng)建球體模型；獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻；接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值的技術(shù)方案，實(shí)現(xiàn)了Android與IOS設(shè)備在微信、QQ以及移動(dòng)瀏覽器中觀看VR全景視頻?？梢宰尯芏郪R廣告，VR互動(dòng)游戲，在移動(dòng)端廣泛的的傳播，用戶不再需要下載第三方的APP就能觀看VR視頻，降低了內(nèi)容運(yùn)營公司獲取用戶的成本。

附圖說明

圖1為根據(jù)本發(fā)明的一種基于HTML5的VR在線播放方法的實(shí)施例一的流程圖；

圖2為根據(jù)本發(fā)明的一種基于HTML5的VR在線播放方法實(shí)例的示意圖；

圖3為根據(jù)本發(fā)明的一種基于HTML5的VR在線播放系統(tǒng)的實(shí)施例二的示意圖；

圖4為根據(jù)本發(fā)明的創(chuàng)建模塊的實(shí)施例二的示意圖；

圖5為根據(jù)本發(fā)明的渲染模塊的實(shí)施例二的示意圖；

圖6為根據(jù)本發(fā)明的調(diào)整模塊的實(shí)施例二的示意圖；

圖7為根據(jù)本發(fā)明的一種基于HTML5的VR在線播放器的實(shí)施例三的結(jié)構(gòu)框圖；

圖8為根據(jù)本發(fā)明的透視相機(jī)的原理說明示意圖。

具體實(shí)施方式

為了使本技術(shù)領(lǐng)域的人員更好地理解本發(fā)明方案，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分的實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都應(yīng)當(dāng)屬于本發(fā)明保護(hù)的范圍。

需要說明的是，本發(fā)明的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當(dāng)情況下可以互換，以便這里描述的本發(fā)明的實(shí)施例能夠以除了在這里圖示或描述的那些以外的順序?qū)嵤４送?，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。

實(shí)施例一

參照圖1，圖1示出了一種基于HTML5的VR在線播放方法的流程圖。本實(shí)施例一為基于HTML5的video組件、Canvas組件。實(shí)現(xiàn)過程中有使用開源框架Three.js，包括：步驟S110至步驟S130。

在步驟S110中，創(chuàng)建球體模型。

包括：

在服務(wù)器內(nèi)存中建立至少一個(gè)球體緩沖區(qū)，形成至少一個(gè)球體模型。

在步驟S120中，獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻。

包括：

監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)；

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

優(yōu)選的，該步驟具體包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

HTML5自帶Video組件，默認(rèn)支持MP4，以及基于HLS協(xié)議的流媒體播放，Android和IOS下都可以無障礙播放非VR視頻文件或流媒體，在HTML5的Video組件播放傳統(tǒng)視頻的基礎(chǔ)上，先將VR視頻作為傳統(tǒng)視頻進(jìn)行播放。

在Video的onPlay事件中做三維場景的初始化，在內(nèi)存中建立球體緩沖區(qū)，將每一幀的畫面視為球體的UV展開圖，將每一幀畫面做為材質(zhì)貼圖，貼在球面紋理上，再將球面紋理附著于球體模型上。初始化動(dòng)作包括：

創(chuàng)建場景；

如圖8所示，通過透視投影算法為場景添加透視相機(jī)；使用透視投影算法獲得的結(jié)果是類似人眼在真實(shí)世界中看到的有“近大遠(yuǎn)小”的效果，在THREE框架中透視投影算法的構(gòu)造方式為：

THREE.PerspectiveCamera(fov,aspect,near,far)，圖中錐體頂點(diǎn)所在位置為人眼所在位置。

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上；

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

優(yōu)選的，該步驟還包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建Canvas，將Video的每幀畫面復(fù)制于Cavans上；

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格；將材質(zhì)附著于球體緩沖區(qū)上；

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

在步驟S130中，接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值。

包括：

接收基于客戶端載體發(fā)送的手勢變換數(shù)據(jù)或通過角度傳感器及重力傳感器獲取的客戶端角度及重力變換數(shù)據(jù)；

通過創(chuàng)建的重力及觸摸控制組件根據(jù)角度及重力反饋的變換數(shù)據(jù)，實(shí)現(xiàn)拖動(dòng)，調(diào)整場景相機(jī)的視角；

在渲染過程中更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；或在渲染過程中先完成Video畫面的拷貝，更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)。

一具體應(yīng)用例子，基于html5和javascript語言實(shí)現(xiàn)，其中為簡化代碼開發(fā)，使用Three.js框架。

H5版本在線播放MP4：

1.創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽Video的Play/Puse/Ended事件；

2.在Video的onPlay事件中做三維場景的初始化，初始化動(dòng)作包括：

(1)創(chuàng)建場景THREE.Scene；

(2)為場景添加透視相機(jī)THREE.PerspectiveCamera；

(3)將視頻數(shù)據(jù)創(chuàng)建為視頻紋理THREE.VideoTexture(video)；

(4)創(chuàng)建球體緩沖區(qū)THREE.SphereBufferGeometry；

(5)創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上THREE.MeshBasicMaterial({map:videoTexture})；

(6)創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上THREE.Mesh(geometry,material)；

(7)創(chuàng)建渲染器THREE.WebGLRenderer，將渲染器渲染后的畫面繪制在Canvas上；

(8)創(chuàng)建重力及觸摸控制組件THREE.VRControls(camera)，重力及觸摸控制組件實(shí)現(xiàn)拖動(dòng)和根據(jù)重力反饋數(shù)據(jù)，改變場景相機(jī)的視角；

(9)在渲染過程中更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；

controls.update()；

renderer.render(scene,camera)；

(10)動(dòng)畫循環(huán)requestAnimationFrame。

另一具體應(yīng)用例子，基于html5和javascript語言實(shí)現(xiàn)，其中為簡化代碼開發(fā)，使用Three.js框架。

H5在線播放HLS點(diǎn)播或直播視頻：

mp4視頻播放只適用用于體積比較小的視頻20M以下，再大對移動(dòng)瀏覽器是個(gè)負(fù)擔(dān)。因?yàn)閙p4視頻是先下載后播放，無論是下載還是播放都是要占用內(nèi)存。

所以最佳策略就是播放基于HLS的流媒體視頻，可以適用ffmpeg指令將mp4大視頻轉(zhuǎn)化為基于HLS的流媒體。

Video組件加載指定的m3u8地址就行，其他流程與MP4視頻文件播放方式一致。但是在IOS的safari內(nèi)核中，限制了webgl拷貝hls的視頻畫面到canvas上，因此HLS的視頻在IOS下無法渲染。

為解決以上問題，在IOS下渲染時(shí)候，需要將Video中視頻的每一幀畫面拷貝到Canvas上。

另一具體應(yīng)用例子，基于html5和javascript語言實(shí)現(xiàn)，其中為簡化代碼開發(fā)，使用Three.js框架。

H5在線播放HLS點(diǎn)播或直播視頻解決IOS黑屏問題：

1.創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽Video的Play/Puse/Ended事件；

2.在Video的onPlay事件中做三維場景的初始化，初始化動(dòng)作包括：

(1)創(chuàng)建Canva將Video的每幀畫面復(fù)制于Cavans上；

(2)創(chuàng)建場景THREE.Scene；

(3)為場景添加透視相機(jī)THREE.PerspectiveCamera；

(4)將視頻創(chuàng)建為視頻紋理THREE.Texture(canvas)；

(5)創(chuàng)建球體緩沖區(qū)THREE.SphereBufferGeometry；

(6)創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上THREE.MeshBasicMaterial({map:videoCanvaTexture})；

(7)創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上THREE.Mesh(geometry,material)；

(8)創(chuàng)建渲染器THREE.WebGLRenderer，將渲染器渲染后的畫面繪制在Canvas上；

(9)創(chuàng)建重力及觸摸控制組件THREE.VRControls(camera)，重力及觸摸控制組件實(shí)現(xiàn)拖動(dòng)和根據(jù)重力反饋數(shù)據(jù)，改變場景相機(jī)的視角；

(10)在渲染過程中先完成Video畫面的拷貝，更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；

canvas.getConetxt(‘2d’).drawImage(video,0,0,window.width,window.height)；

controls.update()；

renderer.render(scene,camera)；

(11)動(dòng)畫循環(huán)requestAnimationFrame。

如圖2所示，區(qū)域100相當(dāng)于手機(jī)屏幕，旋轉(zhuǎn)手機(jī)的時(shí)候，球體向相反的方向旋轉(zhuǎn)，這樣就可以看到球體上的畫面了。HTML5的video組件獲取的每一幀畫面將最終作為材質(zhì)貼在球體的內(nèi)表面上。

本發(fā)明實(shí)施例一通過創(chuàng)建球體模型；獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻；接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值的技術(shù)方案，實(shí)現(xiàn)了Android與IOS設(shè)備在微信、QQ以及移動(dòng)瀏覽器中觀看VR全景視頻。可以讓很多VR廣告，VR互動(dòng)游戲，在移動(dòng)端廣泛的的傳播，用戶不再需要下載第三方的APP就能觀看VR視頻，降低了內(nèi)容運(yùn)營公司獲取用戶的成本。

實(shí)施例二

參照圖3，圖3示出了本發(fā)明提供的一種基于HTML5的VR在線播放系統(tǒng)200一實(shí)施例的結(jié)構(gòu)圖，包括：

創(chuàng)建模塊21，用于創(chuàng)建球體模型。

渲染模塊22，用于獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻。

調(diào)整模塊23，用于接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值。

進(jìn)一步的，如圖4所示，所述創(chuàng)建模塊21，包括：

創(chuàng)建單元211，用于在服務(wù)器內(nèi)存中建立至少一個(gè)球體緩沖區(qū)，形成至少一個(gè)球體模型。

進(jìn)一步的，如圖5所示，所述渲染模塊22，包括：

監(jiān)聽單元221，用于監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)；

合成單元222，用于將所述每一幀數(shù)據(jù)轉(zhuǎn)換成支持的格式后，貼在球體模型的球面紋理上，并將球面紋理附著于球體模型上之后，合成多個(gè)視頻數(shù)據(jù)，得到全景視頻。

進(jìn)一步的，監(jiān)聽單元和合成單元的實(shí)現(xiàn)步驟包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格，將材質(zhì)附著于球體緩沖區(qū)上；

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

進(jìn)一步的，監(jiān)聽單元和合成單元的實(shí)現(xiàn)步驟還包括：

創(chuàng)建Video組件，為Video組件設(shè)置playsinline屬性，監(jiān)聽并獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的Video的Play、Puse和Ended事件；

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

創(chuàng)建Canvas，將Video的每幀畫面復(fù)制于Cavans上；

創(chuàng)建場景；

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

將視頻數(shù)據(jù)創(chuàng)建為視頻紋理；

創(chuàng)建材質(zhì)，將視頻紋理貼在材質(zhì)上；

創(chuàng)建網(wǎng)格；將材質(zhì)附著于球體緩沖區(qū)上；

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

進(jìn)一步的，如圖6所示，所述調(diào)整模塊23，包括：

接收單元231，用于接收基于客戶端載體發(fā)送的手勢變換數(shù)據(jù)或通過角度傳感器及重力傳感器獲取的客戶端角度及重力變換數(shù)據(jù)；

調(diào)整單元232，用于通過創(chuàng)建的重力及觸摸控制組件根據(jù)角度及重力反饋的變換數(shù)據(jù)，實(shí)現(xiàn)拖動(dòng)，調(diào)整場景相機(jī)的視角；

更新單元233，用于在渲染過程中更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)；或在渲染過程中先完成Video畫面的拷貝，更新重力及觸摸組件的數(shù)據(jù)信息，同時(shí)更新場景和相機(jī)數(shù)據(jù)。

具體實(shí)現(xiàn)的功能和處理方式參見方法實(shí)施例一描述的具體步驟。

由于本實(shí)施例二的系統(tǒng)所實(shí)現(xiàn)的處理及功能基本相應(yīng)于前述圖1所示的方法的實(shí)施例、原理和實(shí)例，故本實(shí)施例的描述中未詳盡之處，可以參見前述實(shí)施例中的相關(guān)說明，在此不做贅述。

本發(fā)明實(shí)施例二通過創(chuàng)建模塊創(chuàng)建球體模型；渲染模塊獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻；調(diào)整模塊接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值的技術(shù)方案，實(shí)現(xiàn)了Android與IOS設(shè)備在微信、QQ以及移動(dòng)瀏覽器中觀看VR全景視頻?？梢宰尯芏郪R廣告，VR互動(dòng)游戲，在移動(dòng)端廣泛的的傳播，用戶不再需要下載第三方的APP就能觀看VR視頻，降低了內(nèi)容運(yùn)營公司獲取用戶的成本。

實(shí)施例三

參照圖7，圖7示出了本發(fā)明提供的一種基于HTML5的VR在線播放器300，包括實(shí)施例二中的任一項(xiàng)所述的系統(tǒng)200。

本發(fā)明實(shí)施例三通過創(chuàng)建球體模型；獲取全景視頻采集裝置采集的多個(gè)視頻數(shù)據(jù)的每一幀數(shù)據(jù)，將所述數(shù)據(jù)轉(zhuǎn)換成支持的格式后，渲染到球體模型上，得到全景視頻；接收基于客戶端載體發(fā)送的角度變換數(shù)據(jù)，根據(jù)角度變換數(shù)據(jù)調(diào)整球體模型視圖矩陣值的技術(shù)方案，實(shí)現(xiàn)了Android與IOS設(shè)備在微信、QQ以及移動(dòng)瀏覽器中觀看VR全景視頻。可以讓很多VR廣告，VR互動(dòng)游戲，在移動(dòng)端廣泛的的傳播，用戶不再需要下載第三方的APP就能觀看VR視頻，降低了內(nèi)容運(yùn)營公司獲取用戶的成本。

上述本發(fā)明實(shí)施例序號僅僅為了描述，不代表實(shí)施例的優(yōu)劣。

需要說明的是，對于前述的各方法實(shí)施例，為了簡單描述，故將其都表述為一系列的動(dòng)作組合，但是本領(lǐng)域技術(shù)人員應(yīng)該知悉，本發(fā)明并不受所描述的動(dòng)作順序的限制，因?yàn)橐罁?jù)本發(fā)明，某些步驟可以采用其他順序或者同時(shí)進(jìn)行。其次，本領(lǐng)域技術(shù)人員也應(yīng)該知悉，說明書中所描述的實(shí)施例均屬于優(yōu)選實(shí)施例，所涉及的動(dòng)作和模塊并不一定是本發(fā)明所必須的。

在上述實(shí)施例中，對各個(gè)實(shí)施例的描述都各有側(cè)重，某個(gè)實(shí)施例中沒有詳述的部分，可以參見其他實(shí)施例的相關(guān)描述。

在本申請所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所揭露的裝置，可通過其它的方式實(shí)現(xiàn)。例如，以上所描述的裝置實(shí)施例僅僅是示意性的，例如所述單元的劃分，僅僅為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，裝置或單元的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本發(fā)明各個(gè)實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。上述集成的單元既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能單元的形式實(shí)現(xiàn)。

需要指出，根據(jù)實(shí)施的需要，可將本申請中描述的各個(gè)步驟/部件拆分為更多步驟/部件，也可將兩個(gè)或多個(gè)步驟/部件或者步驟/部件的部分操作組合成新的步驟/部件，以實(shí)現(xiàn)本發(fā)明的目的。

上述根據(jù)本發(fā)明的方法可在硬件、固件中實(shí)現(xiàn)，或者被實(shí)現(xiàn)為可存儲在記錄介質(zhì)(諸如CD ROM、RAM、軟盤、硬盤或磁光盤)中的軟件或計(jì)算機(jī)代碼，或者被實(shí)現(xiàn)通過網(wǎng)絡(luò)下載的原始存儲在遠(yuǎn)程記錄介質(zhì)或非暫時(shí)機(jī)器可讀介質(zhì)中并將被存儲在本地記錄介質(zhì)中的計(jì)算機(jī)代碼，從而在此描述的方法可被存儲在使用通用計(jì)算機(jī)、專用處理器或者可編程或?qū)Ｓ糜布?諸如ASIC或FPGA)的記錄介質(zhì)上的這樣的軟件處理?？梢岳斫猓?jì)算機(jī)、處理器、微處理器控制器或可編程硬件包括可存儲或接收軟件或計(jì)算機(jī)代碼的存儲組件(例如，RAM、ROM、閃存等)，當(dāng)所述軟件或計(jì)算機(jī)代碼被計(jì)算機(jī)、處理器或硬件訪問且執(zhí)行時(shí)，實(shí)現(xiàn)在此描述的處理方法。此外，當(dāng)通用計(jì)算機(jī)訪問用于實(shí)現(xiàn)在此示出的處理的代碼時(shí)，代碼的執(zhí)行將通用計(jì)算機(jī)轉(zhuǎn)換為用于執(zhí)行在此示出的處理的專用計(jì)算機(jī)。

以上所述，僅為本發(fā)明的具體實(shí)施方式，但本發(fā)明的保護(hù)范圍并不局限于此，任何熟悉本技術(shù)領(lǐng)域的技術(shù)人員在本發(fā)明揭露的技術(shù)范圍內(nèi)，可輕易想到變化或替換，都應(yīng)涵蓋在本發(fā)明的保護(hù)范圍之內(nèi)。因此，本發(fā)明的保護(hù)范圍應(yīng)以所述權(quán)利要求的保護(hù)范圍為準(zhǔn)。