webcam.js displays black screen on initialization in android webview

[husaindevelop]

We are trying to use webcam js to initiate photo capture process in our android webview app. The code is perfectly working in the browsers, but when we deploy the page as webview in android app, it just shows up black screen after allowing webcam permission.

Here is the MainActivity. Java / Android Manifest File and PHP file that we are using

`(MainActivity.Java
package com.example.mbracegate;

import android.Manifest;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Build;
import android.graphics.Bitmap;
import java.util.*;
import android.view.View;
import android.webkit.PermissionRequest;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.webkit.CookieManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import android.content.pm.PackageManager;

import androidx.annotation.RequiresApi;

public class MainActivity extends Activity {
private ProgressBar progressBar;
private WebView webView;

private class WebChromeClientDemo extends WebChromeClient {
    private WebChromeClientDemo() {
    }

    public void onProgressChanged(WebView view, int progress) {
        MainActivity.this.progressBar.setProgress(progress);
    }
}

private class WebViewClientDemo extends WebViewClient {
    private WebViewClientDemo() {
    }


    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        MainActivity.this.progressBar.setVisibility(8);
        MainActivity.this.progressBar.setProgress(100);
    }

    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        MainActivity.this.progressBar.setVisibility(0);
        MainActivity.this.progressBar.setProgress(0);
    }
}

@SuppressLint({"SetJavaScriptEnabled"})
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    this.progressBar = (ProgressBar) findViewById(R.id.progressBar);
    this.progressBar.setMax(100);
    this.webView = (WebView) findViewById(R.id.simpleWebView);
    this.webView.setWebViewClient(new WebViewClientDemo());
    this.webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    this.webView.setWebChromeClient(new WebChromeClient() {
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onPermissionRequest(final PermissionRequest request) {
            request.grant(request.getResources());
        }
    });

    WebSettings settings = this.webView.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setDomStorageEnabled(true);
    settings.setDatabaseEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

        int hasCameraPermission = checkSelfPermission(Manifest.permission.CAMERA);

        List<String> permissions = new ArrayList<String>();

        if (hasCameraPermission != PackageManager.PERMISSION_GRANTED) {
            permissions.add(Manifest.permission.CAMERA);

        }
        if (!permissions.isEmpty()) {
            requestPermissions(permissions.toArray(new String[permissions.size()]), 111);
        }
    }
    CookieManager.getInstance();


    this.webView.loadUrl("https://mbracecloud.com/index_camera.php");

}

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == 4 && this.webView.canGoBack()) {
        this.webView.goBack();
        return true;
    }
    finish();
    return super.onKeyDown(keyCode, event);
}



public boolean onCreateOptionsMenu(Menu menu) {
    return true;
}

})`

Android Manifest
`

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="true" />
<uses-feature android:name="android.hardware.camera.front" android:required="true" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.level.full" android:required="true" />
<uses-feature android:name="android.hardware.camera.capability.raw" android:required="true" />
<uses-feature android:name="android.hardware.camera.any" android:required="true" />
<uses-feature android:name="android.hardware.microphone" android:required="true" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />


<application
    android:hardwareAccelerated="true"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
    <activity
        android:name="com.example.mbracegate.MainActivity"
        android:label="@string/app_name" >
        <intent-filter>

            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

`

html file
`

<title></title> <script type="text/javascript" src="https://mbracecloud.com/appln_enterprise/es/webcamjs/webcam.min.js"></script> <script language="JavaScript"> // Configure a few settings and attach camera function configure(){ Webcam.set({ width: 900, height:650, image_format: 'jpeg', jpeg_quality: 100 }); Webcam.attach('#my_camera'); } </script>

</head>

<body >
<div id="my_camera">></div>
<input type="button" onClick="configure ();">
</body>

`

Note: We are using appetize.io to test our app. My android emulator is broken, and my smartphone kinda stopped installing apps few days back. So no way except for testing in appetize.io. Here is the url of that test: https://appetize.io/app/wz565bcb9ywcq6cwdmkd53x1uw?device=nexus5&scale=75&orientation=portrait&osVersion=8.1