昨天Jerry的文章 純JavaScript實(shí)現(xiàn)的調(diào)用設(shè)備攝像頭并拍照的功能 介紹了純JavaScript借助WebRTC API來開發(fā)支持調(diào)用設(shè)備的攝像頭拍照的web應(yīng)用。而我同事遇到的實(shí)際情況是，需要使用SAP UI5這個(gè)前端框架來開發(fā)web應(yīng)用。在有了前一篇文章的知識(shí)儲(chǔ)備后，在SAP UI5里完成這個(gè)功能，可以采取同樣的思路。

我們先回憶前一篇文章里提到的技術(shù)實(shí)現(xiàn)的要點(diǎn)：

(1) 在web應(yīng)用的HTML頁面里定義HTML5用于顯示視頻的原生標(biāo)簽:video

(2) 使用WebRTC的API，獲取設(shè)備攝像頭對(duì)應(yīng)的MediaStream對(duì)象，再將這個(gè)對(duì)象實(shí)例賦給video標(biāo)簽對(duì)應(yīng)的DOM對(duì)象的srcObject屬性

以上兩步實(shí)現(xiàn)之后，我們通過攝像頭觀察到的視頻圖像，就能實(shí)時(shí)顯示在web應(yīng)用的video標(biāo)簽里了。至于將某一時(shí)間點(diǎn)里video標(biāo)簽里顯示的視頻內(nèi)容保存成圖片并下載，其對(duì)應(yīng)的JavaScript代碼對(duì)于所有的前端框架并沒有太大的不同，本文略過。

因此，使用SAP UI5開發(fā)，我們無非得重復(fù)以上兩個(gè)步驟。

SAP UI5應(yīng)用最常用的視圖格式為XML視圖。我們直接在XML視圖里加上HTML原生的video或者div標(biāo)簽，會(huì)發(fā)生什么？

404錯(cuò)誤，UI5框架加載不了div.js這個(gè)腳本文件。

Jerry以前還在SAP成都研究院CRM Fiori應(yīng)用開發(fā)團(tuán)隊(duì)工作時(shí)，曾經(jīng)寫過一個(gè)SAP UI5框架代碼的學(xué)習(xí)教程：Jerry的UI5框架代碼自學(xué)教程，里面有兩篇文章，詳細(xì)介紹了SAP UI5 XML視圖運(yùn)行時(shí)的渲染原理：

• 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里有個(gè)XMLTemplateProcessor.js的實(shí)現(xiàn)，運(yùn)行時(shí)當(dāng)XML視圖的源文件被瀏覽器加載解析成DOM后，它會(huì)對(duì)DOM樹進(jìn)行深度優(yōu)先遍歷，對(duì)遇到的每一個(gè)UI5標(biāo)簽，加載其實(shí)現(xiàn)文件(如果是在UI5調(diào)試模式下)，然后創(chuàng)建這個(gè)標(biāo)簽對(duì)應(yīng)的實(shí)例。

回到Jerry上面的例子，我寫到SAP UI5 XML視圖里的div標(biāo)簽被當(dāng)成了一個(gè)SAP UI5 XML的控件，所以UI5框架自動(dòng)去找這個(gè)根本不存在的div控件的實(shí)現(xiàn)文件，當(dāng)然找不到了。

知道問題出在哪里，解決的思路自然就有了。自己把HTML5原生標(biāo)簽video封裝成UI5控件不就行了？本著SOP(Stackoverflow Oriented Programming), GOP(Github Oriented Programming)的編程思路，Jerry如愿以償?shù)卦贕ithub上找到了一個(gè)別人造好的輪子。

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

Jerry做了一點(diǎn)小小的修改，做成一個(gè)可以直接訪問的小例子，放到了我的工具庫里：(jerrywang-sap.cn這個(gè)域名是騰訊云社區(qū)免費(fèi)贈(zèng)送的，這里表示感謝)

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

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

點(diǎn)擊頁面上顯示的攝像頭拍攝的內(nèi)容，能自動(dòng)保存成一張圖片。

手機(jī)上的顯示效果：

然后再來看這個(gè)輪子的實(shí)現(xiàn)原理。

這個(gè)camera自定義UI5控件實(shí)現(xiàn)的層級(jí)結(jié)果如下：

基本上是嚴(yán)格按照SAP社區(qū)這篇博客 How to create a custom UI5 control來實(shí)現(xiàn)的：

SAP UI5自定義控件的實(shí)現(xiàn)包括三個(gè)JavaScript文件：

library.js

定義這個(gè)控件抬頭級(jí)別的控制信息，比如名稱，版本號(hào)，依賴等

Camera.js

實(shí)現(xiàn)了將WebRTC API獲得的MediaStream對(duì)象實(shí)例綁定到控件封裝的video元素上的步驟。
具體實(shí)現(xiàn)就在Jerry高亮的這段代碼里：

以及點(diǎn)擊拍照功能的實(shí)現(xiàn)，這一塊的代碼和前一篇文章描述的一致，這里略過。

CameraRender.js

負(fù)責(zé)將這個(gè)自定義控件在XML視圖里的標(biāo)簽"Camera"渲染成原生的video和canvas標(biāo)簽的組合。
SAP UI5的每一個(gè)控件都有一個(gè)與之對(duì)應(yīng)的渲染類，用于完成XML視圖里UI5的標(biāo)簽到HTML5原生標(biāo)簽的轉(zhuǎn)換：

如何使用這個(gè)自定義控件呢？Tiago的文檔也寫得非常詳細(xì)，按照他github上的步驟一步步執(zhí)行即可：

如果還有疑問，可以調(diào)試Jerry放到github上能夠直接點(diǎn)擊運(yùn)行的例子：

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

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

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

如果您喜歡這個(gè)輪子，記得去Tiago的倉庫去給他點(diǎn)個(gè)贊哦。

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

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

總結(jié)

以上是生活随笔為你收集整理的如何在SAP UI5应用里添加使用摄像头拍照的功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。