LogoLogo
  • Welcome!
  • GETTING STARTED
    • Signing Up
    • Choose a Product
    • Choose an Integration Option
    • Run Your First Test Job
    • Complete Your KYC
    • Fund Your Wallet
    • Go Live!
    • Pricing
  • SUPPORTED ID TYPES & DOCUMENTS
    • For Individuals (KYC)
      • Using ID Number
        • Supported Countries
          • Côte d'Ivoire
            • National ID (without Photo)
            • Resident ID (without Photo)
          • Ghana
            • Ghana Card
            • Ghana Card (without Photo)
            • Passport
            • Voter's ID
          • Kenya
            • Alien Card
            • KRA Pin
            • National ID
            • National ID (without Photo)
            • Passport
            • Tax Information
          • Nigeria
            • Bank Account
            • BVN
            • NIN V2
            • NIN Slip Verification
            • V_NIN (Virtual NIN)
            • Phone Number
            • Voter's ID
          • South Africa
            • National ID
            • National ID (without Photo)
            • Phone Number
            • Refugee and Asylum ID
          • Uganda
            • National ID (without Photo)
            • Basic KYC in Uganda
          • Zambia
            • Bank Account
            • TPIN
          • Zimbabwe
            • National ID (without Photo)
        • Test Data
          • Customising Sandbox Test Data
        • ID Number Regex
        • Visual Samples of Supported ID Types
      • Using Document Image
        • Continents
          • Africa
          • Asia and the Middle East
          • Europe
          • North America
          • Oceania
          • South America
    • For Businesses (KYB)
      • Supported Countries
        • Nigeria
          • Business Registration
          • Tax Information
        • Kenya
          • Business Registration
        • South Africa
          • Business Registration
      • ID Number Regex
  • PRODUCTS
    • For Individuals (KYC)
      • AML Check
        • AML News Media
      • Basic KYC
      • Biometric KYC
      • Digital Address Verification
      • Document Verification
        • Document Verification
        • Enhanced Document Verification
      • Electronic Signature
      • Enhanced KYC
      • Phone Number Verification
      • SmartSelfie™ Authentication
      • SmartSelfie™ Compare
      • Smile Secure
    • For Businesses (KYB)
      • Business Verification
  • Integration Options
    • Mobile
      • Getting Started
      • Products
        • Biometric KYC
        • BVN Consent
        • Document Verification
        • Enhanced Document Verification
        • Enhanced KYC
        • SmartSelfie™ Enrollment and Authentication
        • Enhanced SmartSelfie™ Enrollment And Authentication
      • Customization
        • UI Components
      • Offline Mode
      • Release Notes
        • Android Release Notes
        • iOS Release Notes
        • Flutter Release Notes
        • React Native Release Notes
    • No-Code
      • Smile Links
        • Link FAQs
        • Rest API
    • Server to Server
      • Ruby
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • KYB - Business Verification
          • AML Check
        • Generate Token for Web Integration
        • Utilities
      • Python
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • Java
        • Release Notes
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
      • Node.js
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • Enhanced Document Verification
          • SmartSelfie™ Authentication
          • Business Verification
        • Generate Token for Web Integration
        • Utilities
      • PHP
        • Installation
        • Signature
        • Products
          • Basic KYC
          • Enhanced KYC
          • Biometric KYC
          • Document Verification
          • SmartSelfie™ Authentication
        • Generate Token for Web Integration
        • Utilities
    • Rest API
      • Signing your API Request
        • Using Signature
      • Products
      • Postman Collection
      • Utilities
    • Web / Mobile Web
      • Web Integration
        • Installation
        • Usage
        • End User Consent
        • Support
      • Javascript SDK
        • Installation
        • Usage
        • Migration
        • Deprecated Version
          • Installation
          • Usage
          • Notes
          • Support
  • FURTHER READING
    • FAQs
      • What are your support hours?
      • How do I set up a callback?
      • How to re-enroll, deactivate or delete a user?
      • Add or remove team members
      • What are top-level keys?
      • What are partner_params?
      • How do job types map to the new product names?
      • Is there an API I can use to monitor my wallet balance?
      • Is there an API I can query to check the availability status of an ID type?
      • How do I integrate Smile ID in other countries or query other ID types?
      • What are the image types I can upload to Smile ID?
      • Why aren't Kenyan IDs returning images for some IDs queried?
      • Why are some of my bank verification requests returning 'ID authority unavailable'?
      • How can I look up a specific user's data?
      • Selfie best-practices
      • Document capture best-practices
      • What happens under the hood?
      • Guide to the user consent screen
      • What is code 2302?
      • Using the Demo App and Scanning QR codes
    • Job status
    • KYC receipts
    • Result codes
      • Error codes
    • Securing your account with two-factor authentication (2FA)
    • Security Overview
    • Troubleshooting
      • Troubleshooting error 2204 & 2205 - "You're not authorized to do that"
      • Why is my Web API job taking so long?
      • Image capture issues on web client
Powered by GitBook
On this page
  • Problem - Device not supported
  • Solution
  • Version with fix
  • Problem - Camera not loading
  • Solution
  • Problem - Camera loading in full screen in webView
  • Solution

Was this helpful?

  1. FURTHER READING
  2. Troubleshooting

Image capture issues on web client

This page describes edge cases related to the Smile ID browser based tools and how to solve them.

PreviousWhy is my Web API job taking so long?

Last updated 12 days ago

Was this helpful?

Problem - Device not supported

On some devices using the Web Client(s), we are unable to capture proper images. When we attempt to, we get green or black images. This is a known issue that primarily affects old Android devices.

A version of the chromium engine, shipped with a regression that breaks the WebRTC video stream we use to capture images. This bug was caused by Hardware Accelerated Video Decoding. While this is a setting end users can attempt to change, we do not believe most of our end users have the technical know-how to fix this themselves. References -

Solution

We check the number of colours in the image in the component, and display an error screen when we detect that the image won't work within our systems.

\

Version with fix

This fix has been automatically applied in our Web Integration (iframe embed), and Smile Links. However, if you're using the , the update is available on v1.0.2 upwards.

Problem - Camera not loading

In some situations, it is required that the web client (, , or ) is loaded in an iframe on your website.

While this is trivial to accomplish, there are times when the camera from the component does not display and/or does not provide an option for granting camera usage permissions and the browser therefore blocks the use of the camera. This is due to how web browsers handle camera permissions in nested iframes. Without the correct settings, the browser won’t allow access to the camera, even if permissions are generally enabled.

Solution

In order to proceed, explicit permission needs to be granted for the component to display properly in the browser.

See some sample snippets for iframe usage below:

To allow for all domains:

<iframe src ="https://links.usesmileid.com/xxx" allow="camera *"></iframe>

To allow for specific domains:

<iframe src ="https://links.usesmileid.com/xxx" allow="camera https://www.domain.one https://www.domain.two"></iframe>

Problem - Camera loading in full screen in webView

There are times when the camera of a web component loads up in full screen without the rest of the page. This then makes it difficult to capture an image successfully. This is due to the way mobile devices handles browser based camera inside webView.

Solution

You have to handle inline media playback, and set the configuration to true. This allows the camera view to play inline within the webView rather than forcing a fullscreen playback.

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
//target the platform where webview will be used (iOS/Android)
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
//iOS
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
//android
      params = const PlatformWebViewControllerCreationParams();
    }
//initialize the controller
    _controller = WebViewController.fromPlatformCreationParams(params)
      ..loadRequest(Uri.parse('https://url-to-your-smile-id-web-component/'));
  }

...
...

//now use the _controller in your widget 
//WebViewWidget(controller: _controller)

}
import React from 'react';
import { WebView } from 'react-native-webview';

export default function App(): React.JSX.Element {
  return (
    <WebView
      source={{ uri: 'https://url-to-your-smile-id-web-component/' }}
      style={{ flex: 1 }}
      allowsInlineMediaPlayback={true}
      // allowsFullscreenVideo={true}
      // mediaPlaybackRequiresUserAction={false}
    />
  );
}
// WebView wrapper for SwiftUI
struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        // Configure WebView
        let configuration = WKWebViewConfiguration()
        configuration.allowsInlineMediaPlayback = true
        
        // Create WebView with configuration
        let webView = WKWebView(frame: .zero, configuration: configuration)
        return webView
    }
    
    func updateUIView(_ webView: WKWebView, context: Context) {
        // Create request and load URL
        let request = URLRequest(url: "https://url-to-your-smile-id-web-component/")
        webView.load(request)
    }
}

struct ContentView: View {
    let smileURL = URL(string: "url")!
    
    var body: some View {
        WebView(url: smileURL)
            .edgesIgnoringSafeArea(.all)
    }
}

To ensure that the camera works when integrating Smile ID in a browser (, , or ) inside an iframe add the allow attribute to all levels of the iframe that contains the Smile ID component. This attribute tells the browser that camera access should be allowed.

You can find more technical context on this setup in the MDN documentation .

Please see the

Javascript SDK
Hosted Web Integration
Smile links
here
flutter webview documentation here
Chromium Bug Report
Javascript SDK
Javascript SDK
Hosted Web Integration
Smile links