如何在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做了一點小小的修改，做成一個可以直接通路的小例子，放到了我的工具庫裡：(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上能夠直接點選運作的例子：

以及檢視Jerry例子的源代碼：

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

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