45 |
46 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/image-provider/image-provider.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * Page Javascript
3 | */
4 |
5 | /////////////////////////////////////////////////
6 | // Utilities
7 | /////////////////////////////////////////////////
8 |
9 | function removeAllChild ($el) {
10 | if ($el.children.length > 0) {
11 | while ($el.firstChild) {
12 | $el.removeChild($el.firstChild);
13 | }
14 | }
15 | }
16 |
17 |
18 | /////////////////////////////////////////////////
19 | // Global
20 | /////////////////////////////////////////////////
21 |
22 | // response (Native --> Web)
23 | function callbackTakePicture(data, base64String) {
24 | console.log("callbackTakePicture(): data = " + data);
25 |
26 | var $preview = document.querySelector('#img-preview');
27 | removeAllChild($preview);
28 |
29 | var $img = document.createElement('img');
30 | $img.src = 'data:image/png;base64,' + base64String;
31 | $img.width = '320';
32 |
33 | $preview.appendChild($img);
34 | }
35 |
36 |
37 | /////////////////////////////////////////////////
38 | // Document Ready
39 | /////////////////////////////////////////////////
40 |
41 | $(document).ready(function() {
42 | console.info('document.ready ...');
43 |
44 | $('#native-take-a-picture').on('click', function () {
45 | NativeBridge.call("apiTakePicture", { a:"A", b:1, c:false, d:{ d1:"d1", d2:2 } }, "callbackTakePicture");
46 | });
47 |
48 | $('#file-chooser-image').on('change', function (e) {
49 | var $preview = document.querySelector('#img-preview');
50 | removeAllChild($preview);
51 |
52 | var file = e.target.files[0];
53 | LoadImageHelper.loadImage(file, function (result, img, data, base64String) {
54 | if (result) {
55 | img.width = '320';
56 | $preview.appendChild(img);
57 | }
58 | });
59 | });
60 |
61 | });
62 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/qrcode-reader/dist/audio/beep.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArronJo/sample-webview/ab3db31ce5b0a06374239101fe691918a2246565/app/src/main/assets/www/docs/qrcode-reader/dist/audio/beep.mp3
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/qrcode-reader/dist/css/qrcode-reader.css:
--------------------------------------------------------------------------------
1 | #qrr-overlay {
2 | position: fixed;
3 | top: 0;
4 | left: 0;
5 | background: black;
6 | opacity: 0.6;
7 | width: 100%;
8 | height: 100%;
9 | display: none;
10 | z-index: 20000;
11 | }
12 |
13 | #qrr-container {
14 | font-family: sans-serif;
15 | position: fixed;
16 | top: 0;
17 | left: 0;
18 | right: 0;
19 | bottom: 0;
20 | background: white;
21 | padding: 10px;
22 | width: 90%;
23 | height: 90%;
24 | margin: auto;
25 | display: none;
26 | z-index: 20001;
27 | border-radius: 10px;
28 | }
29 |
30 | #qrr-container h1 {
31 | margin-top: 0;
32 | }
33 |
34 | #qrr-close {
35 | position: absolute;
36 | right: 0;
37 | top: 0;
38 | margin-right: 10px;
39 | margin-top: -5px;
40 | font-size: 3em;
41 | cursor: pointer;
42 | color: #808080;
43 |
44 | }
45 |
46 | #qrr-loading-message {
47 | text-align: center;
48 | padding: 15px;
49 | background-color: #eee;
50 | width: 90%;
51 | margin: 30px auto 0;
52 | }
53 |
54 | #qrr-canvas {
55 | display: block;
56 | height: 65%;
57 | max-width: 90%;
58 | overflow-x: scroll;
59 | cursor: pointer;
60 | margin: 30px auto 10px;
61 | }
62 |
63 | #qrr-canvas.hidden {
64 | display: none;
65 | }
66 |
67 | #qrr-output {
68 | width: 90%;
69 | max-height: 15%;
70 | margin: 20px auto 10px;
71 | background: #eee;
72 | padding: 10px;
73 | overflow-y: auto;
74 | }
75 |
76 | #qrr-ok {
77 | display: none;
78 | position: absolute;
79 | right: 10px;
80 | bottom: 10px;
81 | padding: 10px 50px;
82 | cursor: pointer;
83 | font-weight: bold;
84 | text-decoration: none;
85 | background-color: green;
86 | color: white;
87 | border-radius: 10px;
88 | }
89 |
90 | #qrr-output-data {
91 | display: none;
92 | }
93 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/qrcode-reader/dist/js/jsQR/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArronJo/sample-webview/ab3db31ce5b0a06374239101fe691918a2246565/app/src/main/assets/www/docs/qrcode-reader/dist/js/jsQR/README.md
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/qrcode-reader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
47 |
51 |
52 |
48 |
50 | ImageProvider
49 |
53 |
71 |
72 |
79 |
80 |
54 |
70 | Image Preview
55 |
56 |
69 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | 62 |
63 |
66 |
67 |
68 | QRCode reader plugin examples
19 | 20 | 66 | 67 | 68 | 69 | 70 | 71 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /app/src/main/assets/www/docs/sample/image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
24 |
25 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/sample/sample.css:
--------------------------------------------------------------------------------
1 | /**!
2 | * Cascading Style Sheet
3 | */
4 | @charset "utf-8";
5 |
6 | @import "../../dist/vendor/css/reset.css";
7 | /*@import "../../dist/vendor/css/normalize.css";*/
8 | @import "../../common/css/components.css";
9 | @import "../../common/css/extends.css";
10 | @import "../../common/css/anim.css";
11 |
12 | a { color: #989da3; text-decoration: none }
13 | a:hover,
14 | a:focus,
15 | a:active { color: #989da3; text-decoration: none; }
16 |
17 | .identity { background-color:#001935; color:#fefefe; }
18 |
19 | .l-header-container { margin-top:calc(100% - 80%); }
20 | .l-header {}
21 | .l-header h1,h2,h3,h4,h5,h6 { color:#fff; text-align:center; }
22 | .l-header h1 { font-size:3.5em; }
23 |
24 | .l-content-container { margin-top:150px; }
25 | .l-content {}
26 | .l-content h1,h2,h3,h4,h5,h6 { color:#fff; text-align:center; }
27 |
28 | .l-footer-container { margin-top:150px; }
29 | .l-footer {}
30 | .l-footer h1 { color:#fff; font-size:1em; text-align:center; }
31 | .l-footer { color:#989da3; padding:15px 10px 20px 10px; }
32 | .l-footer { text-align:center; }
33 | .l-footer { width:calc(100% - 10%); margin:0 auto; }
34 | .l-footer > p { margin-bottom:8px; font-size:0.8em; }
35 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/sample/sample.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
26 |
30 |
31 |
27 |
29 | Image
28 |
32 |
45 |
46 |
53 |
54 |
33 |
44 |
34 |
43 | Local Files
35 |
36 | 
37 |
38 |
39 |
40 |
41 |
42 |
37 | 38 |
39 | 40 |
31 |
32 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/app/src/main/assets/www/docs/sample/sample.js:
--------------------------------------------------------------------------------
1 | /**!
2 | * Page Javascript
3 | */
4 |
5 | /////////////////////////////////////////////////
6 | // Immediately
7 | /////////////////////////////////////////////////
8 | (function() {
9 | window.onerror = function (err) {
10 | //console.log(arguments);
11 | console.log(err);
12 | for (var i=0; i < arguments.length; i++) {
13 | console.log("[" + i + "] : " + arguments[i]);
14 | }
15 | };
16 |
17 | var ro = new ResizeObserver(function (entries) {
18 | entries[0].target.classList.add('big');
19 | });
20 |
21 | if (ro && "function" === typeof ro.observe ) {
22 | ro.observe(window.video);
23 | }
24 | })();
25 |
26 |
27 | /////////////////////////////////////////////////
28 | // Document Ready
29 | /////////////////////////////////////////////////
30 | $(document).ready(function() {
31 | console.info('document.ready ...');
32 |
33 | $('#call-android-methods-recommended-1').on('click', function () {
34 | Progress.show();
35 |
36 | NativeBridge.callToNative(
37 | "api",
38 | "recommended",
39 | { a:"A", b:1, c:false, d:{ d1:"d1", d2:2 } },
40 | function(data) {
41 | console.log("response..." + JSON.stringify(data));
42 | alert(JSON.stringify(data));
43 | Progress.hide();
44 | },
45 | function(err) {
46 | console.error("error..." + err);
47 | alert(err);
48 | Progress.hide();
49 | }
50 | );
51 | });
52 |
53 | $('#call-android-methods-recommended-2').on('click', function () {
54 | Progress.show();
55 |
56 | // response (Native --> Web)
57 | function callbackNativeResponse (data) {
58 | console.log("callbackNativeResponse(): data = " + JSON.stringify(data));
59 | alert(JSON.stringify(data));
60 | Progress.hide();
61 | }
62 | window['callbackNativeResponse'] = callbackNativeResponse;
63 |
64 | NativeBridge.callToNative(
65 | "api",
66 | "recommended",
67 | { a:"A", b:1, c:false, d:{ d1:"d1", d2:2 } },
68 | "callbackNativeResponse"
69 | );
70 | });
71 |
72 | $('#native-take-a-picture').on('click', function () {
73 | NativeBridge.callToNative(
74 | "camera",
75 | "takePicture",
76 | { a:"A", b:1, c:false, d:{ d1:"d1", d2:2 } },
77 | function (data) {
78 | console.log("callback : data = " + data);
79 | alert(data);
80 | }
81 | );
82 | });
83 |
84 | $('#req-microphone').on('click', function () {
85 | //navigator.mediaDevices.getUserMedia("microphone")
86 | navigator.mediaDevices.getUserMedia({
87 | audio: true
88 | })
89 | .then(function (mediaStream) {
90 | console.log('request: then...', mediaStream);
91 | })
92 | .catch(function (err) {
93 | console.error('request: error: ' + err.toString(), err);
94 | alert(err);
95 | });
96 | });
97 |
98 | // https://www.html5rocks.com/en/tutorials/getusermedia/intro/
99 | $('#req-camera').on('click', function () {
100 | var constraints = navigator.mediaDevices.getSupportedConstraints();
101 | console.log(constraints);
102 |
103 | navigator.mediaDevices.getUserMedia({
104 | audio: false,
105 | video: {
106 | facingMode: { exact: "environment" },
107 | zoom: true,
108 | },
109 | })
110 | .then(function (mediaStream) {
111 | console.log('request: then...', mediaStream);
112 |
113 | var $video = document.querySelector('#media-device-video');
114 | if ($video) {
115 | $video.srcObject = mediaStream;
116 | $video.onloadedmetadata = function(e) {
117 | $video.play();
118 | };
119 | }
120 | })
121 | .catch(function (err) {
122 | console.error('request: error: ' + err.toString(), err);
123 | alert(err);
124 | });
125 | });
126 |
127 |
128 | var $video = document.querySelector('#media-device-video');
129 | var $canvas = document.querySelector('#canvas');
130 | var $img = document.querySelector('#captured-img');
131 |
132 | $('#media-device-video').on('click', function() {
133 | const $canvas = document.createElement("canvas");
134 | $canvas.width = $video.videoWidth;
135 | $canvas.height = $video.videoHeight;
136 | $canvas.getContext("2d").drawImage($video, 0, 0);
137 | // Other browsers will fall back to image/png
138 | var src = $canvas.toDataURL("image/webp");
139 | $img.src = src;
140 | });
141 |
142 | $('#btn-capture').on('click', function() {
143 | $canvas.width = $video.videoWidth;
144 | $canvas.height = $video.videoHeight;
145 | $canvas.getContext("2d").drawImage($video, 0, 0);
146 | // Other browsers will fall back to image/png
147 | var src = $canvas.toDataURL("image/webp");
148 | $img.src = src;
149 | });
150 |
151 | });
152 |
--------------------------------------------------------------------------------
/app/src/main/java/com/snc/sample/webview/activity/WebViewActivity.java:
--------------------------------------------------------------------------------
1 | package com.snc.sample.webview.activity;
2 |
3 | import android.annotation.SuppressLint;
4 | import android.content.Intent;
5 | import android.content.pm.PackageManager;
6 | import android.os.Build;
7 | import android.os.Bundle;
8 | import android.view.KeyEvent;
9 | import android.view.ViewGroup;
10 | import android.webkit.WebView;
11 |
12 | import com.snc.sample.webview.BuildConfig;
13 | import com.snc.sample.webview.R;
14 | import com.snc.sample.webview.bridge.AndroidBridge;
15 | import com.snc.sample.webview.bridge.plugin.PluginCamera;
16 | import com.snc.sample.webview.webview.WebViewHelper;
17 | import com.snc.zero.activity.BaseActivity;
18 | import com.snc.zero.dialog.DialogBuilder;
19 | import com.snc.zero.keyevent.BackKeyShutdown;
20 | import com.snc.zero.requetcode.RequestCode;
21 | import com.snc.zero.util.AssetUtil;
22 | import com.snc.zero.util.EnvUtil;
23 | import com.snc.zero.util.PackageUtil;
24 | import com.snc.zero.util.StringUtil;
25 | import com.snc.zero.webview.CSDownloadListener;
26 | import com.snc.zero.webview.CSFileChooserListener;
27 | import com.snc.zero.webview.CSWebChromeClient;
28 | import com.snc.zero.webview.CSWebViewClient;
29 |
30 | import java.io.File;
31 |
32 | import timber.log.Timber;
33 |
34 | /**
35 | * WebView Activity
36 | *
37 | * @author mcharima5@gmail.com
38 | * @since 2018
39 | */
40 | public class WebViewActivity extends BaseActivity {
41 | private WebView webview;
42 | private CSWebChromeClient webChromeClient;
43 | private CSFileChooserListener webviewFileChooser;
44 |
45 | @Override
46 | protected void onCreate(Bundle savedInstanceState) {
47 | super.onCreate(savedInstanceState);
48 | setContentView(R.layout.activity_main);
49 |
50 | if (BuildConfig.DEBUG) {
51 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
52 | WebView.setWebContentsDebuggingEnabled(true);
53 | }
54 | }
55 |
56 | if (!new File(EnvUtil.getInternalFilesDir(getContext(), "public"), "202205091737430060.jpg").exists()) {
57 | AssetUtil.copyAssetToFile(getContext(),
58 | "www/common/img/202205091737430060.jpg",
59 | EnvUtil.getInternalFilesDir(getContext(), "public"));
60 | }
61 |
62 | init();
63 | }
64 |
65 | @SuppressLint("AddJavascriptInterface")
66 | private void init() {
67 | ViewGroup contentView = findViewById(R.id.contentView);
68 | if (null == contentView) {
69 | DialogBuilder.with(getActivity())
70 | .setMessage("The contentView does not exist.")
71 | .setPositiveButton(android.R.string.ok, (dialog, which) -> finish())
72 | .show();
73 | return;
74 | }
75 |
76 | // add webview
77 | this.webview = WebViewHelper.addWebView(getContext(), contentView);
78 |
79 | // options
80 | //this.webview.getSettings().setSupportMultipleWindows(true);
81 |
82 | // set user-agent
83 | try {
84 | String ua = this.webview.getSettings().getUserAgentString();
85 | if (!ua.endsWith(" ")) {
86 | ua += " ";
87 | }
88 | ua += PackageUtil.getApplicationName(this);
89 | ua += "/" + PackageUtil.getPackageVersionName(this);
90 | ua += "." + PackageUtil.getPackageVersionCode(this);
91 | this.webview.getSettings().setUserAgentString(ua);
92 | } catch (PackageManager.NameNotFoundException e) {
93 | Timber.e(e);
94 | }
95 |
96 | // set webViewClient
97 | CSWebViewClient webviewClient = new CSWebViewClient(getContext());
98 | this.webview.setWebViewClient(webviewClient);
99 |
100 | // set webChromeClient
101 | this.webChromeClient = new CSWebChromeClient(getContext());
102 | this.webview.setWebChromeClient(this.webChromeClient);
103 |
104 | // set fileChooser
105 | this.webviewFileChooser = new CSFileChooserListener(getContext());
106 | this.webChromeClient.setFileChooserListener(this.webviewFileChooser);
107 |
108 | // add interface
109 | this.webview.addJavascriptInterface(new AndroidBridge(webview), "AndroidBridge");
110 |
111 | // add download listener
112 | this.webview.setDownloadListener(new CSDownloadListener(getActivity()));
113 |
114 | // load url
115 | //WebViewHelper.loadUrl(this.webview, WebViewHelper.getLocalBaseUrl("assets") + "/www/docs/sample/sample.html");
116 | //WebViewHelper.loadUrl(this.webview, WebViewHelper.getLocalBaseUrl("assets") + "/www/docs/sample/image.html");
117 | //WebViewHelper.loadUrl(this.webview, WebViewHelper.getLocalBaseUrl("assets") + "/www/docs/image-provider/image-provider.html");
118 | //WebViewHelper.loadUrl(this.webview, WebViewHelper.getLocalBaseUrl("assets") + "/www/docs/qrcode-reader/index.html");
119 | WebViewHelper.loadUrl(this.webview, "https://www.google.com");
120 | }
121 |
122 | @Override
123 | protected void onDestroy() {
124 | WebViewHelper.removeWebView(this.webview);
125 | this.webview = null;
126 | super.onDestroy();
127 | }
128 |
129 | @Override
130 | public boolean onKeyDown(int keyCode, KeyEvent event) {
131 | if (KeyEvent.KEYCODE_BACK == keyCode) {
132 | Timber.i("[ACTIVITY] onKeyDown(): WebView isVideoPlayingInFullscreen = %s", this.webChromeClient.isVideoPlayingInFullscreen());
133 | if (this.webChromeClient.isVideoPlayingInFullscreen()) {
134 | return false;
135 | }
136 |
137 | // multiple windows go back
138 | if (null != this.webChromeClient.getNewWebView()) {
139 | Timber.i("[ACTIVITY] onKeyDown(): NewWebView canGoBack = %s", this.webChromeClient.getNewWebView().canGoBack());
140 | if (this.webChromeClient.getNewWebView().canGoBack()) {
141 | this.webChromeClient.getNewWebView().goBack();
142 | return true;
143 | } else {
144 | this.webChromeClient.closeNewWebView();
145 | }
146 | return true;
147 | }
148 |
149 | Timber.i("[ACTIVITY] onKeyDown(): WebView canGoBack = %s", this.webview.canGoBack());
150 | // go back
151 | if (this.webview.canGoBack()) {
152 | this.webview.goBack();
153 | return true;
154 | }
155 |
156 | if (BackKeyShutdown.isFirstBackKeyPress(keyCode, event)) {
157 | DialogBuilder.with(getContext())
158 | .setMessage(getString(R.string.one_more_press_back_button))
159 | .toast();
160 | return true;
161 | }
162 | }
163 | return super.onKeyDown(keyCode, event);
164 | }
165 |
166 | @Override
167 | protected void onActivityResult(int requestCode, int resultCode, Intent data) {
168 | if (null == data) {
169 | Timber.i("[ACTIVITY] onActivityResult(): requestCode[" + requestCode + "], resultCode[" + resultCode + "], data[null]");
170 | } else {
171 | Timber.i("[ACTIVITY] onActivityResult(): requestCode[" + requestCode + "], resultCode[" + resultCode + "], data[" +
172 | "\n action = " + data.getAction() +
173 | "\n scheme = " + data.getScheme() +
174 | "\n data = " + data.getData() +
175 | "\n type = " + data.getType() +
176 | "\n extras = " + StringUtil.toString(data.getExtras()) +
177 | "\n]");
178 | }
179 |
180 | //++ [[START] File Chooser]
181 | if (RequestCode.REQUEST_FILE_CHOOSER_NORMAL == requestCode) {
182 | Timber.i("[ACTIVITY] onActivityResult(): REQUEST_FILE_CHOOSER_NORMAL");
183 | this.webviewFileChooser.onActivityResultFileChooserNormal(requestCode, resultCode, data);
184 | }
185 | else if (RequestCode.REQUEST_FILE_CHOOSER_LOLLIPOP == requestCode) {
186 | Timber.i("[ACTIVITY] onActivityResult(): REQUEST_FILE_CHOOSER_LOLLIPOP");
187 | this.webviewFileChooser.onActivityResultFileChooserLollipop(requestCode, resultCode, data);
188 | }
189 | //-- [[E N D] File Chooser]
190 |
191 | //++ [[START] Take a picture]
192 | if (RequestCode.REQUEST_TAKE_A_PICTURE == requestCode) {
193 | Timber.i("[ACTIVITY] onActivityResult(): REQUEST_TAKE_A_PICTURE");
194 | PluginCamera.onActivityResultTakePicture(this.webview, requestCode, resultCode, data);
195 | //AndroidBridgeProcessActivityResult.onActivityResultTakePicture(this.webview, requestCode, resultCode, data);
196 | }
197 | //++ [[E N D] Take a picture]
198 |
199 | super.onActivityResult(requestCode, resultCode, data);
200 | }
201 |
202 | }
203 |
--------------------------------------------------------------------------------
/app/src/main/java/com/snc/sample/webview/bridge/AndroidBridge.java:
--------------------------------------------------------------------------------
1 | package com.snc.sample.webview.bridge;
2 |
3 | import android.net.Uri;
4 | import android.os.Build;
5 | import android.util.Base64;
6 | import android.webkit.JavascriptInterface;
7 | import android.webkit.WebView;
8 |
9 | import com.snc.zero.dialog.DialogBuilder;
10 | import com.snc.zero.json.JSONHelper;
11 | import com.snc.zero.util.StringUtil;
12 |
13 | import org.json.JSONObject;
14 |
15 | import java.io.File;
16 | import java.io.IOException;
17 | import java.net.URLDecoder;
18 | import java.util.HashMap;
19 | import java.util.Map;
20 |
21 | import timber.log.Timber;
22 |
23 | /**
24 | * WebView JavaScript Interface Bridge
25 | *
26 | * @author mcharima5@gmail.com
27 | * @since 2018
28 | */
29 | public class AndroidBridge {
30 | private static final String SCHEME_BRIDGE = "native";
31 |
32 | // Web -> Native
33 | private static final String HOST_COMMAND = "callToNative";
34 |
35 | private static final String SCHEME_JAVASCRIPT = "javascript:";
36 |
37 | private final WebView webView;
38 |
39 | private static final Map
33 |
37 |
38 |
34 |
36 | Welcome
35 |
39 |
53 |
54 |
40 |
52 | Image
41 |
42 |
51 |
43 | android_res/
44 |
45 | http://
46 |
47 | https://
48 |
49 |
50 | 44 |
45 | http://
46 |
47 | https://
48 |
49 |
55 |
80 |
81 |
56 |
79 | Content
57 |
58 |
78 |
59 |
60 |
61 |
62 |
63 | 60 |
61 |
64 |
65 |
66 |
67 |
68 | Google Maps
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | 73 |
74 |
75 |
76 |
82 |
93 |
94 |
83 |
92 | Video
84 |
85 |
90 |
91 |
95 |
116 |
117 |
125 |
126 |
96 |
115 | Permission
97 |
98 |
99 |
100 | 101 |
102 | 100 | 101 |
103 |
106 |
107 |
108 | ![]()
109 |
110 |
111 |
112 |
113 |
114 |