Embed a Space Directly in an App

Sharing a Matterport Space can take three forms:

  1. For social media, email, texts, and general sharing, just share the link.
  2. For webpages, embed it on your page with an <iframe> HTML tag.
  3. Directly embed the 3D Showcase player in your Android app.

This third option, covered here in this article, is only relevant for software engineers who are creating apps that include Matterport 3D Showcase.


Android (WebView)

First, declare permissions to access the internet in AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET"/>

Next, add WebView to your layout.

<WebView
  android:id="@+id/webView"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

Finally, enable WebGL for your WebView and load the URL.

final WebView webView = (WebView) findViewById(R.id.webView);
// enable WebGL
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
// show the WebGL player
webView.loadUrl(“https://my.matterport.com/show/?m=fZKxJgeSWQZ”);

Be sure to add a handler for VR links.

// handle VR links
webView.setWebViewClient(new WebViewClient() {
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if(url.contains("matterport.com/vr/show")) {
    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
    return true;
  }
return false;
}
});

 

Android (Chrome Custom Tabs)

The previous method uses WebView from WebKit. You can also use Chrome Custom Tabs.

While either method will work, there are advantages and disadvantages for both.

  WebView Chrome Custom Tabs
Embedding Style

Can be embedded at any place and any size. Can be full screen without URL top bar.

Can be a "browser tab" only. No fullscreen mode (cannot hide URL bar). Cannot embed as a view in application UI (a ListView element).
Loading Time Slightly slower Slightly faster (See Chrome Docs)
Customization More complete (analytics, capture events and create actions, etc) Limited (change title bar color, add action items, etc)
WebVR Not Supported Supported
Output webview-android.png custom-tab-android.png
      For more info and how to implement please  read the Chrome docs.
Have more questions? Submit a request