Integrating Popin WebView into Your Android App

This guide walks you through the complete setup for embedding the Popin WebView with camera and microphone access into your Android application.

---

🛠️ Prerequisites

Before you begin, ensure you have the following:

• ✅ Android Studio (latest stable version)

• ✅ Minimum SDK: 21 (Android 5.0, Lollipop)

• ✅ A valid Popin token (Replace XXXXX in the sample code with your brand’s token)

---

🔐 Add Required Permissions

To enable video calling, your app must request camera and microphone permissions.

In your AndroidManifest.xml, add the following:

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

<!-- Optional: for smoother video calls -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

---

📞 Request Runtime Permissions

From Android 6.0 (API 23) onward, permissions must be requested at runtime.

Add this code in your activity before opening the Popin WebView:

if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
        != PackageManager.PERMISSION_GRANTED ||
    ContextCompat.checkSelfPermission(this, Manifest.permission.RECORD_AUDIO)
        != PackageManager.PERMISSION_GRANTED) {

    ActivityCompat.requestPermissions(
        this,
        new String[]{Manifest.permission.CAMERA, Manifest.permission.RECORD_AUDIO},
        100
    );
}

---

🧩 Create the Call Activity

Create a new activity named CallActivity.java. This activity loads the Popin widget in a secure WebView with WebRTC support.

CallActivity.java

public class CallActivity extends AppCompatActivity {

    private WebView webView;
    private ImageButton closeButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this); // Optional: if using AndroidX EdgeToEdge
        setContentView(R.layout.activity_call);

        webView = findViewById(R.id.webview);
        closeButton = findViewById(R.id.closeButton);

        configureWebView();

        if (hasRequiredPermissions()) {
            webView.loadUrl("https://widget01.popin.to/standalone?token=XXXXX&popin=open");
        } else {
            Toast.makeText(this,
                "Please grant camera and microphone permissions first",
                Toast.LENGTH_LONG).show();
            finish();
        }

        closeButton.setOnClickListener(v -> finish());
    }

    private void configureWebView() {
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setDomStorageEnabled(true);
        settings.setMediaPlaybackRequiresUserGesture(false);

        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onPermissionRequest(PermissionRequest request) {
                if (hasRequiredPermissions()) {
                    runOnUiThread(() -> request.grant(request.getResources()));
                } else {
                    request.deny();
                }
            }
        });
    }

    private boolean hasRequiredPermissions() {
        return ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED
            && ContextCompat.checkSelfPermission(this, Manifest.permission.RECORD_AUDIO) == PackageManager.PERMISSION_GRANTED;
    }
}

---

🧱 Layout XML

Create the layout file res/layout/activity_call.xml to define the UI with a full-screen WebView and a close button.

activity_call.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <ImageButton
        android:id="@+id/closeButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:background="@android:color/transparent"
        android:src="@android:drawable/ic_menu_close_clear_cancel" />
</RelativeLayout>

---

🚀 Launching a Popin Call

To initiate a video call using Popin, start the CallActivity from any other part of your app:

Intent intent = new Intent(this, CallActivity.class);
startActivity(intent);

---

📝 Final Notes

• ✅ Ensure the device has working internet, camera, and microphone

• 🎯 Handle runtime permissions gracefully — explain why they’re needed

• 🔐 Don’t forget to replace XXXXX with your actual Popin token

• 🧪 Test across different Android versions to ensure consistent behavior

---

By following this guide, you can seamlessly integrate Popin’s WebView into your Android app and enable real-time video communication with minimal setup.