如何在SAP UI5應用裡新增使用攝像頭拍照的功能

昨天Jerry的文章 純JavaScript實現的呼叫裝置攝像頭並拍照的功能 介紹了純JavaScript藉助WebRTC API來開發支援呼叫裝置的攝像頭拍照的web應用。而我同事遇到的實際情況是，需要使用SAP UI5這個前端框架來開發web應用。在有了前一篇文章的知識儲備後，在SAP UI5裡完成這個功能，可以採取同樣的思路。

我們先回憶前一篇文章裡提到的技術實現的要點：

(1) 在web應用的HTML頁面裡定義HTML5用於顯示視訊的原生標籤:video

(2) 使用WebRTC的API，獲取裝置攝像頭對應的MediaStream物件，再將這個物件例項賦給video標籤對應的DOM物件的srcObject屬性

以上兩步實現之後，我們通過攝像頭觀察到的視訊影象，就能實時顯示在web應用的video標籤裡了。至於將某一時間點裡video標籤裡顯示的視訊內容儲存成圖片並下載，其對應的JavaScript程式碼對於所有的前端框架並沒有太大的不同，本文略過。

因此，使用SAP UI5開發，我們無非得重複以上兩個步驟。

SAP UI5應用最常用的檢視格式為XML檢視。我們直接在XML檢視裡加上HTML原生的video或者div標籤，會發生什麼？

404錯誤，UI5框架載入不了div.js這個指令碼檔案。

Jerry以前還在SAP成都研究院CRM Fiori應用開發團隊工作時，曾經寫過一個SAP UI5框架程式碼的學習教程：Jerry的UI5框架程式碼自學教程，裡面有兩篇文章，詳細介紹了SAP UI5 XML檢視執行時的渲染原理：

• Why my formatter does not work? A trouble shooting example to know how it works
• How I do self-study on a given Fiori control – part 10

簡單地說，就是SAP UI5裡有個XMLTemplateProcessor.js的實現，執行時當XML檢視的原始檔被瀏覽器載入解析成DOM後，它會對DOM樹進行深度優先遍歷，對遇到的每一個UI5標籤，載入其實現檔案(如果是在UI5除錯模式下)，然後建立這個標籤對應的例項。

回到Jerry上面的例子，我寫到SAP UI5 XML檢視裡的div標籤被當成了一個SAP UI5 XML的控制元件，所以UI5框架自動去找這個根本不存在的div控制元件的實現檔案，當然找不到了。

知道問題出在哪裡，解決的思路自然就有了。自己把HTML5原生標籤video封裝成UI5控制元件不就行了？本著SOP(Stackoverflow Oriented Programming), GOP(Github Oriented Programming)的程式設計思路，Jerry如願以償地在Github上找到了一個別人造好的輪子。

這位好人叫Tiago Almeida，他的輪子地址： https://github.com/tiagobalmeida/openui5-camera

Jerry做了一點小小的修改，做成一個可以直接訪問的小例子，放到了我的工具庫裡：( http:// jerrywang-sap.cn 這個域名是騰訊雲社群免費贈送的，這裡表示感謝)

https://jerrywang-sap.cn/FioriODataTestTool2014/WebContent/demo/index.html

先看這個例子在膝上型電腦上訪問的效果：

點選頁面上顯示的攝像頭拍攝的內容，能自動儲存成一張圖片。

手機上的顯示效果：

然後再來看這個輪子的實現原理。

這個camera自定義UI5控制元件實現的層級結果如下：

基本上是嚴格按照SAP社群這篇部落格  How to create a custom UI5 control來實現的：

SAP UI5自定義控制元件的實現包括三個JavaScript檔案：

library.js

定義這個控制元件抬頭級別的控制資訊，比如名稱，版本號，依賴等

Camera.js

實現了將WebRTC API獲得的MediaStream物件例項繫結到控制元件封裝的video元素上的步驟。
具體實現就在Jerry高亮的這段程式碼裡：

以及點選拍照功能的實現，這一塊的程式碼和前一篇文章描述的一致，這裡略過。

CameraRender.js

負責將這個自定義控制元件在XML檢視裡的標籤"Camera"渲染成原生的video和canvas標籤的組合。
SAP UI5的每一個控制元件都有一個與之對應的渲染類，用於完成XML檢視裡UI5的標籤到HTML5原生標籤的轉換：

如何使用這個自定義控制元件呢？Tiago的文件也寫得非常詳細，按照他github上的步驟一步步執行即可：

如果還有疑問，可以除錯Jerry放到github上能夠直接點選執行的例子：

https://jerrywang-sap.cn/FioriODataTestTool2014/WebContent/demo/index.html

以及檢視Jerry例子的原始碼：

https://github.com/i042416/FioriODataTestTool2014/tree/gh-pages/WebContent/demo

如果您喜歡這個輪子，記得去Tiago的倉庫去給他點個贊哦。

https://github.com/tiagobalmeida/openui5-camera

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2659674/，如需轉載，請註明出處，否則將追究法律責任。