The previous article " H5 uploading pictures through WebView " introduced how to take pictures and upload them to the webpage. Unexpectedly, the customer asked for another camera to upload to the webpage. In this case, let's discuss how to implement this camera upload function. Like photo upload, video upload also needs to rewrite the openFileChooser/onShowFileChooser methods of WebChromeClient, and jump to the camera page of the system inside these two methods. The sample code is as follows:
private static ValueCallback<Uri> mUploadMessage;
private static ValueCallback<Uri[]> mUploadMessageLollipop;
private class MyWebChromeClient extends WebChromeClient {
// Android 4.*
public void openFileChooser(ValueCallback<Uri> uploadMsg,
String acceptType, String capture) {
Log.d(TAG, "openFileChooser 4.1");
mUploadMessage = uploadMsg;
recordVideo();
}
// Android 5.0+
@Override
public boolean onShowFileChooser(WebView webView,
ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
Log.d(TAG, "openFileChooser 5.0+");
mUploadMessageLollipop = filePathCallback;
recordVideo();
return true;
}
}
private final static int VIDEO_REQUEST = 120;
private void recordVideo() {
Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
//设置视频质量
intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1);
//设置视频时长
intent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, 10);
//开启摄像机
startActivityForResult(intent, VIDEO_REQUEST);
}
At the end of the recording of the camera page, the onActivityResult method is called back when returning to the previous page, so the onActivityResult method of the previous page needs to be rewritten, and the camera result is passed to the h5 web page in this method. Here is the processing code for the postback video:
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
Log.d(TAG, "onActivityResult requestCode="+requestCode);
if (requestCode == VIDEO_REQUEST) {
if (null == mUploadMessage && null == mUploadMessageLollipop) {
return;
}
Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
Log.d(TAG, "onActivityResult path="+result.getPath());
if (mUploadMessageLollipop != null) {
if (resultCode == RESULT_OK) {
mUploadMessageLollipop.onReceiveValue(new Uri[]{result});
mUploadMessageLollipop = null;
} else {
mUploadMessageLollipop.onReceiveValue(new Uri[]{});
mUploadMessageLollipop = null;
}
} else if (mUploadMessage != null) {
if (resultCode == RESULT_OK) {
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
} else {
mUploadMessage.onReceiveValue(Uri.EMPTY);
mUploadMessage = null;
}
}
}
}
The above code should complete the camera upload, but how to verify whether the upload is successful? Of course, you can directly watch the uploaded video on the current webpage. If the webpage can play the video normally, it means that the camera video has indeed been uploaded successfully. To allow WebView to support watching web videos, you must perform the following WebSettings setting operations. The relevant setting codes are as follows:
private void initSetting() {
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginState(WebSettings.PluginState.ON);
webSettings.setUseWideViewPort(true); // 支持HTML的“viewport”标签或者使用wide viewport
webSettings.setAllowFileAccess(true); // 允许访问文件
webSettings.setSupportZoom(true); // 支持缩放
webSettings.setLoadWithOverviewMode(true);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加载缓存内容
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
webSettings.setDomStorageEnabled(true);
}Finally, take a screenshot of the demo interface to observe the complete process of camera upload. At the beginning, the page where the WebView is located is opened, and the initial web page is displayed as shown in the following figure:
Click the red button to jump to the camera page of the system, and return to the current page after the camera is completed. At this time, a video placeholder icon appears at the bottom of the page, as shown in the following figure:
Click the triangle symbol on the placeholder icon, and the webpage starts to play the uploaded video. The following picture is a screenshot of the playback process:
