1. 程式人生 > >Android開發筆記(一百六十六)H5通過WebView錄影上傳

Android開發筆記(一百六十六)H5通過WebView錄影上傳

前面的博文《Android開發筆記(一百五十二)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所在的頁面,此時顯示初始網頁如下圖所示:


點選紅色按鈕,跳到系統的攝像機頁面,攝像結束後返回當前頁面,此時網頁下方出現了一個視訊佔位圖示,如下圖所示:


點選佔位圖示上的三角符號,則網頁開始播放已上傳的攝像視訊,下面的圖片正是播放過程中的截圖:



點此檢視Android開發筆記的完整目錄