web-dev-qa-db-fra.com

Comment accéder à la caméra depuis une Webview?

Dans mon application Android, j'essaie de charger une page Web (qui doit accéder à la caméra) sur WebView. Sur mon ordinateur portable, lorsque je charge la page Web, je peux accéder à la caméra.

Tout le reste sur la page html est affiché. 

Voici l'autorisation que je mets dans le Manifest.xml

    <uses-permission Android:name="Android.permission.CAMERA" />
    <uses-permission Android:name="Android.webkit.PermissionRequest" />
    <uses-permission Android:name="Android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission Android:name="Android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission Android:name="Android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission Android:name="Android.permission.INTERNET" />

Je configure le SDK comme suit:

<uses-sdk
        Android:minSdkVersion="18"
        Android:targetSdkVersion="21" />

Voici mon paramètre de webview: 

private void setMyWebviewSettings(WebSettings MyWebviewSettings){
        MyWebviewSettings.setAllowFileAccessFromFileURLs(true);
        MyWebviewSettings.setAllowUniversalAccessFromFileURLs(true);
        MyWebviewSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        MyWebviewSettings.setJavaScriptEnabled(true);
        MyWebviewSettings.setDomStorageEnabled(true);
        MyWebviewSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        MyWebviewSettings.setBuiltInZoomControls(true);
        MyWebviewSettings.setAllowFileAccess(true);
        MyWebviewSettings.setSupportZoom(true);
    }

Si je pouvais accéder directement à la caméra à partir de mon application (en utilisant une activité normale), pourquoi ne puis-je pas l'ouvrir depuis la WebView?!

androidwebviewandroid-permissions
4
McLan

J'essayais la même chose. Le code ci-dessous a fonctionné pour moi.

Tout d'abord dans le fichier manifeste, nous devons ajouter une autorisation matérielle de la caméra. True en utilisant une étiquette de permission.

Ensuite, vous devez accepter l'autorisation de la caméra pour utiliser les lignes ci-dessous dans votre activité.

webview.setWebChromeClient(new WebChromeClient() {

   @Override
   public void onPermissionRequest(final PermissionRequest request) {
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
         request.grant(request.getResources());
      }
   }

 });
5
meuser07

Ceci est certainement possible avec getUserMedia via WebRTC.

Configurez votre WebView pour autoriser les autorisations et chargez votre code HTML avec loadUrl ():

    WebView myWebView = (WebView) findViewById(R.id.webview);

    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.getSettings().setAllowFileAccessFromFileURLs(true);
    myWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);

    myWebView.setWebViewClient(new WebViewClient());
    myWebView.setWebChromeClient(new WebChromeClient() {
        // Grant permissions for cam
        @Override
        public void onPermissionRequest(final PermissionRequest request) {
            Log.d(TAG, "onPermissionRequest");
            MainActivity.this.runOnUiThread(new Runnable() {
                @TargetApi(Build.VERSION_CODES.M)
                @Override
                public void run() {
                    Log.d(TAG, request.getOrigin().toString());
                    if(request.getOrigin().toString().equals("file:///")) {
                        Log.d(TAG, "GRANTED");
                        request.grant(request.getResources());
                    } else {
                        Log.d(TAG, "DENIED");
                        request.deny();
                    }
                }
            });
        }


    });

    myWebView.loadUrl(LOCAL_FILE);

Ensuite, utilisez getUserMedia dans votre fichier JS, en supposant que vous avez une balise <video> dans votre fichier HTML:

var constraints = { video: { width: 800, height: 800 } };

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.

Enfin, assurez-vous que les autorisations sont définies dans votre manifeste:

<uses-permission Android:name="Android.permission.INTERNET" />
<uses-permission Android:name="Android.permission.RECORD_AUDIO" />
<uses-permission Android:name="Android.permission.CAMERA" />
<uses-permission Android:name="Android.permission.MODIFY_AUDIO_SETTINGS" />
4
drquinn

Si je ne me trompe pas, vous voulez simplement ouvrir l'appareil photo de votre appareil et télécharger la photo que vous venez de capturer dans la visualisation Web sans ouvrir d'autre application; vous devez également disposer de l'autorisation WRITE_EXTERNAL_STORAGE et de méthodes pour traiter les demandes de fichiers et créer de nouveaux fichiers avec l'appareil photo et l'écrire sur votre appareil espace de rangement.

J'espère que cela aide, Open Source (Android Smart WebView) permet de configurer les choses pour vous.

Vous devez rechercher les méthodes openFileChooser() et onShowFileChooser() pour comprendre comment gérer les demandes de fichier de l'entrée Webview et activer la caméra de votre téléphone pour capturer et créer une nouvelle image sans ouvrir d'autres applications.

2
mgks

Voici ce qui a fonctionné pour moi. J'espère que ça aide quelqu'un.

public class MainActivity extends AppCompatActivity implements 
EasyPermissions.PermissionCallbacks{

WebView myWebView;

private String TAG = "TEST";
private PermissionRequest mPermissionRequest;

private static final int REQUEST_CAMERA_PERMISSION = 1;
private static final String[] PERM_CAMERA =
        {Manifest.permission.CAMERA};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    myWebView  = new WebView(this);

    myWebView.getSettings().setJavaScriptEnabled(true);
    myWebView.getSettings().setAllowFileAccessFromFileURLs(true);
    myWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);

    //myWebView.setWebViewClient(new WebViewClient());
    myWebView.setWebChromeClient(new WebChromeClient() {
        // Grant permissions for cam
        @Override
        public void onPermissionRequest(final PermissionRequest request) {
            Log.i(TAG, "onPermissionRequest");
            mPermissionRequest = request;
            final String[] requestedResources = request.getResources();
            for (String r : requestedResources) {
                if (r.equals(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) {
                    // In this sample, we only accept video capture request.
                    AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(MainActivity.this)
                                                        .setTitle("Allow Permission to camera")
                                                        .setPositiveButton("Allow", new DialogInterface.OnClickListener() {
                                                            @Override
                                                            public void onClick(DialogInterface dialog, int which) {
                                                                dialog.dismiss();
                                                                mPermissionRequest.grant(new String[]{PermissionRequest.RESOURCE_VIDEO_CAPTURE});
                                                                Log.d(TAG,"Granted");
                                                            }
                                                        })
                                                        .setNegativeButton("Deny", new DialogInterface.OnClickListener() {
                                                            @Override
                                                            public void onClick(DialogInterface dialog, int which) {
                                                                dialog.dismiss();
                                                                mPermissionRequest.deny();
                                                                Log.d(TAG,"Denied");
                                                            }
                                                        });
                    AlertDialog alertDialog = alertDialogBuilder.create();
                    alertDialog.show();

                    break;
                }
            }
        }

        @Override
        public void onPermissionRequestCanceled(PermissionRequest request) {
            super.onPermissionRequestCanceled(request);
            Toast.makeText(MainActivity.this,"Permission Denied",Toast.LENGTH_SHORT).show();
        }
    });


    if(hasCameraPermission()){
        myWebView.loadUrl("Your URL");
        setContentView(myWebView );
    }else{
        EasyPermissions.requestPermissions(
                this,
                "This app needs access to your camera so you can take pictures.",
                REQUEST_CAMERA_PERMISSION,
                PERM_CAMERA);
    }

}





private boolean hasCameraPermission() {
    return EasyPermissions.hasPermissions(MainActivity.this, PERM_CAMERA);
}

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);

    EasyPermissions.onRequestPermissionsResult(requestCode, permissions, grantResults, this);
}

@Override
public void onPermissionsGranted(int requestCode, @NonNull List<String> perms) {

}

@Override
public void onPermissionsDenied(int requestCode, @NonNull List<String> perms) {

}
}

J'utilise la bibliothèque easypermission pour obtenir l'autorisation de la caméra et n'oubliez pas d'ajouter l'utilisation de l'autorisation pour la caméra dans le manifeste Android.

1
ANUJ GUPTA