本篇內(nèi)容介紹了“怎么在SAP UI5應(yīng)用里添加使用攝像頭拍照的功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都做網(wǎng)站、平羅網(wǎng)絡(luò)推廣、成都小程序開發(fā)、平羅網(wǎng)絡(luò)營(yíng)銷、平羅企業(yè)策劃、平羅品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供平羅建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：jinyejixie.com

技術(shù)實(shí)現(xiàn)的要點(diǎn)：

(1) 在web應(yīng)用的HTML頁(yè)面里定義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ā)，我們無(wú)非得重復(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

簡(jiǎn)單地說，就是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è)可以直接訪問的小例子，放到了我的工具庫(kù)里：(http://jerrywang-sap.cn這個(gè)域名是騰訊云社區(qū)免費(fèi)贈(zèng)送的，這里表示感謝)

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

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

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

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

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

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

基本上是嚴(yán)格按照SAP社區(qū)這篇博客  How to create a custom UI5 control來(lái)實(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í)行即可：

“怎么在SAP UI5應(yīng)用里添加使用攝像頭拍照的功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)標(biāo)題：怎么在SAPUI5應(yīng)用里添加使用攝像頭拍照的功能
分享網(wǎng)址：http://jinyejixie.com/article0/pgejio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)