乐趣区

关于webrtc:使用基于-WebRTC-的-JavaScript-API-在浏览器环境里调用本机摄像头

jiezi

HTML5，JavaScript 和古代浏览器这套三驾马车的组合，使得传统的 Web 利用较之过来能实现更多更丰盛的同用户交互的性能。摄像头现在已成为智能手机的标配，前端 Web 利用也呈现了越来越多的关上本机摄像头，扫描条形码，二维码等需要。

本文介绍两种通过 JavaScript 实现在浏览器环境里调用设施摄像头的开发技术。

办法 1：基于古代浏览器反对的 WebRTC API 实现

我采纳该思路实现了一个简略的 Web 页面，全副源代码保护在如下的 Github 代码仓库里：

https://github.com/wangzixi-d…

首先看看运行该 Web 利用的成果。

通过笔记本电脑拜访，浏览器会弹出窗口询问用户是否容许该利用拜访设施上的摄像头：

点击容许之后，利用下方区域就会实时显示我的摄像头正对着的区域的图像：

点击“拍照”按钮后，摄像头显示的图像就会被固化在该按钮下方，并且以图片的形式主动保留到本地。

在我的三星手机上拜访该链接，首先一样要受权该利用应用摄像头：

对准我电脑背后一个异形手办进行拍照：

主动生成一张图片并保留到手机上：

几个要害的实现点阐明：

(1) JavaScript 之所以通过浏览器可能辨认到设施可用摄像头 (包含可用的音频输出和输出设备)，是因为古代浏览器反对的一组名为 WebRTC(Web Real Time Communication，网页即时通信) 的 API. 这个 API 能帮忙 Web 利用开发人员通过简略的 JavaScript 编程就能实现功能丰富的实时多媒体利用，而无需学习多媒体的数字信号处理常识。Web 利用的使用者也无需下载额定的插件。

用 JavaScript 进行设施可用多媒体设施的检测，外围代码如下：

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

这句代码前半段 navigator.mediaDevices.enumerateDevices() 是浏览器反对的原生 API，这是一个异步调用，返回一个 promise 对象：

等到该异步调用的后果可供应用程序应用之后，咱们通过链式调用 then 传入的回调函数 gotDevices 被触发，输出的参数就是 navigator.mediaDevices.enumerateDevices() 调用的返回值。在调试器里看看这个返回值的明细：

从调试器里得悉 enumerateDevices 这个函数返回了我笔记本电脑上一系列可用的音视频设施，这些信息和我通过操作系统里看到的设施信息统一：

(2) 我的 html 页面里定义了一个 HTML5 原生反对的 video 标签, 用于显示通过设施摄像头察看到的图像。

然而咱们还须要把设施摄像头同这个 video 标签关联起来。形式是给这个标签的 dom 对象的 srcObject 属性赋一个 MediaStream (媒体数据流)对象。

这个 MediaStream 对象从哪里来？同理，通过链式调用 navigator.mediaDevices.getUserMedia(constraints) 失去：

(3) 点击拍照按钮后，主动生成图片并下载到本地的性能在按钮的 click 事件响应函数里实现。首先调用 canvas 标签对应 Context 的 API drawImage 将显示摄像头内容的 video 标签以后显示的内容绘制到 canvas 标签页上，而后用此内容生成格局为 jpeg 的图片，下载到本地。

办法 2：应用 SAP UI5 自定义控件

这种形式实质上同办法一殊途同归，只不是封装性更好，将办法 1 形容的步骤，封装成一个 SAP UI5 可重用控件，方便使用 SAP UI5 这个前端框架进行开发的前端程序员间接应用。

对于 SAP UI5 这个企业级前端开发框架的介绍，参考笔者之前的 InfoQ 文章：面向企业级前端利用的开发框架 UI5 的倒退简史介绍。

先回顾办法 1 技术实现的要点：

(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 这个脚本文件。

笔者以前还在 SAP 成都研究院 CRM Fiori 利用开发团队工作时，已经写过一个 SAP UI5 框架代码的学习教程，外面有两篇文章，具体介绍了 SAP UI5 XML 视图运行时的渲染原理：

  1. Why my formatter does not work? A trouble shooting example to know how it works
  2. How I do self-study on a given Fiori control – part 10

简略地说，就是 SAP UI5 里有个 XMLTemplateProcessor.js 的实现，运行时当 XML 视图的源文件被浏览器加载解析成 DOM 后，它会对 DOM 树进行深度优先遍历，对遇到的每一个 UI5 标签，加载其实现文件(如果是在 UI5 调试模式下)，而后创立这个标签对应的实例。

回到本文的例子，我写到 SAP UI5 XML 视图里的 div 标签被当成了一个 SAP UI5 XML 的控件，所以 UI5 框架主动去找这个基本不存在的 div 控件的实现文件，当然找不到了。

晓得问题出在哪里，解决的思路天然就有了。本人把 HTML5 原生标签 video 封装成 UI5 控件不就行了？

SAP UI5 开源社区里曾经有一个封装好的 library：

https://github.com/tiagobalme…

先看这个例子在笔记本电脑上拜访的成果：

点击页面上显示的摄像头拍摄的内容，能主动保留成一张图片。
手机上的显示成果：

而后再来看这个 library 的实现原理。

这个 camera 自定义 UI5 控件实现的层级后果如下：

SAP UI5 自定义控件的实现包含三个 JavaScript 文件：

  • library.js：定义这个控件低头级别的管制信息，比方名称，版本号，依赖等。
  • Camera.js：实现了将 WebRTC API 取得的 MediaStream 对象实例绑定到控件封装的 video 元素上的步骤。

  • CameraRender.js：负责将这个自定义控件在 XML 视图里的标签 Camera 渲染成原生的 video 和 canvas 标签的组合。

SAP UI5 的每一个控件都有一个与之对应的渲染类，用于实现 XML 视图里 UI5 的标签到 HTML5 原生标签的转换：

如何应用这个自定义控件呢？

在 XML 视图里应用如下定义即可：

<cam:Camera
    id="idCamera"
    width="800"
    height="600"
    snapshot=".onSnapshot" />

总结

本文介绍了基于 WebRTC 技术应用 JavaScript 调用本机摄像头的解决方案。WebRTC 能够为基于凋谢规范的应用程序增加实时通信性能，反对在对等点之间发送视频、语音和通用数据，容许开发人员构建弱小的语音和视频通信解决方案。

WebRTC 可用于所有古代浏览器以及所有支流操作系统的本地客户端。WebRTC 背地的技术是作为一个凋谢的 Web 规范实现，并且能够在所有支流浏览器中作为惯例 JavaScript API 应用。

本文两个例子在 Windows 10 操作系统的 Chrome 浏览器里实现并通过测试。对于原生客户端，如 Android 和 iOS 应用程序，能够应用提供雷同性能的 WebRTC 库。

心愿本文介绍的知识点对大家采取 JavaScript 实现浏览器环境里调用本机摄像头的需要能有所帮忙，感激浏览。

退出移动版