如何在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上能夠直接點擊運行的例子：

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

AR/VR JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。