前言
在前端开发中，我们经常需要让用户上传图片或者使用摄像头拍照。而在移动应用开发中，直接调用原生摄像头 API 可能有一定风险，并且不同平台的API有所不同。openui5-camera 这个 npm 包可以帮助我们通过 WebRTC 调用用户设备上的摄像头或者文件系统来获取媒体文件，同时该 npm 包还可以产生一个适用于 OpenUI5 的 web 组件。
一、安装 openui5-camera
我们可以通过 npm 安装 openui5-camera:
--- ------- --------------
二、使用 openui5-camera
1. 引入 openui5-camera 的 JavaScript 文件
我们需要在 HTML 页面中加载 openui5-camera。通常，这种脚本应该位于/resources目录中，因为 OpenUI5 使用的是相对路径：
------- ------------------------------------------------------------------
2. 创建一个 sap.m.Panel 控件
我们可以将摄像头操作封装在 sap.m.Panel 中，使其更可控并且易于使用。以下是一个简单地例子：
---------
------------------------
---------------------------
-------------
-------------------- -
------ ---------------- ------------------- -
------- ------------- ----------- ------------ --
--------
-----------因为 webrtc 没有被所有的浏览器支持，因此必须要检查 Camera.isSupported() 方法的返回值，只有当其返回 true 时，我们才可以基于该对象创建一个 sap.m.Image 控制并显示摄像头捕捉到的内容：
--- ------ - --------------------------------
-- ------------------------------- -
---------------------------------------------------------- ------
-
--- ----- - -----------------------------------
-- ---------------------- -
--- ---- - --- -------------
---- -----------------------
------ -------
---
-----------------------
- ---- -
--- -------- - --- ---------------------
----- ----- ------- ---- --- ------- --------
----- -------------------------------
---
---------------------------
-现在我们可以在 Camera 控件中捕获视频输入，并且在 sap.m.Image 中显示它。
3. 配置摄像头
本 npm 包还支持配置摄像头，并且可以检索摄像头属性：
------------------------------------ -
--- ------- - --------------------
--- ------------------- - ---------------------
--- ----------- - -----
--- ---------- - -----
--- ---- - - -- - - --------------- ---- -
--- --- - -----------
-- ------------------ --- -------------------------- -
----------- - ----
-
---- -- ------------------ --- ------------------------- -
---------- - ----
-
-
-- --- ------- ------
-----------------------------
-- --- ---- ----- --- --- --
--- --------- - ----------------------
-------------------------------
-- --- --------- ---- ------
--- ------------------- - --------------------------------
------------------- -
--------------------- -- ---- -----------
---以上代码片段配置了摄像头设备，并检索出前置摄像头和后置摄像头。可以通过 camera.setCamera() 方法设置默认摄像头，通过 camera.getZoomLevel() 和 camera.setZoomLevel() 方法控制摄像头的焦距等级，并且使用 camera.getSupportedZoomLevels() 方法获取支持的焦距级别。
4. 拍照或者录制视频
我们可以使用 Camera.captureImage() 方法从摄像头中捕获图片，并生成 base64 图片。
------------------------------------------- -
--- ---- - --- -------------
---- -------
------ -------
---
-----------------------
------------------- -
--------------------- -- ------- ---------
---同样，我们用 Camera.captureVideo() 方法可以捕捉视频：
------------------------------------------ -
--- ---- - ---------------------------
--- ------ - --- ------------------
-------- ------- -------------- --------------- --------------------- ------- - ---- - --- --
---
-------------------------
------------------- -
--------------------- -- ------- ---------
---5. 优化捕获的图片格式
在获取图片之后，我们建议将其转换为 jpeg 格式并降低其质量以减少图片大小。可以使用 jpeg-js 或者任何其他 API 实现图片格式优化。
总结
使用 npm 包 openui5-camera 可以轻松地使用 WebRTC 技术访问用户设备的摄像头，并在 OpenUI5 应用中展示和存储摄像头捕捉到的内容。在本文中，我们了解了如何完成如下操作：
- 安装 openui5-camera;
- 根据需要配置摄像头;
- 拍照并保存图片;
- 录制视频并保存;
- 优化捕获的图片格式。
同时，我们还提供了示例代码帮助你更好地学习和使用 openui5-camera。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005757e81e8991b448ea5ee