很多开发的童鞋都是只身混江湖、夜宿城中村，如果居住的地方安保欠缺，那么出门在外难免担心屋里的财产安全。

事实上世面上有很多高大上的防盗设备，但对于机智的前端童鞋来说，只要有一台附带摄像头的电脑，就可以简单地实现一个防盗监控系统~

纯 JS 的“防盗”能力很大程度借助于 H5 canvas 的力量，且非常有意思。如果你对 canvas 还不熟悉，可以先点这里阅读我的系列教程。

step1. 调用摄像头

我们需要先在浏览器上访问和调用摄像头，用来监控屋子里的一举一动。不同浏览器中调用摄像头的 API 都略有出入，在这里我们以 chrome 做示例：

运行页面后，浏览器出于安全性考虑，会询问是否允许当前页面访问你的摄像头设备，点击“允许”后便能直接在 <video> 上看到摄像头捕获到的画面了：

step2. 捕获 video 帧画面

光是开着摄像头监视房间可没有任何意义，浏览器不会帮你对监控画面进行分析。所以这里我们得手动用脚本捕获 video 上的帧画面，用于在后续进行数据分析。

从这里开始咱们就要借助 canvas 力量了。在 Canvas入门（五）一文我们介绍过 ctx.drawImage() 方法，通过它可以捕获 video 帧画面并渲染到画布上。

我们需要创建一个画布，然后这么写：

如上代码所示，5秒后把视频帧内容渲染到画布上（下方右图）：

step3. 对捕获的两个帧画面执行差异混合

在上面我们提到过，要有效地识别某个场景，需要对视频画面进行数据分析。

那么要怎么识别咱们的房子是否有人突然闯入了呢？答案很简单 —— 定时地捕获 video 画面，然后对比前后两帧内容是否存在较大变化。

我们先简单地写一个定时捕获的方法，并将捕获到的帧数据存起来：