如何在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/tiagobalme...

Jerry作了一點小小的修改，作成一個能夠直接訪問的小例子，放到了個人工具庫裏：(jerrywang-sap.cn這個域名是騰訊雲社區免費贈送的，這裏表示感謝)

https://jerrywang-sap.cn/Fior...

先看這個例子在筆記本電腦上訪問的效果：

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

手機上的顯示效果：

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

這個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/Fior...

以及查看Jerry例子的源代碼：

https://github.com/i042416/Fi...

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

https://github.com/tiagobalme...

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