实现一个简单但有趣的AR效果（Web）

  

有人说：一个人从1岁活到80岁很平凡，但如果从80岁倒着活，那么一半以上的人都可能不凡。

生活没有捷径，我们踩过的坑都成为了生活的经验，这些经验越早知道，你要走的弯路就会越少。 

---

本文涉及多个 Codepen 案例，若想获得更佳体验，请到 凹凸实验室博客 阅读，谢谢。

 

增强现实（Augmented Reality，简称AR）：是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术，这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。

本文将让你了解“如何通过 Web 技术实现一个简单但有趣的 AR 效果”。

实现分析

正如文章开头说道：AR 是将真实环境与虚拟物体实时地叠加到一个画面。因此我们需要通过摄像头实时获取真实环境，并通过识别算法识别与分析真实环境中特定的物体，然后结合得到的数据，将虚拟物体以某种方式结合到画面中。

结合我们的案例，可得出以下步骤：

1. 获取视频源
2. 分析源，并识别出 Marker 位置
3. 将虚拟物体叠加在 Marker 上
4. 将最终画面显示在屏幕上

下面我们就根据以上步骤逐点分析。

技术分析

获取视频源

不依赖 Flash 或 Silverlight，我们使用 navigator.getUserMedia() API，该 API 允许 web 应用获取用户的摄像头与麦克风流（stream）。

<!-- 若不加 autoplay，则会停留在第一帧 -->
<video autoplay></video>


navigator.getUserMedia  = navigator.getUserMedia ||