全景視頻的顯示方法和裝置的制造方法
【專利摘要】本發(fā)明公開了一種全景視頻的顯示方法和裝置，所述方法包括：在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻；將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象；在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。通過瀏覽器觀看網(wǎng)頁中的全景視頻時(shí)，不再需要安裝第三方插件，使全景視頻在互聯(lián)網(wǎng)視頻中能夠得到更廣泛的應(yīng)用，為互聯(lián)網(wǎng)用戶觀看全景視頻提供了便利。
【專利說明】
全景視頻的顯示方法和裝置
技術(shù)領(lǐng)域
[0001]本發(fā)明屬于互聯(lián)網(wǎng)領(lǐng)域，具體地說，涉及一種全景視頻的顯示方法和裝置。
【背景技術(shù)】
[0002]傳統(tǒng)網(wǎng)絡(luò)視頻在播放時(shí)，視頻內(nèi)容的可視區(qū)域因拍攝的原因(如:攝像機(jī)鏡頭的取景角度、范圍)導(dǎo)致其固定不可調(diào)，即用戶只能觀看到當(dāng)前的區(qū)域，視頻畫面跟隨攝像機(jī)鏡頭移動(dòng)而變化，用戶觀看時(shí)缺乏現(xiàn)場(chǎng)感，不能身臨其境。
[0003]隨著近些年全景視頻的出現(xiàn)，給網(wǎng)絡(luò)視頻用戶帶來了全新的視覺體驗(yàn)，而全景視頻指的是一種具有360度視角的視頻。全景視頻具有更佳的立體感和真實(shí)感，能夠很好地提供視覺體驗(yàn)。目前已經(jīng)出現(xiàn)了通過動(dòng)作腳本語言(Act1nScript)編寫的Flash 360度全景播放器可以實(shí)現(xiàn)web頁面的全景視頻播放。但由于其基于Flash動(dòng)畫的特點(diǎn)，使得在不支持Flash或者未安裝Flash插件的瀏覽器中無法使用，給用戶觀看網(wǎng)絡(luò)全景視頻造成了局限。

【發(fā)明內(nèi)容】

[0004]有鑒于此，本發(fā)明實(shí)施例提供了一種全景視頻的顯示方法和裝置，用以解決現(xiàn)有技術(shù)中在不支持Flash或者未安裝Flash插件的瀏覽器中用戶無法觀看全景視頻的技術(shù)問題。
[0005]為了解決上述技術(shù)問題，本發(fā)明公開了一種全景視頻的顯示方法，所述方法包括:在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻;將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象;在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。
[0006]為了解決上述技術(shù)問題，本發(fā)明還公開了一種全景視頻的顯示裝置，所述裝置包括:視頻加載模塊，用于在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻；圖像映射模塊，用于將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象;視頻顯示模塊，用于在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。
[0007]為了解決上述技術(shù)問題，本發(fā)明還公開了一種全景視頻的顯示裝置，包括:處理器;用于存儲(chǔ)處理器可執(zhí)行指令的存儲(chǔ)器;其中，所述處理器被配置為:在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻;將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象;在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。
[0008]與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)施例提供的全景視頻的顯示方法和裝置，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻并利用瀏覽器的3D引擎完成播放，通過瀏覽器觀看網(wǎng)頁中的全景視頻時(shí)，不再局限于Flash動(dòng)畫的方式，也不再需要安裝第三方插件，使全景視頻在互聯(lián)網(wǎng)視頻中能夠得到更廣泛的應(yīng)用，為互聯(lián)網(wǎng)用戶觀看全景視頻提供了便利。
【附圖說明】
[0009]為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作一簡(jiǎn)單地介紹，顯而易見地，下面描述中的附圖是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0010]圖1是本發(fā)明實(shí)施例提供的一種全景視頻的顯示方法的流程圖；
[0011]圖2是本發(fā)明實(shí)施例提供的一種全景視頻的顯示方法的流程圖；
[0012]圖3是本發(fā)明實(shí)施例提供的一種全景視頻的顯示方法的流程圖；
[0013]圖4是本發(fā)明實(shí)施例提供的一種全景視頻的顯示裝置的框圖；
[0014]圖5是本發(fā)明實(shí)施例提供的一種全景視頻的顯示裝置的框圖。
【具體實(shí)施方式】
[0015]為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對(duì)本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0016]本發(fā)明實(shí)施例，在終端設(shè)備的瀏覽器打開的網(wǎng)絡(luò)視頻播放頁面中，通過Html5(HTML5是萬維網(wǎng)的核心語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言的第五次重大修改)的視頻(video)標(biāo)簽從服務(wù)端加載全景攝像機(jī)拍攝的全景視頻，3D引擎構(gòu)建一個(gè)3D場(chǎng)景，該場(chǎng)景內(nèi)包括一個(gè)球體和在球體內(nèi)部的攝像機(jī)對(duì)象，將全景視頻映射到球體的內(nèi)表面做為該球體的紋理圖像，瀏覽器播放該全景視頻時(shí)，在播放頁面中顯示攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的視頻圖像。通過瀏覽器觀看網(wǎng)頁中的全景視頻時(shí)，不再需要安裝第三方插件，使全景視頻在互聯(lián)網(wǎng)視頻中能夠得到更廣泛的應(yīng)用，為用戶觀看全景視頻提供了便利。
[0017]圖1是本發(fā)明實(shí)施例提供的一種全景視頻的顯示方法，適用于終端設(shè)備，終端設(shè)備可以是移動(dòng)電話，計(jì)算機(jī)，智能電視，數(shù)字廣播終端，消息收發(fā)設(shè)備，游戲控制臺(tái)，車載控制臺(tái)，平板設(shè)備，醫(yī)療設(shè)備，健身設(shè)備，個(gè)人數(shù)字助理等。如圖1所示，該方法包括以下步驟SlO-S12。
[0018]在步驟SlO中，在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻。
[0019]視頻(video)標(biāo)簽是HTML5定義的一個(gè)新的元素用來指定標(biāo)準(zhǔn)的方式來插入視頻文件到web頁面中，而不需要在瀏覽器安裝任何第三方插件，例如，不需要安裝基于Flash的第三方插件:Adobe Flash Player0
[°02°] Video標(biāo)簽包括源(Source，簡(jiǎn)稱scr)屬性，該屬性的值為頁面加載的全景視頻的URL地址，例如:
[0021] 〈video id = 〃media〃src = 〃http://www.123456.com/test.mp4〃controls width=〃400px〃heigt = 〃400px〃>〈/video>。[0022 ] 其中，src = http: //www.123456.com/test.mp4，代表該全景視頻所在服務(wù)端上的URL地址。屬性“controI”的出現(xiàn)，代表在頁面中顯示一個(gè)視頻控件，比如播放按鈕，進(jìn)度條等?！皐idth”代表頁面中視頻播放器的寬度，“heigt”代表頁面中視頻播放器的高度。
[0023]此外，video標(biāo)簽至少還可能包括以下屬性信息。
[0024]屬性“autoplay”出現(xiàn)時(shí)，代表頁面加載該視頻就緒后馬上播放。
[0025]屬性“l(fā)oop”出現(xiàn)時(shí)，代表當(dāng)視頻文件完成播放后再次開始播放。
[0026]屬性“preload”代表視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果同時(shí)出現(xiàn)屬性“autoplay”，屬性 “preload”將被忽略。
[0027]根據(jù)video標(biāo)簽中定義的上述各個(gè)屬性，瀏覽器在頁面中加載視頻播放器并根據(jù)scr屬性的URL地址從服務(wù)端加載全景視頻。
[0028]全景視頻的格式可以是Ogg格式，MPEG4格式或者WebM格式。其中，0gg格式是帶有Thedora視頻編碼和Vorbis音頻編碼的Ogg文件;MPEG4格式是帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件;WebM格式是帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。或者，在服務(wù)端將全景視頻分別轉(zhuǎn)碼為以上三種格式，以適應(yīng)不同瀏覽器，根據(jù)來自終端設(shè)備的請(qǐng)求報(bào)文中的用戶代理字符串確定終端設(shè)備使用的瀏覽器，并將該瀏覽器能夠播放的視頻格式發(fā)送至終端設(shè)備。
[0029]在步驟Sll中，將全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在球體模型內(nèi)部的攝像機(jī)對(duì)象。
[0030]通過運(yùn)行在瀏覽器中的3D引擎構(gòu)建出三維場(chǎng)景，例如，3D引擎three.js。three.js是JavaScript編寫的WebGL第三方庫，是一款運(yùn)行在瀏覽器中的3D引擎。
[0031 ] 可以使用three.js的場(chǎng)景(Scene)類和透視投影相機(jī)(PerspectiveCamera)類來創(chuàng)建3D場(chǎng)景和該3D場(chǎng)景中的攝像機(jī)對(duì)象，例如:
[0032]this.scene = new THREE.Scene()；
[0033]this.camera = new THREE.PerspectiveCamera(75,cw/ch,0.1,1000)。
[0034]其中，透視投影相機(jī)的構(gòu)造函數(shù)如下所示:
[0035]Per spec tiveCamera(f ον ,aspect ,near, far)，設(shè)置的四個(gè)參數(shù)分別為視界(fov)，縱橫比(aspect)，近平面(near)和遠(yuǎn)平面(far)。其中，視界是指攝像機(jī)對(duì)象的視界角度，可以理解為類似眼睛睜開的角度，眼睛睜得越大，視線的范圍越廣，因此，視界值越大，攝像機(jī)對(duì)象拍攝的畫面就越廣闊，相應(yīng)的，位于畫面中央的物體的圖像就越小。縱橫比代表攝像機(jī)對(duì)象拍攝畫面的縱橫比，即寬度除以高度，這個(gè)值越大，說明畫面寬度越大。近平面，代表攝像機(jī)對(duì)象能拍攝到的最近距離，遠(yuǎn)平面則代表攝像機(jī)對(duì)象拍攝到的最遠(yuǎn)距離。上例中，攝像機(jī)對(duì)象的視界為75度，縱橫比為cw(camerawidth)/ch(cameraheigt)，近平面為0.1，遠(yuǎn)平面為 1000。
[0036]在場(chǎng)景和攝像機(jī)對(duì)象創(chuàng)建完畢后，為了能夠渲染出攝像機(jī)對(duì)象拍攝到的場(chǎng)景，還要?jiǎng)?chuàng)建一個(gè)清染器。three.j s常用的兩個(gè)清染器是WebGLRenderer和CanvasRenderer，使用WebGLRenderer能夠得到更好的視覺效果，并且對(duì)終端設(shè)備的硬件條件要求更高，否則終端設(shè)備無法支持WebGLRenderer，而采用CanvasRenderer能夠支持的終端設(shè)備更多，其兼容性更強(qiáng)。例如，倉Il建清染器WebGLRenderer并將Canvas標(biāo)簽添加到頁面中的元素的代碼如下:
[0037]this.renderer = window.WebGLRenderingContext?new THREE.WebGLRenderer():new THREE.CanvasRenderer()；
[0038]this.renderer.setSize (cw,ch)；
[0039]this.canvas = vjs(this.renderer.domElement)；
[0040]this.playerCon[0].appendChild(this.canvas[0])0
[0041]接下來，將video標(biāo)簽的圖像設(shè)置為球體模型內(nèi)表面的紋理圖像。首先，創(chuàng)建紋理對(duì)象，例如，利用three.js的Texture類創(chuàng)建紋理對(duì)象，并將video標(biāo)簽傳遞至該紋理對(duì)象做為被渲染的圖像，實(shí)現(xiàn)的代碼如下:
[0042]this.textureReflect1n = newTHREE.Texture (this.video，THREE.SphericalRefI ect1nMapping)0
[0043]THREE.Texture是一種紋理構(gòu)造函數(shù)，其標(biāo)準(zhǔn)格式是:
[0044]THREE.Textur e = funct1n( image, mapping，wrapS，wrap T，magFi I ter，minFilter,format,type,anisotropy);其中，第一個(gè)參數(shù)image，用于接收一個(gè)image類型的圖像，或者是V i d e ο標(biāo)簽，參數(shù)m a P P i n g代表映射模式，上例中的THREE.SphericalRef Iect1nMapping代表三維球體反射的映射方式;如果對(duì)其他參數(shù)不進(jìn)行設(shè)置，THREE.Texture構(gòu)造函數(shù)會(huì)以默認(rèn)值自動(dòng)填充。
[0045]然后再創(chuàng)建材質(zhì)對(duì)象，將紋理圖像傳遞給材質(zhì)對(duì)象。例如，將紋理傳遞給THREE.MeshBasicMaterial可通過以下代碼實(shí)現(xiàn):
[0046]var material =new THREE.MeshBasicMaterial({
[0047]map: this.textureReflect1n，
[0048]side: THREE.BackSide
[0049]})0
[0050]接下來，在場(chǎng)景中創(chuàng)建球體模型，并設(shè)置球體模型在場(chǎng)景中的坐標(biāo)。首先創(chuàng)建球體，例如:
[0051]var geometry = new THREE.SphereGeometry(80,64,64)；
[0052]THREE.SphereGeometry是球體的構(gòu)造函數(shù)，其標(biāo)準(zhǔn)格式為THREE.SphereGeometry(radius，segmentsWidth，segmentsHeight，phi Start，phiLength，thetaStart，thetaLength)。其中，radius是半徑；segmentsWidth表不經(jīng)度上的切片數(shù)；segmentsHeight表示瑋度上的切片數(shù);PhiStart表示經(jīng)度開始的弧度；phiLength表示經(jīng)度跨過的弧度；thetaStart表示瑋度開始的弧度;thetaLength表示瑋度跨過的弧度。在上例中，構(gòu)造的球體的半徑是80，經(jīng)度上的切片數(shù)和瑋度上的切片數(shù)都是64。
[0053]然后，為上述球體創(chuàng)建相應(yīng)的模型，設(shè)置該球體模型在場(chǎng)景中的坐標(biāo)，并將該球體模型添加到場(chǎng)景中。例如，該過程可以通過以下代碼實(shí)現(xiàn):
[0054]var sphere = new THREE.Mesh(geometry ,material)；
[0055]sphere.posit1n.x = 0；
[0056]sphere.posit1n.y = 0；
[0057]sphere.posit1n.z = 0；
[0058]sphere.rotat1n.X=Math.PI ；
[0059]this.scene.add(sphere)0
[0060]模型由面組成，面分為三角形面和四邊形面，三角形面和四邊形面組成了網(wǎng)格(Mesh)模型。在Three, js中用THREE.Mesh來表示網(wǎng)格模型。
[0061 ] THREE.Mesh 構(gòu)造函數(shù)是:
[0062]THREE.Mesh = funct1n (geometry ,material);其中第一個(gè)參數(shù) geometry 是一個(gè)THREE.Geometry類型的對(duì)象，他是一個(gè)包含頂點(diǎn)和頂點(diǎn)之間連接關(guān)系的對(duì)象。第二個(gè)參數(shù)Ma t e r i a I就是定義的材質(zhì)，材質(zhì)會(huì)影響光照、紋理對(duì)網(wǎng)格的作用效果。
[0063]在構(gòu)建的場(chǎng)景中，攝像機(jī)對(duì)象設(shè)置在球體模型的內(nèi)部，使攝像機(jī)對(duì)象能夠拍攝到球體內(nèi)表面的紋理圖像，即通過video標(biāo)簽加載的全景圖像。
[0064]在步驟S12中，在播放頁面中顯示攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的球體模型的內(nèi)表面的視頻圖像。
[0065]加載的全景視頻開始自動(dòng)播放或者用戶通過控件觸發(fā)播放時(shí)，開始對(duì)攝像機(jī)對(duì)象拍攝到的球體模型的內(nèi)表面的視頻圖像進(jìn)行渲染。在Three, js中，可以對(duì)加載全景圖像逐幀進(jìn)行清染，通常，我們會(huì)利用setTimeout或set Interval這兩個(gè)函數(shù)或者層疊樣式表(Cascading StyIeSheet，css)3來實(shí)現(xiàn)。但是，css3動(dòng)畫存在一些局限性，比如不是所有屬性都能參與動(dòng)畫、動(dòng)畫緩動(dòng)效果太少、無法完全控制動(dòng)畫過程等等，而setTimeout和setlnterval有著嚴(yán)重的性能問題。因此，使用requestAnimat1nFrame函數(shù)來實(shí)現(xiàn)逐幀清染，它的優(yōu)勢(shì)包括:A、requestAnimat1nFrame會(huì)把每一幀中的所有文檔對(duì)象模型(Document Object Model，D0M)操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個(gè)頻率為每秒60幀;B、在隱藏或不可見的元素中，requestAnimat1nFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的CPU，GPU和內(nèi)存使用量。
[0066]例如，利用requestAnimat1nFrame函數(shù)進(jìn)行逐幀清染，同時(shí)，將紋理對(duì)象的needsUpdate屬性設(shè)置為true即可，相應(yīng)的代碼如下:
[0067]this.renderer.render(this.scene, this.camera)；
[0068]requestAnimat1nFrame(this.animate)；
[0069]this.textureReflect1n.needsUpdate = true o
[0070]NeedsUpdate屬性用于通知渲染器這一幀需要更新緩存，對(duì)于視頻紋理來說，因?yàn)橐曨l是一個(gè)圖片流，每一幀要顯示的畫面都不一樣，所以每一幀都需要將needsUpdate設(shè)為true來更新顯卡中緩存的紋理數(shù)據(jù)。
[0071]本實(shí)施例中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻并利用瀏覽器的3D引擎完成播放，通過瀏覽器觀看網(wǎng)頁中的全景視頻時(shí)，不再需要安裝第三方插件，使全景視頻在互聯(lián)網(wǎng)視頻中能夠得到更廣泛的應(yīng)用，為用戶觀看全景視頻提供了便利。
[0072]在一個(gè)實(shí)施例中，如圖2所示，該全景視頻的顯示方法進(jìn)一步包括以下步驟S13-S14。
[0073]在步驟S13中，檢測(cè)到調(diào)整視角的控制操作；
[0074]在步驟S14中，顯示攝像機(jī)對(duì)象在調(diào)整后的視角下拍攝到的視頻圖像。
[0075]全景視頻被映射到了球體模型的內(nèi)表面，為了使用戶能夠通過瀏覽器頁面觀看360度全景視頻，需要允許用戶通過控制操作來調(diào)整場(chǎng)景中攝像機(jī)對(duì)象的視角，實(shí)現(xiàn)從各種角度觀看全景視頻，該控制操作可以是來自鼠標(biāo)或者手勢(shì)的操作。
[0076]用戶調(diào)整視角的控制操作會(huì)觸發(fā)相應(yīng)的系統(tǒng)事件，例如鼠標(biāo)的點(diǎn)擊和移動(dòng)事件。通過監(jiān)聽相應(yīng)的系統(tǒng)事件來檢測(cè)到用戶調(diào)整視角的控制操作。例如，在Three, js中，調(diào)用攝像機(jī)對(duì)象的10kAt方法實(shí)現(xiàn)視角的調(diào)整，然后對(duì)調(diào)整后的視角下的視頻圖像進(jìn)行渲染，相應(yīng)的實(shí)現(xiàn)代碼如下:
[0077 ] this.cameraTarget.x = I氺Math.sin(phi)氺Math.cos (theta)；
[0078]this.cameraTarget.y = I氺Math, cos (phi)；
[0079]this.cameraTarget.z = I氺Math.sin(phi)氺Math.sin(theta)；
[0080]this.camera.posit1n.copy(this.cameraTarget).negate ()；
[0081 ] this.camera.lookAt(this.cameraTarget)。
[0082]本實(shí)施例中，瀏覽器頁面顯示全景視頻后，用戶可通過鼠標(biāo)或者手勢(shì)操作來隨時(shí)調(diào)整全景視頻的觀看方向和角度，使用戶能夠全方位的觀看到全景視頻的各個(gè)角度的畫面。
[0083]在一個(gè)實(shí)施例中，全景視頻與播放頁面之間會(huì)存在跨域問題?？缬騿栴}是指由于JavaScript同源策略的限制，a.com域名下的js腳本無法操作b.com或是c.a.com域名下的對(duì)象，即使同一域名下的不同端口，不同協(xié)議或者不同子域也不允許數(shù)據(jù)通信。如果加載全景視頻的URL地址與瀏覽器所訪問頁面的URL地址存在以上的跨域問題，如圖3所示，步驟SlO進(jìn)一步實(shí)施為以下步驟S101-S102。
[0084]在步驟SlOI中，向服務(wù)端請(qǐng)求全景視頻，video標(biāo)簽的跨域(CrossOrigin)屬性被設(shè)置為匿名(anonymous)。
[0085]CrossOrigin屬性用來對(duì)跨域資源共享(Cross-Origin Resource Sharing,CORS)進(jìn)行設(shè)置，設(shè)置為匿名時(shí)，代表允許跨域資源共享。
[0086]在步驟S102中，接收到服務(wù)端返回的全景視頻，其中，全景視頻的http響應(yīng)頭包括聲明信息。
[0087]若需要實(shí)現(xiàn)跨域資源共享，保存全景視頻的服務(wù)端也需要聲明允許與哪些域之間實(shí)現(xiàn)跨域資源共享，將允許跨域資源共享的域信息記錄在聲明信息中，例如Access-Contro1—A11w-Originο
[0088]在服務(wù)端返回的http響應(yīng)頭中包括該聲明信息。聲明信息可以是一個(gè)列表，如果接收到的聲明信息包括播放頁面所在域的域信息，則能夠從服務(wù)端獲取到全景視頻的數(shù)據(jù)。在一些情況下，服務(wù)端返回的http響應(yīng)頭的聲明信息被設(shè)置為通配符“*”，例如，Access-Control-Al 1w-Origin: *，則代表允許來自任何域的跨域資源請(qǐng)求。
[0089]本實(shí)施例中，實(shí)現(xiàn)了針對(duì)全景視頻資源的跨域資源共享，使更多網(wǎng)站和平臺(tái)都能夠請(qǐng)求播放全景視頻，增加了全景視頻業(yè)務(wù)的受眾群體，使更多網(wǎng)絡(luò)用戶能有機(jī)會(huì)體驗(yàn)到該業(yè)務(wù)，同時(shí)，也使全景視頻業(yè)務(wù)的服務(wù)端能夠?yàn)橛脩籼峁└S富的內(nèi)容。
[0090]在一個(gè)實(shí)施例中，場(chǎng)景中的攝像機(jī)對(duì)象的視角可以被設(shè)置為魚眼鏡頭，魚眼鏡頭視角范圍大，適合近距離拍攝大范圍景物和場(chǎng)景，在本實(shí)施例中，魚眼鏡頭的視角為180度至220度。魚眼鏡頭在接近被攝物拍攝時(shí)能造成非常強(qiáng)烈的透視效果，使所攝畫面具有一種震撼人心的感染力。通過魚眼鏡頭拍攝的球體模型內(nèi)表面的全景圖像，拍攝到的圖像范圍更廣并且增強(qiáng)了圖像的視覺沖擊力。
[0091]本發(fā)明實(shí)施例提供的全景視頻的顯示方法，更適合用于網(wǎng)絡(luò)視頻直播的場(chǎng)景，例如，對(duì)會(huì)議、聯(lián)歡會(huì)、演唱會(huì)、大型儀式等進(jìn)行現(xiàn)場(chǎng)直播時(shí)，通過全景攝像裝置拍攝現(xiàn)場(chǎng)畫面，將現(xiàn)場(chǎng)畫面加載到網(wǎng)絡(luò)直播頁面后，用戶可以瀏覽到默認(rèn)視角下的現(xiàn)場(chǎng)視頻圖像并且可以通過鼠標(biāo)或者手勢(shì)操作來調(diào)整視角從其他視角觀看現(xiàn)場(chǎng)畫面。用戶能夠360度的瀏覽現(xiàn)場(chǎng)畫面并體驗(yàn)到更逼真的現(xiàn)場(chǎng)效果。
[0092]以下為本發(fā)明的裝置實(shí)施例，用以執(zhí)行本發(fā)明實(shí)施例的上述方法。
[0093]圖4是本發(fā)明實(shí)施例提供的一種全景視頻的顯示裝置，該裝置包括:
[0094]視頻加載模塊20，用于在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻；
[0095]圖像映射模塊21，用于將全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象；
[0096]視頻顯示模塊22，用于在播放頁面中顯示攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的球體模型的內(nèi)表面的視頻圖像。
[0097]在一個(gè)實(shí)施例中，如圖5所示，該裝置還包括:
[0098]操作檢測(cè)模塊23，用于檢測(cè)到調(diào)整視角的控制操作；
[0099]視角調(diào)整模塊24，用于顯示攝像機(jī)對(duì)象在調(diào)整后的視角下拍攝到的視頻圖像。
[0100]在一個(gè)實(shí)施例中，該視頻加載模塊20進(jìn)一步包括:
[0101]請(qǐng)求子模塊，用于向服務(wù)端請(qǐng)求所述全景視頻，所述video標(biāo)簽的跨域(crossOrigin)屬性被設(shè)置為匿名(anonymous)；
[0102]接收子模塊，用于接收到所述服務(wù)端返回的所述全景視頻，其中，所述全景視頻的http響應(yīng)頭包括聲明信息。
[0103]此外，本發(fā)明實(shí)施例中可以通過硬件處理器(hardware processor)來實(shí)現(xiàn)上述各個(gè)功能模塊。
[0104]本發(fā)明實(shí)施例提供了一種全景視頻的顯示裝置，包括:
[0105]處理器；
[0106]用于存儲(chǔ)處理器可執(zhí)行指令的存儲(chǔ)器；
[0107]其中，所述處理器被配置為:
[0?08]在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻；
[0109]將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象；
[0110]在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。
[0111]在一個(gè)實(shí)施例中，所述處理器進(jìn)一步被配置為:
[0112]檢測(cè)到調(diào)整所述視角的控制操作；
[0113]顯示所述攝像機(jī)對(duì)象在所述調(diào)整后的視角下拍攝到的視頻圖像。
[0114]當(dāng)所述全景視頻與播放頁面之間存在跨域問題時(shí)，所述在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻包括:
[ΟΙ15]向服務(wù)端請(qǐng)求所述全景視頻，所述video標(biāo)簽的跨域(crossOrigin)屬性被設(shè)置為匿名(anonymous)；
[0116]接收到所述服務(wù)端返回的所述全景視頻，其中，所述全景視頻的http響應(yīng)頭包括聲明信息。
[0117]所述聲明信息包括所述播放頁面的域信息，或者，所述聲明信息是代表允許任何域請(qǐng)求數(shù)據(jù)的通配符。
[0118]所述攝像機(jī)對(duì)象的視角被設(shè)置為魚眼鏡頭視角。
[0119]所述魚眼鏡頭視角為180度至220度。
[0120]所述全景視頻是由全景攝像裝置拍攝的直播視頻。
[0121]以上所描述的裝置實(shí)施例僅僅是示意性的，其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)網(wǎng)絡(luò)單元上。可以根據(jù)實(shí)際的需要選擇其中的部分或者全部模塊來實(shí)現(xiàn)本實(shí)施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性的勞動(dòng)的情況下，即可以理解并實(shí)施。
[0122]通過以上的實(shí)施方式的描述，本領(lǐng)域的技術(shù)人員可以清楚地了解到各實(shí)施方式可借助軟件加必需的通用硬件平臺(tái)的方式來實(shí)現(xiàn)，當(dāng)然也可以通過硬件?；谶@樣的理解，上述技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品可以存儲(chǔ)在計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)中，如R0M/RAM、磁碟、光盤等，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可以是個(gè)人計(jì)算機(jī)，服務(wù)端，或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行各個(gè)實(shí)施例或者實(shí)施例的某些部分所述的方法。
[0123]最后應(yīng)說明的是:以上實(shí)施例僅用以說明本發(fā)明的技術(shù)方案，而非對(duì)其限制;盡管參照前述實(shí)施例對(duì)本發(fā)明進(jìn)行了詳細(xì)的說明，本領(lǐng)域的普通技術(shù)人員應(yīng)當(dāng)理解:其依然可以對(duì)前述各實(shí)施例所記載的技術(shù)方案進(jìn)行修改，或者對(duì)其中部分技術(shù)特征進(jìn)行等同替換；而這些修改或者替換，并不使相應(yīng)技術(shù)方案的本質(zhì)脫離本發(fā)明各實(shí)施例技術(shù)方案的精神和范圍。
【主權(quán)項(xiàng)】
1.一種全景視頻的顯示方法，其特征在于，所述方法包括: 在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻； 將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象； 在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述方法還包括: 檢測(cè)到調(diào)整所述視角的控制操作； 顯示所述攝像機(jī)對(duì)象在所述調(diào)整后的視角下拍攝到的視頻圖像。3.根據(jù)權(quán)利要求1所述的方法，其特征在于，當(dāng)所述全景視頻與播放頁面之間存在跨域問題時(shí)，所述在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻包括: 向服務(wù)端請(qǐng)求所述全景視頻，所述video標(biāo)簽的跨域(crossOrigin)屬性被設(shè)置為匿名(anonymous)； 接收到所述服務(wù)端返回的所述全景視頻，其中，所述全景視頻的http響應(yīng)頭包括聲明?目息O4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述聲明信息包括所述播放頁面的域信息，或者，所述聲明信息是代表允許任何域請(qǐng)求數(shù)據(jù)的通配符。5.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述攝像機(jī)對(duì)象的視角被設(shè)置為魚眼鏡頭視角。6.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述魚眼鏡頭視角為180度至220度。7.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述全景視頻是由全景攝像裝置拍攝的直播視頻。8.一種全景視頻的顯示裝置，其特征在于，所述裝置包括: 視頻加載模塊，用于在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻；圖像映射模塊，用于將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象； 視頻顯示模塊，用于在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。9.根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述裝置還包括: 操作檢測(cè)模塊，用于檢測(cè)到調(diào)整所述視角的控制操作； 視角調(diào)整模塊，用于顯示所述攝像機(jī)對(duì)象在所述調(diào)整后的視角下拍攝到的視頻圖像。10.根據(jù)權(quán)利要求8所述的裝置，其特征在于，所述視頻加載模塊包括: 請(qǐng)求子模塊，用于向服務(wù)端請(qǐng)求所述全景視頻，所述video標(biāo)簽的跨域(crossOrigin)屬性被設(shè)置為匿名(anonymous)； 接收子模塊，用于接收到所述服務(wù)端返回的所述全景視頻，其中，所述全景視頻的http響應(yīng)頭包括聲明信息。11.一種全景視頻的顯示裝置，其特征在于，包括: 處理器； 用于存儲(chǔ)處理器可執(zhí)行指令的存儲(chǔ)器； 其中，所述處理器被配置為: 在播放頁面中，通過Html5的video標(biāo)簽從服務(wù)端加載全景視頻； 將所述全景視頻映射到場(chǎng)景內(nèi)的球體模型的內(nèi)表面做為所述球體模型的紋理圖像，其中，所述場(chǎng)景由3D引擎創(chuàng)建，還包括被設(shè)置在所述球體模型內(nèi)部的攝像機(jī)對(duì)象； 在所述播放頁面中顯示所述攝像機(jī)對(duì)象在當(dāng)前視角下拍攝到的所述球體模型的內(nèi)表面的視頻圖像。
【文檔編號(hào)】H04N21/4782GK105898337SQ201510794513
【公開日】2016年8月24日
【申請(qǐng)日】2015年11月18日
【發(fā)明人】楊可欣, 王林虎
【申請(qǐng)人】樂視網(wǎng)信息技術(shù)（北京）股份有限公司