Frontend IntegrationClient-Side Integration

Client-Side Integration

Embed the N2I stream in your website or Android app using an iframe or WebView.

Overview

The N2I frontend (Pip3D) is loaded by pointing an iframe or WebView at the session URL provided by N2I (e.g., https://project-xyz.k8s.n2i-cloud.com/). Appending the required session parameters to that URL starts a streaming session immediately. Navigating away or loading a blank page stops it.

Always use HTTPS for N2I session URLs. Do not modify the base URL — append parameters only to the query string.


Web (iframe)

Add an iframe to your page and set its src to the session URL with the appropriate parameters (see Sessions).

<iframe
  id="n2i-iframe"
  width="720"
  height="1280"
  src="https://project-xyz.k8s.n2i-cloud.com/?deeplinksApp=com.example.mygame&deeplinksURI=null%3A%2F%2F"
  style="border: 0; overflow: hidden;"
  allow="fullscreen; autoplay"
  loading="lazy"
></iframe>

To stop the session, navigate the iframe to a blank page:

document.getElementById("n2i-iframe").src = "about:blank";

Android (WebView)

Create a WebView with the settings below, then load the session URL.

WebView myWebView = new WebView(activityContext);

// Tag the WebView so N2I can identify it for debugging and analytics
String originalUA = myWebView.getSettings().getUserAgentString();
myWebView.getSettings().setUserAgentString("n2iWebView " + originalUA);

// Required settings
myWebView.getSettings().setJavaScriptEnabled(true);       // N2I frontend requires JavaScript
myWebView.getSettings().setDomStorageEnabled(true);       // Required for session state
myWebView.getSettings().setMediaPlaybackRequiresUserGesture(false); // Allow audio on session start

// Recommended for correct scaling
myWebView.getSettings().setLoadWithOverviewMode(true);
myWebView.getSettings().setUseWideViewPort(true);

setContentView(myWebView);

myWebView.loadUrl(
  "https://project-xyz.k8s.n2i-cloud.com/" +
  "?deeplinksApp=com.example.mygame&deeplinksURI=null%3A%2F%2F"
);

To stop the session from the client side, load a blank page:

myWebView.loadUrl("about:blank");

iOS (WKWebView)

import WebKit

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
config.mediaTypesRequiringUserActionForPlayback = []

let webView = WKWebView(frame: view.bounds, configuration: config)
view.addSubview(webView)

let url = URL(string: "https://project-xyz.k8s.n2i-cloud.com/?deeplinksApp=com.example.mygame&deeplinksURI=null%3A%2F%2F")!
webView.load(URLRequest(url: url))

To stop the session:

webView.load(URLRequest(url: URL(string: "about:blank")!))

Next Steps

Once the iframe or WebView is in place, configure session parameters:

Sessions