iOS使用得圖SDK開發VR播放器

產品概述

iOS SDK包含全景圖片、VR視頻、漫遊主題等多種展現方式,支持小行星模式、陀螺儀、VR雙屏沉浸式觀看。您只需一個連接地址或是一條配置便可展示炫酷的全景效果。

下載並集成SDK （注意：僅支持真機調試）

sdk包下載

demo下載

下載sdk包以後，將sdk包複製項目目錄下

作如下配置

在Linked Frameworks and Libraries 添加三個庫

libz2.tbd

libxml2.tbd

libc++.tbd 

添加相關路徑

將IJKMediaFramework.framework 和opencv2 所在路徑添加到 Framework search Paths

將include文件夾所在路徑添加到Header Search Paths

將libPanoPlayerStatic.a 和 thirdPart文件夾所在路徑添加到Library Search Paths

播放器的引入

在控制器添加播放器

播放器PanoPlayer繼承自UIView 播放器協議：PanoPlayDelegate

PanoPlayer *panoPlayer = [[PanoPlayer alloc] init];

self.panoPlayer = panoPlayer;

[self.view addSubview:panoPlayer];

panoPlayer.frame = self.view.frame;

self.panoPlayer.delegate = self; 

播放本地視頻和圖片

須要建立 PanoPlayerUrl類

PanoPlayerUrl *panoplayerurl = [[PanoPlayerUrl alloc] init]

建立xml

NSString *tempURl = @"<?xml version=\"1.0\" encoding=\"UTF-8\" ?> \

<DetuVr> \

<settings init=\"pano1\" initmode=\"default\" enablevr=\"false\" title=\"\"></settings> \

\

\

<scenes> \

<scene name=\"pano1\" title=\"%title\" thumburl=\"%thumburl\"> \

<preview url=\"\" /> \

<image type=\"%type\"  url=\"%url\" \

\

\

device=\"0\" \

\

/> <view hlookat='0' vlookat='90' fov='110' viewmode='default' /> \

</scene> \

</scenes> \

</DetuVr>";

替換XML相關配置

配置	類型	參數
fileType	圖片	@"sphere"
fileType	視頻	@"video"

NSString *fileType = @"sphere";

//替換文件類型

tempUrl = [tempUrl stringByReplacingOccurrencesOfString:@"%type" withString:fileType];

 

//替換文件地址 （如果本地文件， 完整路徑必須帶  file：//）路徑不能帶中文

tempUrl = [tempUrl stringByReplacingOccurrencesOfString:@"%ul" withString:url];

 

//加載xml 播放資源

[panoplayerurl SetXmlContent:tempUrl];

[self.panoPlayer Play:panoplayerurl];

播放網絡圖片

實例一個panoPlayerUrl，而後傳入圖片地址

PanoPlayerUrl *panoPlayerUrl = [[PanoPlayerUrl alloc] init];

//示例圖片

NSString *app_config_pic = @"http://www.detu.com/ajax/pano/xml/61505";

[panoPlayerUrl SetXMlUrl:app_config_pic];

[self.panoPlayer Play:panoPlayerUrl];

播放網絡視頻

實例一個panoPlayerUrl，而後傳入視頻地址

PanoPlayerUrl *panoPlayerUrl = [[PanoPlayerUrl alloc] init];

//示例視頻

NSString *app_config_mov =  @"http://www.detu.com/ajax/pano/xml/68356";

[panoPlayerUrl SetXMlUrl:app_config_pic];

[self.panoPlayer Play:panoPlayerUrl];

播放器代理方法

代理方法	方法說明
-(void)PanoPlayOnLoading	加載中
-(void)PanoPlayOnLoaded	加載結束
-(void)PanoPlayOnEnter:(PanoramaData*)curpanodata	進入場景
-(void)PanoPlayonLeave:(PanoramaData*)prepanodata	離開場景
-(void)PluginVideoOnStatusChanged:(PanoVideoPluginStatus)s	video Plugin的回調
-(void)PluginVideoOnProgessChanged	視頻進度的改變
-(void)PluginVideoOnSeekFinished	播放結束
-(void)PluginVideoOnPlayerError:(NSError *)e	視頻播放異常

視頻進度條相關

get插件 :self.videoplugin = [self.panoPlayer GetCurrentPluginObject];

當前時間 :self.videoplugin.currentTime

視頻總長 :self.videoplugin.duration

開始播放 :[self.videoplugin start];

暫停播放 ：[self.videoplugin pause];

正在播放：STATUS_PLAYING 暫停：STATUS_PAUSE 中止：STATUS_STOP 結束：STATUS_FINISH 空狀態：STATUS_BUFFER_EMPTY

播放器視角相關模式設置

播放器的陀螺儀開啓 /關閉

self.panoPlayer.gyroEnable = YES; //NO

播放器的VR模式開啓

`[self.panoPlayer setViewMode:VIEWMODE_VR];`

模式說明

模式	說明
VIEWMODE_SPHERE	魚眼模式
VIEWMODE_DEF	全景模式
VIEWMODE_LITTLEPLANET	小行星模式
ViewMode.VIEWMODE_PLANE	平面模式
ViewMode.VIEWMODE_VR	VR 模式

設置完相關角度以後 給播放器set viewMode

 [self.panoPlayer setViewMode:mode];

注意事項

播放結束退出控制器的時候 必定要銷燬播放器

    [self.panoPlayer cleargc];

 

更多內容與學習交流請關注我的微信公衆賬號：極客峯