在HTML里加载摄像头并实现拍照功能

在网页中直接调用摄像头，实现实时预览和拍照功能，听起来是不是很酷？其实，借助现代Web技术，这一切都可以在浏览器中轻松完成。无需额外安装插件，只需准备好HTML、Ja vaScript，再加上一点点对浏览器API的了解。

先来看看最终实现的效果：

视频加载：页面成功访问并调用了用户的摄像头。

拍照：点击“截图”按钮，可以捕获当前视频画面。

实现这套功能，结构非常清晰，总共就两大块：一是搭建页面骨架，二是编写控制逻辑。下面咱们就一步一步来拆解。

第一步：创建HTML元素

万事开头难，但在Web开发里，一切的开端往往是创建一个标准的HTML5文档。先搭好这个基础框架：

有了这个框架，我们就在 `` 标签内部，塞入实现功能的核心组件。需要什么呢？一个用于显示实时视频流的 `

截图

看，结构就这么简单明了。接下来，就是要让这些静态元素“活”起来了。

第二步：编写Ja vaScript逻辑

静态页面搭建好了，真正的魔法靠Ja vaScript来施展。这部分代码可以分为两段，分别负责不同的任务。

首先，是处理摄像头访问和视频流加载的代码。通常，我们会把它放在 `` 区域，确保逻辑尽早准备就绪。这里的关键在于使用 `na vigator.mediaDevices.getUserMedia` 这个现代API。当然，浏览器世界总有些历史遗留问题，所以下面代码也附带了处理旧版API的注释（为了清晰，我们先聚焦于现代标准写法）。

视频流加载成功后，怎么把它定格成一张照片呢？这就是第二段脚本的任务了。这段代码需要放在之前那些HTML元素的后面，确保页面元素已经生成，脚本才能正确找到它们并绑定事件。

到这里，所有核心代码就齐活了。简单总结一下：第一段脚本负责“打开眼睛”（访问摄像头并显示），第二段脚本负责“按下快门”（捕获画面到画布）。

现在，保存你的HTML文件，用浏览器打开它。如果一切顺利，你应该会看到浏览器请求摄像头权限，点击允许后，实时画面就会出现。再点击那个“截图”按钮，当前的瞬间就会被定格在右边的画布里。一个完整的网页版拍照小应用，就这样轻松实现了。