首頁 > 文章 > web前端 > Web技術如何實現行動監測

Web技術如何實現行動監測

小云云原創: 2018-02-09 13:27:111626瀏覽

本文主要和大家介紹Web技術如何實現行動監測，行動偵測，一般也叫運動偵測，常用於無人值守監視器錄影和自動警報。透過相機以不同幀率擷取所得的影像會被CPU 依照一定演算法計算與比較，當畫面有變化時，如有人走過，鏡頭被移動，計算比較結果得出的數字會超過閾值並指示系統能自動作出對應的處理

Web技術實現行動監控的介紹

由上述引用語句可得出「移動監控」需要以下要素：

一個擁有攝影機的電腦用於判斷移動的演算法移動後的處理

註：本文涉及的所有案例均基於PC/Mac 較新版本的Chrome / Firefox 瀏覽器，部分案例需配合攝影機完成，所有截圖均保存在本地。

對方不想跟你說話，並向你丟來一個連結：

體驗連結>>

Web技術如何實現行動監測
綜合案例

此案例有以下兩個功能：

拍好POST 後的1 秒會進行拍照靜止1 秒後音樂會停止，產生移動會恢復播放狀態

上述案例也許並不能直接體現出『移動監控』的實際效果和原理，下面再看看這個案例。

體驗連結>>

Web技術如何實現行動監測
#像素差異

案例的左邊是視訊來源，而右則是移動後的像素處理（Web技術如何實現行動監測、判斷移動和只保留綠色等）。

因為是基於 Web 技術，所以視訊來源採用 WebRTC，像素處理則採用 Canvas。

視訊來源

不依賴Flash 或Silverlight，我們使用WebRTC (Web Real-Time Communications) 中的navigator.getUserMedia() API，該API 允許Web 應用取得使用者的攝影機與麥克風串流（stream）。

範例程式碼如下：

<!-- 若不加 autoplay，则会停留在第一帧 -->
<video id="video" autoplay></video>
// 具体参数含义可看相关文档。
const constraints = {
 audio: false,
 video: {
 width: 640,
 height: 480
 }
}
navigator.mediaDevices.getUserMedia(constraints)
 .then(stream => {
 // 将视频源展示在 video 中
 video.srcObject = stream
 })
 .catch(err => {
 console.log(err)
 })

對於相容性問題，Safari 11 開始支援 WebRTC 了。具體可查看 caniuse。

像素處理

在得到視訊來源後，我們就有了判斷物體是否移動的素材。當然，這裡並沒有採用什麼高深的辨識演算法，只是利用連續兩格截圖的像素差異來判斷物體是否發生移動（嚴格來說，是畫面的變化）。

截圖

取得影片來源截圖的範例程式碼：

const video = document.getElementById(&#39;video&#39;)
const canvas = document.createElement(&#39;canvas&#39;)
const ctx = canvas.getContext(&#39;2d&#39;)
canvas.width = 640
canvas.height = 480
// 获取视频中的一帧
function capture () {
 ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
 // ...其它操作
}

得出截圖間的差異

對於兩張圖的像素差異，在凹凸實驗室的《「等一下，我碰！」—常見的2D碰撞偵測》這篇文章中所提及的「像素偵測」碰撞演算法是解決辦法之一。演算法是透過遍歷兩個離螢幕畫布（offscreen canvas）同一位置的像素點的透明度是否同時大於 0，來判斷碰撞與否。當然，這裡要改為『同一位置的像素點是否不同（或差異小於某閾值）』來判斷移動與否。

但上述方式稍微麻煩和低效，這裡我們採用ctx.globalCompositeOperation = 'difference' 指定畫布新增元素（即第二張截圖與第一張截圖）的合成方式，得出兩張截圖的差異部分。

體驗連結>>

範例程式碼：

function diffTwoImage () {
 // 设置新增元素的合成方式
 ctx.globalCompositeOperation = &#39;difference&#39;
 
 // 清除画布
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 
 // 假设两张图像尺寸相等
 ctx.drawImage(firstImg, 0, 0)
 ctx.drawImage(secondImg, 0, 0)
}

Web技術如何實現行動監測 ##兩張圖的差異

體驗上述案例後，是否有種當年玩「QQ遊戲《大家來找茬》」的感覺。另外，這個案例可能也適用於以下兩種情況：

#當你不知道設計師前後兩次給你的設計稿有何差異時
#想查看兩個瀏覽器對同一個網頁的渲染有何差異時何時為一個“動作”

#由上述“兩張圖像差異”的案例中可得：黑色代表該位置上的像素未改變，而像素越明亮則代表該點的「動作」越大。因此，當連續兩幀截圖合成後有明亮的像素存在時，即為一個「動作」的產生。但為了讓程式不那麼“敏感”，我們可以設定一個閾值。當明亮像素的數量大於該閾值時，才認為產生了一個「動作」。當然，我們也可以剔除「不夠明亮」的像素，盡可能避免外在環境（如燈光等）的影響。

想要获取 Canvas 的像素信息，需要通过 ctx.getImageData(sx, sy, sw, sh)，该 API 会返回你所指定画布区域的像素对象。该对象包含 data、width、height。其中 data 是一个含有每个像素点 RGBA 信息的一维数组，如下图所示。

getImageData 图像
含有 RGBA 信息的一维数组

获取到特定区域的像素后，我们就能对每个像素进行处理（如各种滤镜效果）。处理完后，则可通过 ctx.putImageData() 将其渲染在指定的 Canvas 上。

扩展：由于 Canvas 目前没有提供“历史记录”的功能，如需实现“返回上一步”操作，则可通过 getImageData 保存上一步操作，当需要时则可通过 putImageData 进行复原。

示例代码：

let imageScore = 0
const rgba = imageData.data
for (let i = 0; i < rgba.length; i += 4) {
 const r = rgba[i] / 3
 const g = rgba[i + 1] / 3
 const b = rgba[i + 2] / 3
 
 const pixelScore = r + g + b
 
 // 如果该像素足够明亮
 if (pixelScore >= PIXEL_SCORE_THRESHOLD) {
 imageScore++
 }
}
// 如果明亮的像素数量满足一定条件
if (imageScore >= IMAGE_SCORE_THRESHOLD) {
 // 产生了移动
}

在上述案例中，你也许会注意到画面是『绿色』的。其实，我们只需将每个像素的红和蓝设置为 0，即将 RGBA 的 r = 0; b = 0 即可。这样就会像电影的某些镜头一样，增加了科技感和神秘感。

体验地址>>

const rgba = imageData.data
for (let i = 0; i < rgba.length; i += 4) {
 rgba[i] = 0 // red
 rgba[i + 2] = 0 // blue
}
ctx.putImageData(imageData, 0, 0)

将 RGBA 中的 R 和 B 置为 0

跟踪“移动物体”

有了明亮的像素后，我们就要找出其 x 坐标的最小值与 y 坐标的最小值，以表示跟踪矩形的左上角。同理，x 坐标的最大值与 y 坐标的最大值则表示跟踪矩形的右下角。至此，我们就能绘制出一个能包围所有明亮像素的矩形，从而实现跟踪移动物体的效果。

Web技術如何實現行動監測

体验链接>>

示例代码：

function processDiff (imageData) {
 const rgba = imageData.data
 
 let score = 0
 let pixelScore = 0
 let motionBox = 0
 
 // 遍历整个 canvas 的像素，以找出明亮的点
 for (let i = 0; i < rgba.length; i += 4) {
 pixelScore = (rgba[i] + rgba[i+1] + rgba[i+2]) / 3
 
 // 若该像素足够明亮
 if (pixelScore >= 80) {
 score++
 
 coord = calcCoord(i)
 motionBox = calcMotionBox(montionBox, coord.x, coord.y)
 }
 }
 
 return {
 score,
 motionBox
 }
}
// 得到左上角和右下角两个坐标值
function calcMotionBox (curMotionBox, x, y) {
 const motionBox = curMotionBox || {
 x: { min: coord.x, max: x },
 y: { min: coord.y, max: y }
 }
 motionBox.x.min = Math.min(motionBox.x.min, x)
 motionBox.x.max = Math.max(motionBox.x.max, x)
 motionBox.y.min = Math.min(motionBox.y.min, y)
 motionBox.y.max = Math.max(motionBox.y.max, y)
 return motionBox
}
// imageData.data 是一个含有每个像素点 rgba 信息的一维数组。
// 该函数是将上述一维数组的任意下标转为 (x,y) 二维坐标。
function calcCoord(i) {
 return {
 x: (i / 4) % diffWidth,
 y: Math.floor((i / 4) / diffWidth)
 }
}

在得到跟踪矩形的左上角和右下角的坐标值后，通过 ctx.strokeRect(x, y, width, height) API 绘制出矩形即可。

ctx.lineWidth = 6
ctx.strokeRect(
 diff.motionBox.x.min + 0.5,
 diff.motionBox.y.min + 0.5,
 diff.motionBox.x.max - diff.motionBox.x.min,
 diff.motionBox.y.max - diff.motionBox.y.min
)

Web技術如何實現行動監測
这是理想效果，实际效果请打开体验链接

扩展：为什么上述绘制矩形的代码中的 x、y 要加 0.5 呢？一图胜千言：

性能缩小尺寸

在上一个章节提到，我们需要通过对 Canvas 每个像素进行处理，假设 Canvas 的宽为 640，高为 480，那么就需要遍历 640 * 480 = 307200 个像素。而在监测效果可接受的前提下，我们可以将需要进行像素处理的 Canvas 缩小尺寸，如缩小 10 倍。这样需要遍历的像素数量就降低 100 倍，从而提升性能。

体验地址>>

示例代码：

const motionCanvas // 展示给用户看
const backgroundCanvas // offscreen canvas 背后处理数据
motionCanvas.width = 640
motionCanvas.height = 480
backgroundCanvas.width = 64
backgroundCanvas.height = 48

Web技術如何實現行動監測
尺寸缩小 10 倍

定时器

我们都知道，当游戏以『每秒60帧』运行时才能保证一定的体验。但对于我们目前的案例来说，帧率并不是我们追求的第一位。因此，每 100 毫秒（具体数值取决于实际情况）取当前帧与前一帧进行比较即可。

另外，因为我们的动作一般具有连贯性，所以可取该连贯动作中幅度最大的（即“分数”最高）或最后一帧动作进行处理即可（如存储到本地或分享到朋友圈）。

延伸

至此，用 Web 技术实现简易的“移动监测”效果已基本讲述完毕。由于算法、设备等因素的限制，该效果只能以 2D 画面为基础来判断物体是否发生“移动”。而微软的 Xbox、索尼的 PS、任天堂的 Wii 等游戏设备上的体感游戏则依赖于硬件。以微软的 Kinect 为例，它为开发者提供了可跟踪最多六个完整骨骼和每人 25 个关节等强大功能。利用这些详细的人体参数，我们就能实现各种隔空的『手势操作』，如画圈圈诅咒某人。

下面几个是通过 Web 使用 Kinect 的库：

DepthJS：以浏览器插件形式提供数据访问。
Node-Kinect2：以 Nodejs 搭建服务器端，提供数据比较完整，实例较多。
ZigFu：支援 H5、U3D、Flash，API較為完整。
Kinect-HTML5：Kinect-HTML5 用 C# 建構服務端，提供色彩資料、深度資料和骨骼資料。

通过 Web 访问 Kinect
透過Node-Kinect2 取得骨骼資料

Web技術如何實現行動監測

相關文章