Web技術實現移動監測的介紹

來源：懂視網責編：小采時間：2020-11-27 22:29:43

Web技術實現移動監測的介紹

Web技術實現移動監測的介紹: Web技術實現移動監測的介紹由上述引用語句可得出移動監測需要以下要素：一個擁有攝像頭的計算機用于判斷移動的算法移動后的處理注：本文涉及的所有案例均基于 PC/Mac 較新版本的 Chrome / Firefox 瀏覽器，部分案例需配合攝像頭完成，所有截圖均保存

推薦度：

點擊下載本文 文檔為doc格式

導讀Web技術實現移動監測的介紹: Web技術實現移動監測的介紹由上述引用語句可得出移動監測需要以下要素：一個擁有攝像頭的計算機用于判斷移動的算法移動后的處理注：本文涉及的所有案例均基于 PC/Mac 較新版本的 Chrome / Firefox 瀏覽器，部分案例需配合攝像頭完成，所有截圖均保存

示例代碼：



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 坐標的最大值則表示跟蹤矩形的右下角。至此，我們就能繪制出一個能包圍所有明亮像素的矩形，從而實現跟蹤移動物體的效果。

找出跟蹤矩形的左上角和右下角

體驗鏈接>>

示例代碼：

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
)

JOY在動
這是理想效果，實際效果請打開體驗鏈接

擴展：為什么上述繪制矩形的代碼中的 x、y 要加 0.5 呢？一圖勝千言：
0.5 像素

性能縮小尺寸

在上一個章節提到，我們需要通過對 Canvas 每個像素進行處理，假設 Canvas 的寬為 0，高為 480，那么就需要遍歷 0 * 480 = 307200 個像素。而在監測效果可接受的前提下，我們可以將需要進行像素處理的 Canvas 縮小尺寸，如縮小 10 倍。這樣需要遍歷的像素數量就降低 100 倍，從而提升性能。

體驗地址>>

示例代碼：

const motionCanvas // 展示給用戶看
const backgroundCanvas // offscreen canvas 背后處理數據
motionCanvas.width = 0
motionCanvas.height = 480
backgroundCanvas.width = 
backgroundCanvas.height = 48

像素化
尺寸縮小 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 獲取骨骼數據