Android WebApp 開發教學 (3) – HTML5 + PhoneGap = 如虎添翼

Introduction – 前言

在前一篇文章(Android WebApp 開發教學 – HTML5 Web Storage)中,我們已經介紹過如何在 Android WebView 元件中執行由 HTML5 撰寫的 WebApp 程式。手機上能夠實作的應用層面相當豐富,僅靠著 HTML5 所提供的功能來製作 WebApp 是不足的。假如我們想要對手機硬體進行溝通,譬如震動 (Vibrate)、加速器 (Accelerometer)、取定位資訊 (Geolocation) 等等與手機相關的功能,這時候就要藉由 JavaScript Bridge 的技術來完成。JavaScript Bridge 技術主要原理是在 WebView 中與 JavaScript RunTime 建立一個溝通的橋樑,使得 WebView 能夠透過 JavaScript 呼叫 Native 的函式,這時候我們就可以用原生的程式撰寫 Web 做不到的功能,藉此擴充 WebView 之能力。

今天要介紹的 PhoneGap Library 就是 JavaScript Bridge 的一項實作,PhoneGap 的前身其實是 Apache Cordova Project,或許各位可以發現之後 PhoneGap 版本所使用的 Library 命名也由 PhoneGap 改為 Codorva。那為什麼我們要使用 PhoneGap 呢?前面有提到原生程式碼(Native Code)對跨平台特性的影響,這可能會是我們選用 PhoneGap 的主要原因,由於假設我們僅使用 PhoneGap 現有的 API 來設計系統,那麼很高興地 PhoneGap 已經在許多常用的手機平台實作了盡可能相容的功能。為什麼不是完全相容呢?因為每種手機平台的功能都不太一樣,所以總會有些差異囉。目前 PhoneGap 支援了七種手機作業系統,我們可以參考以下官方提供的資料:

Android WebView 安裝 PhoneGap

首先我們現在官方網站下載 PhoneGap,目前的版本為 1.7 並且使用 Apache License。下載後解壓縮,API Document 相關的文件放在/doc/index.html 檔案中,另外在 /lib 目錄中就可以看到 PhoneGap 相關函式與各種平台需要安裝的檔案。如下圖:

首先我們先在 Eclipse 中建立一個 Android Project(可以參考之前的教學文章),如下圖:

  • 第一步:加入 Cordova Library

專案右鍵 -> New -> Folder

Folder name: 輸入 libs 按下 [Finish]

複製 \lib\android\cordova-1.7.0.jar 到 libs 目錄中,對 cordova-1.7.0.jar 按右鍵 -> Build Path -> Add to Build Path

  • 第二步:加入 PhoneGap XML 檔案

複製 \lib\android\xml 資料夾到 res 目錄中(包含 xml 目錄喔)

  • 第三步:設定 PhoneGap 會用到的 User Permission

開啟 AndroidManifest.xml 在 manifest TAG 中加入以下 XML

在 activity TAG 中加入以下 Attribute

完成後如下圖所示:

  • 第四步:修改 Activity Class

修改繼承 Class 為 org.apache.cordova.DroidGap 並且刪除以下程式碼:

由於 DropGap 已經會自動幫我們建立 WebView,因此我們僅需要加入以下程式碼告訴 PhoneGap 要開啟哪一支 HTML 檔案即可。

如下圖:

完整的 Activity Class 內容如下:

第五步:測試 PhoneGap Example

複製 \lib\android\example\assets\www 資料夾到 assets 目錄中,如下:

  • 第六步:執行 Android Project

專案右鍵 -> Run As -> Android Application

下圖可以看到 Example 執行畫面

你也可以將 App 佈署到手機上測試震動功能,是不是很方便呢?

Conclusion – 結論

HTML5 加上 PhoneGap 確實能夠兼顧 WebApp 之擴充性與跨平台,除了直接使用 PhoneGap 提供的 API 之外,PhoneGap 也提供了 Plugin 的方式讓我們擴充自己想要實作的功能。

使用 JavaScript Bridge 技術固然方便,但反過來說我們也需要明白,一但使用了原生程式碼 (Native Code) 來實作系統,就會降低系統可攜性,同時也失去了 WebApp 跨平台之能力,當然使用 PhoneGap 會好上一些些。此外 JavaScript Bridge 至今依然存在安全性的問題(譬如 XSS 攻擊),在我們設計與使用 JavaScript Bridge 之類的技術上就必須更加注意系統安全問題。

Reference – 參考資料

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebApp mui&H5+ 可以结合使用 Native.js for Android 完成视频录制和处理。以下是大致的实现步骤: 1. 引入 Native.js for Android 插件,该插件可以在 H5+ 中使用 Native 方法。 2. 使用 H5+ API 调用 Android 摄像头,获取视频流,并且使用 Native 方法将视频流传递给 Android Native 代码。 3. 在 Android Native 代码中,使用 Camera2 API 获得视频流,并且使用 MediaRecorder API 将视频流录制为 MP4 格式的视频。 4. 将录制好的视频文件保存到指定的路径,并且使用 Native 方法将视频文件路径传递给 H5+ 代码。 5. 在 H5+ 代码中,使用 HTML5 Video 标签来播放录制好的视频。 示例代码如下: H5+ 代码: ``` // 引入 Native.js for Android 插件 document.addEventListener('plusready', function() { var nativeApi = plus.android.importClass('io.dcloud.NativeApi'); var nativeObj = new nativeApi(); // 使用 H5+ API 调用 Android 摄像头 var cmr = plus.camera.getCamera(); cmr.startVideoCapture(function(path) { // 使用 Native 方法将视频流传递给 Android Native 代码 nativeObj.exec('com.example.camera', 'startRecording', [path], function(result) { console.log(result); // 使用 Native 方法将视频文件路径传递给 H5+ 代码 nativeObj.exec('com.example.camera', 'getVideoPath', [], function(path) { console.log(path); var video = document.getElementById('video'); video.src = path; video.play(); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }, {filename:'_doc/video/', index:1}); }); ``` Android Native 代码: ``` public class CameraPlugin extends CordovaPlugin { private CameraDevice cameraDevice; private MediaRecorder mediaRecorder; private String videoFilePath; @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("startRecording".equals(action)) { startRecording(args.getString(0), callbackContext); return true; } else if ("getVideoPath".equals(action)) { getVideoPath(callbackContext); return true; } return false; } private void startRecording(String path, CallbackContext callbackContext) { try { mediaRecorder = new MediaRecorder(); mediaRecorder.setVideoSource(MediaRecorder.VideoSource.SURFACE); mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4); mediaRecorder.setOutputFile(path); mediaRecorder.setVideoEncodingBitRate(10000000); mediaRecorder.setVideoFrameRate(30); mediaRecorder.setVideoSize(1280, 720); mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264); mediaRecorder.prepare(); mediaRecorder.start(); videoFilePath = path; callbackContext.success(); } catch (Exception e) { callbackContext.error(e.getMessage()); } } private void getVideoPath(CallbackContext callbackContext) { callbackContext.success(videoFilePath); } // ... } ``` 需要注意的是,在 Android 6.0 及以上版本的系统中,需要动态请求摄像头和存储权限。同时,在录制视频时,需要使用新版的 Camera2 API 替换旧版的 Camera API。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值