I showcase 360 degree images & videos in Android App by using VR SDKs such as KRPano & Panframe libraries. I would like to kick start with creating 360 degree images. The normal images cover just 180 degree in static frame. But the combination of top, bottom, front, back, right, and left direction of images bring up 360 degree images. Lets take a look how to create 360 degree images using DSLR camera.
Taking 360° picture from DSLR camera
Although a lot of gadgets are available for capturing 360° VR content, we are ready to go for neither cost nor quality of output. You could follow the steps given in the Learn 360 Photography ( https://learn360photography.com/) for capturing 360° pictures using our own DSLR camera.I've already encountered krpano when we converted the equi-rectangular image to cube faces. This is the same software we will use to make a 360 virtual tour.
Why Krpano? Here are some reasons to use krpano.
- It's highly customizable. You can create your own skin and animations.
- It's html 5 compatible, it can run on devices that dont support flash like on an ipad
- It's easy to create a tour using the droplets
- You can create offline files for mac(app) and pc(exe) (atleast on the older versions).
Showing 360 degree images using KRPano
Step 1 : First download KRPano SDK from https://krpano.com/download/Step 2: To begin to create your panorama or to create a tour is simply a case of dragging the image or image sets onto the droplet you wish and letting go of the mouse button. This will automatically start the .bat file processing your image(s).
Step 3 : To make KRPano start processing your panorama, simply drag your image(s) onto the desired droplet option:
Step 5 : After this has completed, close the terminal window and in the folder where your original image set is you will find a new set of files and folders. You no longer require your original files so if you want you can move them to somewhere else or delete them.
Step 6: If you now find the .xml file and drag that into the main KRPano window or click ‘Load p.xml and navigate to the .xml file and double click on it.
Step 7 : When we load tour.html from created folder in browser, the 360 degree image is created based on our input images.
Step 8 : Now we have to copy vtour folder & keep it in asset folder of Android App. Now we load tour.html in simple webview as follows,
| try { | |
| myBrowser.getSettings().setJavaScriptEnabled(true); | |
| myBrowser.getSettings().setPluginState(WebSettings.PluginState.ON); | |
| myBrowser.getSettings().setAllowFileAccess(true); | |
| myBrowser.getSettings().setAllowContentAccess(true); | |
| myBrowser.getSettings().setAllowFileAccessFromFileURLs(true); | |
| myBrowser.getSettings().setAllowUniversalAccessFromFileURLs(true); | |
| // For white screen issue added on 8th March 2016 | |
| myBrowser.getSettings().setLoadWithOverviewMode(true); | |
| myBrowser.getSettings().setUseWideViewPort(true); | |
| // Added for webview loading fast on 23 Feb 2016 | |
| myBrowser.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); | |
| if (Build.VERSION.SDK_INT >= 19) { | |
| myBrowser.setLayerType(View.LAYER_TYPE_HARDWARE, null); | |
| } | |
| else { | |
| myBrowser.setLayerType(View.LAYER_TYPE_SOFTWARE, null); | |
| } | |
| // To close webview if no internet connection while loading page | |
| myBrowser.setWebViewClient(new WebViewClient() { | |
| @Override | |
| public void onPageStarted(WebView view, String url, Bitmap favicon) { | |
| super.onPageStarted(view, url, favicon); | |
| if(!loadingDialog.isShowing()){ | |
| loadingDialog.show(); | |
| } | |
| } | |
| @Override | |
| public void onPageFinished(WebView view, String url) { | |
| super.onPageFinished(view, url); | |
| view.clearCache(true); | |
| if(loadingDialog.isShowing()){ | |
| loadingDialog.dismiss(); | |
| } | |
| } | |
| public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { | |
| //myBrowser.loadUrl("file:///android_asset/myerrorpage.html"); | |
| Toast.makeText(PanoramaImageActivity.this, "page loading error.", Toast.LENGTH_LONG).show(); | |
| finish(); | |
| } | |
| }); | |
| // To clear cache on 8 mar 2016 | |
| myBrowser.clearCache(true); | |
| CookieSyncManager.createInstance(this); | |
| CookieManager cookieManager = CookieManager.getInstance(); | |
| cookieManager.removeAllCookie(); | |
| myBrowser.loadUrl("file:///android_asset/vtour/tour.html"); // ****** Working one ****** | |
| }catch (Exception ex){ | |
| Log.e("PanoJSLib", "JS error:" + ex.getMessage()); | |
| } |
Showing 360 degree videos using PanFrame
Step 1 : Add panFrame jar file in lib folder. Add it in gradle as well
| compile files('libs/panframe-1.9.jar') |
Step 3: PFAsset is used to feed 360 video path to PFView.
_pfview = PFObjectFactory.view(this);
_pfasset = PFObjectFactory.assetFromUri(this, Uri.parse(filename), this); _pfview.displayAsset(_pfasset);
Step 4: By adding pfview to any layout for showcasing 360 degree video for Android App.
| _frameContainer.addView(_pfview.getView(), 0); |
Step 5: Status callback from the PFAsset instance. Based on the status this function selects the appropriate action.
I have upload full source code in Github for your reference.
Please feel free to contact me if you have any queries.
Happy coding!!!
