> For the complete documentation index, see [llms.txt](https://legacy-docs.usesmileid.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.usesmileid.com/further-reading/troubleshooting/image-capture-issues-on-web-client.md).

# Image capture issues on web client

## 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\
\- [Chromium Bug Report](https://bugs.chromium.org/p/chromium/issues/detail?id=1373090)

### 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.

![](/files/8W3fTnMFIFrHWiZnXKUt)\\

### Version with fix

This fix has been automatically applied in our Web Integration (iframe embed), and Smile Links. However, if you're using the [Javascript SDK](/integration-options/web-mobile-web/javascript-sdk-beta.md), the update is available on v1.0.2 upwards.

## Problem - Camera not loading

In some situations, it is required that the web client ([Javascript SDK](https://docs.usesmileid.com/integration-options/web-mobile-web/javascript-sdk-beta), [Hosted Web Integration](https://docs.usesmileid.com/integration-options/web-mobile-web/web-integration), or [Smile links](https://docs.usesmileid.com/integration-options/no-code/smile-links)) 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.

To ensure that the camera works when integrating Smile ID in a browser ([Javascript SDK](https://docs.usesmileid.com/integration-options/web-mobile-web/javascript-sdk-beta), [Hosted Web Integration](https://docs.usesmileid.com/integration-options/web-mobile-web/web-integration), or [Smile links](https://docs.usesmileid.com/integration-options/no-code/smile-links)) 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.

See some sample snippets for iframe usage below:

{% hint style="success" %}
To allow for all domains:

`<iframe src ="https://links.usesmileid.com/xxx" allow="camera *"></iframe>`
{% endhint %}

{% hint style="success" %}
To allow for specific domains:

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

\
You can find more technical context on this setup in the MDN documentation [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Permissions-Policy#iframes).

## 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.

{% tabs %}
{% tab title="Flutter" %}

```dart
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)

}
```

Please see the [flutter webview documentation here](https://pub.dev/packages/webview_flutter/example)
{% endtab %}

{% tab title="React Native" %}

```javascript
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}
    />
  );
}
```

{% endtab %}

{% tab title="Swift UI" %}

```swift
// 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)
    }
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://legacy-docs.usesmileid.com/further-reading/troubleshooting/image-capture-issues-on-web-client.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.