Question

我正在尝试使用Crosswalk来显示用户的相机。我遇到的问题是它没有显示，我也不知道为什么。控制台也不会显示任何错误。

<!doctype html>
<html>

<head>
    <title>Camera</title>
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src * 'unsafe-eval'; media-src 'self' blob:">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="container">
        <video id="monitor" autoplay></video>
        <canvas id="photo"></canvas>
        <input type=button value="&#x1F4F7;" onclick="snapshot()">
    </div>
    <script type="text/javascript" src="js/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="js/dist/pages/camera.js"></script>
</body>

</html>

我正在使用此javascript来运行它：

$(window).on('load', event => {
    var video = document.getElementById('monitor');
    var canvas = document.getElementById('photo');

    navigator.getUserMedia({
        video: true
    }, stream => {
        video.src = URL.createObjectURL(stream);
        video.onloadedmetadata = function () {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        };
    }, error => {
        console.log('Could not load media');
    });

    function snapshot() {
        canvas.getContext('2d').drawImage(video, 0, 0);
    }
});

我也用这种方式试过javascript：

$(window).on('load', event => {
    var video = document.getElementById('monitor');
    var canvas = document.getElementById('photo');

    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
        video.src = URL.createObjectURL(stream);
        video.onloadedmetadata = () => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        }
    });
});

Answer 1

我必须向应用程序的java端添加运行时权限才能使其正常工作：

@Override
protected void onCreate(Bundle savedInstanceState) {
    if(ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED){
        if(ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.CAMERA)){
            Snackbar.make(xWalkWebView, "Camera access is required to attach pictures to tasks.", Snackbar.LENGTH_INDEFINITE)
            .setAction("OK", new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    // Request the permission
                    ActivityCompat.requestPermissions(GenericActivity.this,
                            new String[]{android.Manifest.permission.CAMERA},
                            159);
                }
            }).show();
        }else {

            // No explanation needed, we can request the permission.

            ActivityCompat.requestPermissions(this,
                    new String[]{android.Manifest.permission.CAMERA},
                    159);

            // 159 is an app-defined int constant. The callback method gets the
            // result of the request.
        }
    }
}

相机没有在Android设备上显示

1 个答案: