前面的文章《H5通过WebView上传图片》介绍了如何拍照上传给网页，不料客户又要求再加个摄像上传给网页。既然如此，那么再探讨一下如何实现这个摄像上传的功能。与拍照上传一样，摄像上传也要重写WebChromeClient的openFileChooser/onShowFileChooser方法，在这两个方法内部跳转到系统的摄像机页面，示例代码如下：
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);
}
在摄像机页面录像结束，返回到上一页时回调onActivityResult方法，所以需要重写上个页面的onActivityResult方法，在该方法中把摄像结果传给h5网页。下面是回传视频的处理代码：
@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;
}
}
}
}
上面代码应该是完成摄像上传了，但是要怎样验证是否上传成功呢？当然是在当前网页直接观看网页已上传的视频，如果网页都能正常播放视频，说明这个摄像视频的的确确是成功上传了。让WebView支持观看网页视频的话，得进行以下的WebSettings设置操作，相关的设置代码如下所示：
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);
}最后通过演示界面截图，观察一下摄像上传的完整流程。一开始打开WebView所在的页面，此时显示初始网页如下图所示：
点击红色按钮，跳到系统的摄像机页面，摄像结束后返回当前页面，此时网页下方出现了一个视频占位图标，如下图所示：
点击占位图标上的三角符号，则网页开始播放已上传的摄像视频，下面的图片正是播放过程中的截图：
