您好，

请允许我向您展示如何以超级简单的方式向UI5应用程序添加拍照功能。无需将应用程序包装在任何容器中。你的用户所需要的只是一个现代化的浏览器。

作为一个开发人员，你需要安装一个npm模块，淘客api，并在某些视图中添加一个UI5控件。再简单不过了……

HTML5媒体API使这成为可能。这是浏览器提供的API，以便web应用程序可以访问媒体设备（如照相机、麦克风）。这里有一个关于它的好帖子。

API不是特别难用，企业管理的软件，但它的级别比我们想要的UI5应用程序要低。所以我决定更进一步，把它包装成一个漂亮的、易于使用的UI5相机控件。

该控件一旦插入UI5视图，就会呈现相机的实时预览，一旦用户点击，就会从相机中捕获图像并触发一个称为快照的事件。通过在控制器上收听此事件，您可以抓取图片。

此控件处理请求浏览器（和用户）访问相机并呈现视频流的实时预览所需的样板文件。

下面是它的实时演示。用最新的Chrome版本试试看，当浏览器要求时允许使用摄像头。别担心，图片永远不会离开你的浏览器。

听起来不错吧？阅读下面的内容，了解如何将其添加到应用程序中。

在UI5应用程序的根目录下，检查是否有名为包.json. 如果确实要执行步骤2，则执行npm init并遵循提示。npm init创建包.json它允许您在本地安装模块。

执行npm install openui5 camera这将安装上面提到的库，大数据分享，我已经开源并发布到node package manager。安装的文件保存在文件夹node\u modules下。

复制文件node\u modules\openui5 camera\dist\openui5\camera\library-预加载.js进入第三方\openui5\camera\library-预加载.js（根据需要创建文件夹）。

（如果您可以自动执行此步骤，安娜尔返利机器人，将获得额外点数）

在您的清单中，通过在内部添加以下内容来声明资源路径sap.ui5版本：

在要呈现相机预览的视图中，插入以下内容：

在该视图的顶部，声明指向openui5的xml命名空间cam。相机自定义控件：

在相应的控制器中实现快照事件处理程序。下面的例子：

图片位于事件内部，采用base64编码的png格式，贵州大数据，因此它本质上是一个字符串，允许您轻松发布它。

如果您在使其工作时遇到问题，请检查演示应用程序的代码

注意事项

控件仍处于早期开发阶段。暴露底层摄像设备的一些细节。如果你做得更好，请回馈。源代码在这里。

另外，请注意许可证。此控件不提供任何保修，使用风险自负。

您喜欢此控件吗？如果你正在使用github stars，在评论中展示你正在构建的东西（如果可以的话）！