Webcam not working in Android Web View

[cvsalaskar21]

Hi, Thanks for the library. I had an issue in Android WebView. The Camera doesn't open up android web view but works fine in Android Chrome browser or any other browser. I'm giving all the possible permissions in Android Manifest viz. Camera/Internet/Audio. Following is a screenshot of Android webView loading URL: https://codepen.io/mozmorris/pen/KKwdOPO

Android MainActivity.java is this:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WebView myWebView = null;
    final String SERVER_URL_LOCALHOST = "https://codepen.io/mozmorris/pen/KKwdOPO";
    setContentView(R.layout.activity_main);
    myWebView = findViewById(R.id.webview);

    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.loadUrl(SERVER_URL_LOCALHOST);
}

And Android UI XML is this: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

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

Kindly look into this and revert with your feedback. Thanks and Regards.

[mozmorris]

@cvsalaskar21 this will almost certainly be a permissions issue. This cropped up before I think, and it was mentioned about setting the correct device permissions in your AndroidManifiest.xml. I'm not familiar with this myself.

[mozmorris]

@cvsalaskar21 did you ever manage to investigate this further?

[cvsalaskar21]

@mozmorris Yes. We couldn't run it on Android Web View with all permission given. However we did find an alternative library which does the same and fortunately it's working fine in Android web view as well. We gave the same set of permissions to the WebView for both while implementing. Now I'm not sure why only the other one worked.

So yours and other library are the only proper solution we could find for our FE which is ReactJS. Else we would have to rely on Native Android calls (for Photo Capture) which is tedious.

[mozmorris]

Thanks for letting me know. When I get some time, I'll investigate it further.

[omar-shabaro]

@cvsalaskar21 just try to remove the 'audio' prop. And it will work

[mozmorris]

@omar-shabaro interesting, but in the past that has caused issues with browsers causing autoplay to fail.

[omar-shabaro]

@mozmorris I just add permission for camera and mic also remove the audio prop and its working fine for me

[mozmorris]

@cvsalaskar21 would you be able to test this out and see if it works for you?

[mozmorris]

...and thanks @omar-shabaro for the suggestion.

[cvsalaskar21]

@omar-shabaro I tried opening https://codepen.io/mozmorris/pen/KKwdOPO in Android WebView and then in JS section tried to remove the audio prop. I've given both Camera and Audio permission in Manifest but it did not work. Still getting the same issue as described in the issue description.

Can you pl share the code snippet of how you did it on your Android WebView (Java/Kt) and Manifest.xml?

[cvsalaskar21]

@omar-shabaro waiting for your response. Can you pl share how you implemented this library to work in your Android WebView?

[Abdilar]

I have the same issue.

[tneels]

Hi. I experienced the same issue. My problem was about to enable "local storage" in the android app.

[omar-shabaro]

@cvsalaskar21 sorry for the late response but I think the storage permission is required.

[cabello]

Related to https://github.com/mozmorris/react-webcam/issues/242 but this issue is more complete.

If I open https://codepen.io/mozmorris/pen/KKwdOPO in my Chrome / Android / Pixel 3:

• the camera shows up, and it works as expected
• it also lists 4 devices
• if I switch devices 💥 then the camera halts, the Chrome tab is toast, I cannot click, interact with anything else, Android still shows the camera as in use, the only alternative now is to close the tab and re-open the page, the Chrome remote inspector shows exceptions (I think it breaks/explodes before it can report the issue).

Maybe there is something with the component unmount lifecycle, some clean up necessary?

I tested https://webrtc.github.io/samples/src/content/devices/input-output/ that has a device select, the behaviour was erratic, sometimes the tab looked broken but the device select still worked, just by putting it in the background would swipe up, would fix it, show the camera and resume working. After a few attempts I got all 4 cameras working as expected, even though the device only has 3 physical cameras. 🤔

[anantsahrawat]

@cvsalaskar21 You need to allow the host application (your website) to use app resources in your WebChromeClient.

myWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onPermissionRequest(PermissionRequest request) {
            request.grant(request.getResources());
        }
    });

You may refer the documentation here

You'll also need to grant the following permissions :

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

I've tested this package with above changes in webview on Android 10.

[csalmeida]

I have the same issue when rendering a page on the MetaMask Browser App on Android, it does work in Chrome and Firefox on Android and iOS.

Unfortunately changing AndroidManifext.xml is not an option since we can't change the app's source code. 🙏