這篇文章主要介紹了Web技術(shù)如何實(shí)現(xiàn)移動(dòng)監(jiān)測(cè)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于
成都定制網(wǎng)頁(yè)設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)
成都軟裝設(shè)計(jì)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)
成都網(wǎng)站營(yíng)銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
Web技術(shù)實(shí)現(xiàn)移動(dòng)監(jiān)測(cè)的介紹
由上述引用語(yǔ)句可得出“移動(dòng)監(jiān)測(cè)”需要以下要素：
一個(gè)擁有攝像頭的計(jì)算機(jī)用于判斷移動(dòng)的算法移動(dòng)后的處理
注：本文涉及的所有案例均基于 PC/Mac 較新版本的 Chrome / Firefox 瀏覽器，部分案例需配合攝像頭完成，所有截圖均保存在本地。
對(duì)方不想和你說(shuō)話，并向你扔來(lái)一個(gè)鏈接：
體驗(yàn)鏈接>>
綜合案例
該案例有以下兩個(gè)功能：
拍好 POST 后的 1 秒會(huì)進(jìn)行拍照靜止 1 秒后音樂(lè)會(huì)停止，產(chǎn)生移動(dòng)會(huì)恢復(fù)播放狀態(tài)
上述案例也許并不能直接體現(xiàn)出『移動(dòng)監(jiān)測(cè)』的實(shí)際效果和原理，下面再看看這個(gè)案例。
體驗(yàn)鏈接>>
像素差異
案例的左側(cè)是視頻源，而右側(cè)則是移動(dòng)后的像素處理（像素化、判斷移動(dòng)和只保留綠色等）。
因?yàn)槭腔?Web 技術(shù)，所以視頻源采用 WebRTC，像素處理則采用 Canvas。
視頻源
不依賴 Flash 或 Silverlight，我們使用 WebRTC (Web Real-Time Communications) 中的 navigator.getUserMedia() API，該 API 允許 Web 應(yīng)用獲取用戶的攝像頭與麥克風(fēng)流（stream）。
示例代碼如下：
// 具體參數(shù)含義可看相關(guān)文檔。
const constraints = {
audio: false,
video: {
width: 640,
height: 480
}
}
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
// 將視頻源展示在 video 中
video.srcObject = stream
})
.catch(err => {
console.log(err)
})
對(duì)于兼容性問(wèn)題，Safari 11 開(kāi)始支持 WebRTC 了。具體可查看 caniuse。
像素處理
在得到視頻源后，我們就有了判斷物體是否移動(dòng)的素材。當(dāng)然，這里并沒(méi)有采用什么高深的識(shí)別算法，只是利用連續(xù)兩幀截圖的像素差異來(lái)判斷物體是否發(fā)生移動(dòng)（嚴(yán)格來(lái)說(shuō)，是畫(huà)面的變化）。
截圖
獲取視頻源截圖的示例代碼：
const video = document.getElementById('video')
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 640
canvas.height = 480
// 獲取視頻中的一幀
function capture () {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
// ...其它操作
}得出截圖間的差異
對(duì)于兩張圖的像素差異，在 凹凸實(shí)驗(yàn)室 的 《“等一下，我碰！”——常見(jiàn)的2D碰撞檢測(cè)》 這篇博文中所提及的“像素檢測(cè)”碰撞算法是解決辦法之一。該算法是通過(guò)遍歷兩個(gè)離屏畫(huà)布（offscreen canvas）同一位置的像素點(diǎn)的透明度是否同時(shí)大于 0，來(lái)判斷碰撞與否。當(dāng)然，這里要改為『同一位置的像素點(diǎn)是否不同（或差異小于某閾值）』來(lái)判斷移動(dòng)與否。
但上述方式稍顯麻煩和低效，這里我們采用 ctx.globalCompositeOperation = 'difference' 指定畫(huà)布新增元素（即第二張截圖與第一張截圖）的合成方式，得出兩張截圖的差異部分。
體驗(yàn)鏈接>>
示例代碼：
function diffTwoImage () {
// 設(shè)置新增元素的合成方式
ctx.globalCompositeOperation = 'difference'
// 清除畫(huà)布
ctx.clearRect(0, 0, canvas.width, canvas.height)
// 假設(shè)兩張圖像尺寸相等
ctx.drawImage(firstImg, 0, 0)
ctx.drawImage(secondImg, 0, 0)
}
兩張圖的差異
體驗(yàn)上述案例后，是否有種當(dāng)年玩“QQ游戲《大家來(lái)找茬》”的感覺(jué)。另外，這個(gè)案例可能還適用于以下兩種情況：
當(dāng)你不知道設(shè)計(jì)師前后兩次給你的設(shè)計(jì)稿有何差異時(shí)
想查看兩個(gè)瀏覽器對(duì)同一個(gè)網(wǎng)頁(yè)的渲染有何差異時(shí)何時(shí)為一個(gè)“動(dòng)作”
由上述“兩張圖像差異”的案例中可得：黑色代表該位置上的像素未發(fā)生改變，而像素越明亮則代表該點(diǎn)的“動(dòng)作”越大。因此，當(dāng)連續(xù)兩幀截圖合成后有明亮的像素存在時(shí)，即為一個(gè)“動(dòng)作”的產(chǎn)生。但為了讓程序不那么“敏感”，我們可以設(shè)定一個(gè)閾值。當(dāng)明亮像素的個(gè)數(shù)大于該閾值時(shí)，才認(rèn)為產(chǎn)生了一個(gè)“動(dòng)作”。當(dāng)然，我們也可以剔除“不足夠明亮”的像素，以盡可能避免外界環(huán)境（如燈光等）的影響。
想要獲取 Canvas 的像素信息，需要通過(guò) ctx.getImageData(sx, sy, sw, sh)，該 API 會(huì)返回你所指定畫(huà)布區(qū)域的像素對(duì)象。該對(duì)象包含 data、width、height。其中 data 是一個(gè)含有每個(gè)像素點(diǎn) RGBA 信息的一維數(shù)組，如下圖所示。
含有 RGBA 信息的一維數(shù)組
獲取到特定區(qū)域的像素后，我們就能對(duì)每個(gè)像素進(jìn)行處理（如各種濾鏡效果）。處理完后，則可通過(guò) ctx.putImageData() 將其渲染在指定的 Canvas 上。
擴(kuò)展：由于 Canvas 目前沒(méi)有提供“歷史記錄”的功能，如需實(shí)現(xiàn)“返回上一步”操作，則可通過(guò) getImageData 保存上一步操作，當(dāng)需要時(shí)則可通過(guò) putImageData 進(jìn)行復(fù)原。
示例代碼：
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++
}
}
// 如果明亮的像素?cái)?shù)量滿足一定條件
if (imageScore >= IMAGE_SCORE_THRESHOLD) {
// 產(chǎn)生了移動(dòng)
}在上述案例中，你也許會(huì)注意到畫(huà)面是『綠色』的。其實(shí)，我們只需將每個(gè)像素的紅和藍(lán)設(shè)置為 0，即將 RGBA 的 r = 0; b = 0 即可。這樣就會(huì)像電影的某些鏡頭一樣，增加了科技感和神秘感。
體驗(yàn)地址>>
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
跟蹤“移動(dòng)物體”
有了明亮的像素后，我們就要找出其 x 坐標(biāo)的最小值與 y 坐標(biāo)的最小值，以表示跟蹤矩形的左上角。同理，x 坐標(biāo)的大值與 y 坐標(biāo)的大值則表示跟蹤矩形的右下角。至此，我們就能繪制出一個(gè)能包圍所有明亮像素的矩形，從而實(shí)現(xiàn)跟蹤移動(dòng)物體的效果。
找出跟蹤矩形的左上角和右下角
體驗(yàn)鏈接>>
示例代碼：
function processDiff (imageData) {
const rgba = imageData.data
let score = 0
let pixelScore = 0
let motionBox = 0
// 遍歷整個(gè) canvas 的像素，以找出明亮的點(diǎn)
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
}
}
// 得到左上角和右下角兩個(gè)坐標(biāo)值
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 是一個(gè)含有每個(gè)像素點(diǎn) rgba 信息的一維數(shù)組。
// 該函數(shù)是將上述一維數(shù)組的任意下標(biāo)轉(zhuǎn)為 (x,y) 二維坐標(biāo)。
function calcCoord(i) {
return {
x: (i / 4) % diffWidth,
y: Math.floor((i / 4) / diffWidth)
}
}在得到跟蹤矩形的左上角和右下角的坐標(biāo)值后，通過(guò) 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
)
這是理想效果，實(shí)際效果請(qǐng)打開(kāi) 體驗(yàn)鏈接
擴(kuò)展：為什么上述繪制矩形的代碼中的 x、y 要加 0.5 呢？一圖勝千言：
性能縮小尺寸
在上一個(gè)章節(jié)提到，我們需要通過(guò)對(duì) Canvas 每個(gè)像素進(jìn)行處理，假設(shè) Canvas 的寬為 640，高為 480，那么就需要遍歷 640 * 480 = 307200 個(gè)像素。而在監(jiān)測(cè)效果可接受的前提下，我們可以將需要進(jìn)行像素處理的 Canvas 縮小尺寸，如縮小 10 倍。這樣需要遍歷的像素?cái)?shù)量就降低 100 倍，從而提升性能。
體驗(yàn)地址>>
示例代碼：
const motionCanvas // 展示給用戶看
const backgroundCanvas // offscreen canvas 背后處理數(shù)據(jù)
motionCanvas.width = 640
motionCanvas.height = 480
backgroundCanvas.width = 64
backgroundCanvas.height = 48
尺寸縮小 10 倍
定時(shí)器
我們都知道，當(dāng)游戲以『每秒60幀』運(yùn)行時(shí)才能保證一定的體驗(yàn)。但對(duì)于我們目前的案例來(lái)說(shuō)，幀率并不是我們追求的第一位。因此，每 100 毫秒（具體數(shù)值取決于實(shí)際情況）取當(dāng)前幀與前一幀進(jìn)行比較即可。
另外，因?yàn)槲覀兊膭?dòng)作一般具有連貫性，所以可取該連貫動(dòng)作中幅度大的（即“分?jǐn)?shù)”最高）或最后一幀動(dòng)作進(jìn)行處理即可（如存儲(chǔ)到本地或分享到朋友圈）。
延伸
至此，用 Web 技術(shù)實(shí)現(xiàn)簡(jiǎn)易的“移動(dòng)監(jiān)測(cè)”效果已基本講述完畢。由于算法、設(shè)備等因素的限制，該效果只能以 2D 畫(huà)面為基礎(chǔ)來(lái)判斷物體是否發(fā)生“移動(dòng)”。而微軟的 Xbox、索尼的 PS、任天堂的 Wii 等游戲設(shè)備上的體感游戲則依賴于硬件。以微軟的 Kinect 為例，它為開(kāi)發(fā)者提供了可跟蹤最多六個(gè)完整骨骼和每人 25 個(gè)關(guān)節(jié)等強(qiáng)大功能。利用這些詳細(xì)的人體參數(shù)，我們就能實(shí)現(xiàn)各種隔空的『手勢(shì)操作』，如畫(huà)圈圈詛咒某人。
下面幾個(gè)是通過(guò) Web 使用 Kinect 的庫(kù)：
DepthJS：以瀏覽器插件形式提供數(shù)據(jù)訪問(wèn)。
Node-Kinect2： 以 Nodejs 搭建服務(wù)器端，提供數(shù)據(jù)比較完整，實(shí)例較多。
ZigFu：支持 H5、U3D、Flash，API較為完整。
Kinect-HTML5：Kinect-HTML5 用 C# 搭建服務(wù)端，提供色彩數(shù)據(jù)、深度數(shù)據(jù)和骨骼數(shù)據(jù)。
通過(guò) Node-Kinect2 獲取骨骼數(shù)據(jù)
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Web技術(shù)如何實(shí)現(xiàn)移動(dòng)監(jiān)測(cè)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)標(biāo)題：Web技術(shù)如何實(shí)現(xiàn)移動(dòng)監(jiān)測(cè)-創(chuàng)新互聯(lián)
標(biāo)題URL：
http://weahome.cn/article/eiide.html
重慶分公司
重慶分公司
