Set up frontend integration

SDK Integration Instructions

To integrate the SDK:

1. Install the NPM package.

cURL

npm install aai-osp-websdk

2. Initialize the WebSDK.

WebSDK

import AAIOSP from '@aaiosp/websdk'
const container = document.querySelector('#app')
const osp = OSP.init(container!, {
    token: 'XXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX',
    environment: 'sandbox',
    language: 'en',
    captureConfig: {
      type: !!window.MediaRecorder ? 'video' : 'image',
      videoConfig: {
          bitsPerSecond: 200000,
      },
      imageConfig: {
          mimeType: 'image/webp',
          quality: 0.4,
          loopTime: 1000,
      },
    },
    onReady() {
        console.log('onReady')
        osp.open()
    },
    onLoad() {
        console.log('onload')
    },
    onError() {
        console.error('onerror')
    },
    onEvent(data) {
        console.log(`onEvent:${JSON.stringify(data)}`)
    },
    onComplete(){
        console.log('workflow complete!')
    }
})

Attributes of WebSDK

Name	Required	Description
language	Yes	Language of WebSDK texts, en
environment	Yes	The One Stop environment on which to create workflows. For sandbox, global, and Indonesia , use sandbox, sg and id respectively.
captureConfig	Optional	The configuration for the capture process.
captureConfig.type	Optional	video | image, When the browser doesn't support the MediaRecorder API, you can use the image type, which returns the blob image.
captureConfig.videoConfig.videoBitsPerSecond	Optional	Represents the bit rate of the recorded video where the default is 200000
captureConfig.imageConfig.mimeType	Optional	The image type, a string representing the image format. The default value is 'image/jpeg'.
captureConfig.imageConfig.quality	Optional	The image quality, a number between 0 and 1.
captureConfig.imageConfig.loopTime	Optional	The time interval used to get the image

---

Webview Setup Instructions

The following section provides an overview of the steps to embed H5 Liveness Detection into webview.

Android Webview Setup Instructions

Kotlin code

1. Below code snippet configures a Webview in an Android application.

Java

webView.settings.javaScriptEnabled = true
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.webChromeClient = mWebChromeClient

2. Below code snippet creates and configures a custom WebChromeClient for handling permissions, showing/hiding a custom view in fullscreen mode, and managing system UI visibility in a WebViewActivity.

Java

private var mCustomView: View? = null
private var mCustomViewCallback: WebChromeClient.CustomViewCallback? = null
private var mOriginalSystemUiVisibility: Int = 0

private var mWebChromeClient: WebChromeClient = object : WebChromeClient() {

    override fun onPermissionRequest(request: PermissionRequest?) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

            if (ContextCompat.checkSelfPermission(
                    this@WebViewActivity,
                    Manifest.permission.CAMERA
                ) == PackageManager.PERMISSION_GRANTED
            ) {
                request?.grant(request.resources)
            } else {
                //
                ActivityCompat.requestPermissions(
                    this@WebViewActivity,
                    arrayOf(Manifest.permission.CAMERA),
                    111
                )
            }
        }
    }

    override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
        if (mCustomView != null) {
            onHideCustomView()
            return
        }

        mCustomView = view
        mOriginalSystemUiVisibility = window.decorView.systemUiVisibility
        mCustomViewCallback = callback

        val decor = window.decorView as ViewGroup
        decor.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                View.SYSTEM_UI_FLAG_FULLSCREEN or
                View.SYSTEM_UI_FLAG_IMMERSIVE
        decor.addView(mCustomView)
    }

    override fun onHideCustomView() {
        val decor = window.decorView as ViewGroup
        decor.systemUiVisibility = mOriginalSystemUiVisibility
        if (mCustomView != null) {
            decor.removeView(mCustomView)
            mCustomView = null
            mCustomViewCallback?.onCustomViewHidden()
            mCustomViewCallback = null
        }
    }

}

Java code

1. Below code snippet configures a Webview in an Android application.

Java

webSettings.setJavaScriptEnabled(true);
webSettings.setMediaPlaybackRequiresUserGesture(false);
webView.setWebChromeClient(mWebChromeClient);

2. Below code snippet creates and configures a custom WebChromeClient for handling permissions, showing/hiding a custom view in fullscreen mode, and managing system UI visibility in a WebViewActivity.

Java

private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
private int mOriginalSystemUiVisibility;

private WebChromeClient mWebChromeClient = new WebChromeClient() {

    @Override
    public void onPermissionRequest(PermissionRequest request) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (ContextCompat.checkSelfPermission(
                    WebViewActivity.this,
                    Manifest.permission.CAMERA
            ) == PackageManager.PERMISSION_GRANTED) {
                request.grant(request.getResources());
            } else {
                ActivityCompat.requestPermissions(
                        WebViewActivity.this,
                        new String[]{Manifest.permission.CAMERA},
                        111
                );
            }
        }
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        if (mCustomView != null) {
            onHideCustomView();
            return;
        }

        mCustomView = view;
        mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();
        mCustomViewCallback = callback;

        ViewGroup decor = (ViewGroup) getWindow().getDecorView();
        decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                View.SYSTEM_UI_FLAG_FULLSCREEN |
                View.SYSTEM_UI_FLAG_IMMERSIVE);
        decor.addView(mCustomView);
    }

    @Override
    public void onHideCustomView() {
        ViewGroup decor = (ViewGroup) getWindow().getDecorView();
        decor.setSystemUiVisibility(mOriginalSystemUiVisibility);
        if (mCustomView != null) {
            decor.removeView(mCustomView);
            mCustomView = null;
            mCustomViewCallback.onCustomViewHidden();
            mCustomViewCallback = null;
        }
    }
};

iOS Webview Setup Instructions

1. Acquire permission access to front facing camera in the Info.plist file in the App project.

Objective-C

<key>NSCameraUsageDescription</key> 
<string>$(PRODUCT_NAME) need to use your front camera</string>  

2. Set up WKWebView to allow inline media playback (compulsory), all other configurations are as follows.

Objective-C

let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
configuration.mediaTypesRequiringUserActionForPlayback = []
configuration.preferences.javaScriptEnabled = true
configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
self.webView = WKWebView(frame: self.view.bounds, configuration: configuration)

3. Set WebView to full screen.

Objective-C

let sv = self.view
 webView.translatesAutoresizingMaskIntoConstraints = false
 sv.addSubview(webView)
 webView.topAnchor.constraint(equalTo: sv.topAnchor).isActive = true
 webView.leftAnchor.constraint(equalTo: sv.leftAnchor).isActive = true
 webView.bottomAnchor.constraint(equalTo: sv.bottomAnchor).isActive = true
 webView.rightAnchor.constraint(equalTo: sv.rightAnchor).isActive = true

4. Check and request camera permission before entering the H5 Liveness Detection Screen

Objective-C

// 请求相机权限(swift 样例代码)
// Request camera permission (in Swift)
func checkAVAuthorizationStatus(with block: @escaping((_ authed: Bool) -> Void)) {
    let authStatus = AVCaptureDevice.authorizationStatus(for: .video)
    if authStatus == .authorized {
        block(true)
    } else if authStatus == .denied || authStatus == .restricted {
        block(false)
    } else {
        AVCaptureDevice.requestAccess(for: .video) { (result) in
            DispatchQueue.main.async {
                block(result)
            }
        }
    }
}

// Usage
// Check auth status before entering H5 idv webpage.
self.checkAVAuthorizationStatus { authed in
  if authed {
    // Enter H5 webpage directly
  } else {
    // Logic to handle camera unauthorised.
  }
}

5. (Optional) Configure as below to avoid permission pop-ups every time when one enters the H5 live detection screen.

Objective-C

// Make sure your ViewController inherits WKUIDelegate.
class ViewController: UIViewController, WKUIDelegate {
    ...

    // Only verified for iOS 15+
    @available(iOS 15.0, *)
    func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin, initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType, decisionHandler: @escaping (WKPermissionDecision) -> Void) {
        // NOTE: please add necessary security check like domain filter if needed.
        decisionHandler(.grant)
    }
}

self.webView.uiDelegate = self