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

HTML5，JavaScript 和现代浏览器这套三驾马车的组合，使得传统的 Web 应用较之过去能实现更多更丰富的同用户交互的功能。摄像头如今已成为智能手机的标配，前端 Web 应用也出现了越来越多的打开本机摄像头，扫描条形码，二维码等需求。

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

方法1：基于现代浏览器支持的 WebRTC API 实现

我采用该思路实现了一个简单的 Web 页面，全部源代码维护在如下的 Github 代码仓库里：

https://github.com/wangzixi-diablo/WebAppCollection/tree/main/WebContent/camera

首先看看运行该 Web 应用的效果。

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

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