Android WebView not allowed to load local resource error Resolution __web

Previously wrote several blog is about the simple use of webview and how and JS interaction.
Students who are not familiar with the use of WebView and web interaction can look first.
Simple use of WebView
Android's interaction with Web pages
Add a progress bar to WebView

The demo of this movie blog is based on a demo of the following blog

Android load Web camera to take photos and show

In the previous Android loaded Web camera to take photos and display the blog, I was loading the local Web page, and then the camera to show pictures to the page, this is no problem.
However, when I put the Web page on the server, this time WebView loaded the Web page on the server, in the camera to take pictures of the phone will be reported not allowed to load the local resource error

Web page or the previous page, nothing changed, this is put to the server, loading is the service side of the page

   Webview.loadurl ("http://yuzhiqiang.name/testWebView/index.html");

Let's take a look at the running effect:

As you can see, the picture does not appear on the page, open the console to see that we have called the method of displaying the picture, but reported the error allowed to load local resource.

reason

Why loading a local Web page is OK, and loading the page on the server is not going to work.

This is because we are loading the local page is using the file:///to get the local data, this time because the local page is also through the file:///to load, so can get the data, but, when we use the HTTP protocol to load the page, and then through the file:/// Taking pictures is not allowed because of security reasons. So you'll report an error similar to the following:
Not allowed to load local resource:file:///xxxxxx "

Solutions

The solution is to simulate the HTTP request, and then rewrite the Shouldinterceptrequest method to intercept the request, reconstruct the webresourceresponse, and pass the data to the front end by streaming, Return to the webresourceresponse you have constructed.

Below look at the specific code implementation, my side need to pass is the picture:
First you have to contract a field with the front page to represent the picture that I want to pass.

First of all modify the front end display picture code, mainly is the displayimg () method of file:///modified to the agreed good key

The following is the page code to load

    var imgdom;
    $ (function () {/

        * Click event *
        /$ ("img"). ON ("click", Function () {
            Console.log ("Click the Android Camera");
            Imgdom = this; Assigns the currently clicked IMG tag to the variable imgdom
            console.log ("Current node:" + imgdom);
            Window.android.takePhoto ();

        });

    /* Display Picture/
    function displayimg (path) {
        Console.log ("Show Picture");

        /* Convention key*/
        var androidimgkey= "http://androidimg"

        $ (imgdom). attr ("src", Androidimgkey + path);

    }

Android Side code:
Mainly rewrite the Shouldinterceptrequest method

            @Override public webresourceresponse shouldinterceptrequest (WebView webview, Webresourcerequest we

                bresourcerequest) {FileInputStream input;

                String URL = Webresourcerequest.geturl (). toString ();
                String key = "http://androidimg"; /* If the request contains a contract field description is to take the local picture/if (Url.contains (key)) {String Imgpath = url.replace (key),
                    "");
                    L.i ("Local picture path:" + Imgpath.trim ()); try {/* reconstruct webresourceresponse the way data has been streamed into/input = new FileInputStream (
                        New File (Imgpath.trim ()));

                        Webresourceresponse response = new Webresourceresponse ("Image/jpg", "UTF-8", input);
                    /* returns webresourceresponse*/return response;

                    catch (FileNotFoundException e) {e.printstacktrace ();

       }         Return Super.shouldinterceptrequest (WebView, webresourcerequest); }

And then look at the effect of the operation:

As you can see, we have successfully got the data.

Hope to help you, here is the demo. You can change the page to the page above your server

Demo