android webview 的网络摄像头 (webcam.js) 显示黑屏

Question

我们正在尝试使用网络摄像头 js 在我们的 android webview 应用程序中启动照片捕获过程。该代码在浏览器中完美运行，但是当我们在 android 应用程序中将页面部署为 webview 时，它在允许网络摄像头权限后只显示黑屏。

这是 MainActivity。我们正在使用的 Java / Android 清单文件和 PHP 文件

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 清单文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.mbracegate" >

    <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>
</manifest>

php 文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script type="text/javascript" src="https://mbracecloud.com/appln_enterprise/es/webcamjs/webcam.min.js"></script>

<!-- Code to handle taking the snapshot and displaying it locally -->
<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>
</html>

注意：我们正在使用 appetize.io 来测试我们的应用程序。我的安卓模拟器坏了，几天前我的智能手机有点停止安装应用程序。所以除了在 appetize.io 中测试之外别无他法。这是该测试的网址：https://appetize.io/app/wz565bcb9ywcq6cwdmkd53x1uw?device=nexus5&scale=75&orientation=portrait&osVersion=8.1