共计 2016 个字符，预计需要花费 6 分钟才能阅读完成。
昨天 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 的原创文章，请关注公众号 ” 汪子熙 ”:
