웹 기술 이 모 바 일 모니터링 을 실현 하 는 소개

웹 기술 이 모 바 일 모니터링 을 실현 하 는 소개
상기 인용 문 구 를 통 해'이동 감 측'은 다음 과 같은 요소 가 필요 하 다 는 것 을 알 수 있다.
카메라 가 있 는 컴퓨터 가 이동 을 판단 하 는 알고리즘 이동 후 처리
주의:본 고 에서 언급 한 모든 사례 는 PC/mac 의 새로운 버 전의 Chrome/Firefox 브 라 우 저 를 바탕 으로 하고 일부 사례 는 카메라 에 맞 춰 완성 해 야 하 며 모든 캡 처 는 로 컬 에 저장 되 어 있 습 니 다.
상대방 은 당신 과 말 하고 싶 지 않 습 니 다.그리고 당신 에 게 링크 를 던 집 니 다.
체험 링크>>

종합 사례
이 사례 는 다음 과 같은 두 가지 기능 이 있다.
POST 촬영 후 1 초 간 촬영 정지 1 초 후 음악 이 멈 춰 이동 이 생기 면 재생 상태 가 회 복 됩 니 다.
상기 사례 는'이동 감 측'의 실제 효과 와 원 리 를 직접적 으로 나타 내지 못 할 수도 있 으 니 다음 에 이 사례 를 살 펴 보 자.
체험 링크>>

픽 셀 차이
사례 의 왼쪽 은 영상 소스 이 고 오른쪽 은 이동 후의 픽 셀 처리(픽 셀 화,이동 판단 과 녹색 만 유지 등)이다.
웹 기술 을 기반 으로 하기 때문에 비디오 소스 는 WebRTC 를 사용 하고 픽 셀 처 리 는 Canvas 를 사용한다.
비디오 소스
Flash 나 Silverlight 에 의존 하지 않 고WebRTC(Web Real-Time Communications)의navigator.getUserMedia()API 를 사용 합 니 다.이 API 는 웹 애플 리 케 이 션 이 사용자 의 카메라 와 마이크 흐름(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('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)
 // ...    
}

캡 처 간 의 차 이 를 얻어 내다
두 장의 그림 의 픽 셀 차이 에 대해요철 실험실의"잠깐 만,내 가 만 질 게!"흔 한 2D 충돌 검출>이 블 로그 에서 언급 한'픽 셀 검출'충돌 알고리즘 은 해결 방법 중의 하나 이다.이 알고리즘 은 두 개의 스크린 캔버스(offscreen canvas)가 같은 위치 에 있 는 픽 셀 점 의 투명도 가 동시에 0 보다 큰 지 를 옮 겨 다 니 며 충돌 여 부 를 판단 한다.물론 여 기 는'같은 위치의 픽 셀 점 이 다른 지(또는 차이 가 특정한 한도 값 보다 작은 지)'로 바 꾸 어 이동 여 부 를 판단 해 야 한다.
그러나 상기 방식 은 약간 번 거 롭 고 비효 율 적 이다.여기 서 우 리 는ctx.globalCompositeOperation = 'difference'캔버스 에 새로 추 가 된 요소(즉,두 번 째 캡 처 와 첫 번 째 캡 처)의 합성 방식 을 지정 하여 두 장의 캡 처 의 차이 점 을 얻 을 수 있다.
체험 링크>>
예제 코드:

function diffTwoImage () {
 //            
 ctx.globalCompositeOperation = 'difference'
 
 //     
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 
 //           
 ctx.drawImage(firstImg, 0, 0)
 ctx.drawImage(secondImg, 0, 0)
}

두 장의 차이
상기 사례 를 체험 한 후에 그 당시 에'QQ 게임'여러분 이 트집 을 잡 으 세 요'를 한 느낌 이 들 었 습 니까?또한 이 사례 는 다음 과 같은 두 가지 상황 에 도 적 용 될 수 있다.

디자이너 가 두 번 이나 준 디자인 원고 가 어떤 차이 가 있 는 지 모 를 때

두 브 라 우 저가 같은 웹 페이지 의 렌 더 링 에 어떤 차이 가 있 는 지 보고 싶 을 때 언제'동작'

상기'두 장의 이미지 차이'사례 에서 알 수 있 듯 이 검은색 은 이 위치의 픽 셀 이 변 하지 않 았 음 을 나타 내 고 픽 셀 이 밝 을 수록 이 점 의'동작'이 크다 는 것 을 나타 낸다.따라서 연속 두 프레임 의 캡 처 를 합성 한 후에 밝 은 픽 셀 이 존재 할 때'동작'의 생 성 이다.그러나 프로그램 이 그렇게 민감 하지 않도록 한도 값 을 설정 할 수 있 습 니 다.밝 은 픽 셀 의 개수 가 이 한도 값 보다 많 을 때 만'동작'이 생 겼 다 고 생각 합 니 다.물론 우 리 는 외부 환경(예 를 들 어 조명 등)의 영향 을 최대한 피하 기 위해'밝 지 못 하 다'는 픽 셀 도 제거 할 수 있다.
Canvas 의 픽 셀 정 보 를 얻 으 려 면ctx.getImageData(sx, sy, sw, sh)을 통 해API지정 한 캔버스 영역의 픽 셀 대상 을 되 돌려 줍 니 다.이 대상 은data,width,height을 포함한다.그 중에서data은 픽 셀 점 마다 RGBA 정 보 를 포함 하 는 1 차원 배열 로 다음 그림 과 같다.

RGBA 정 보 를 포함 하 는 1 차원 배열
특정 지역 의 픽 셀 을 가 져 오 면 모든 픽 셀 을 처리 할 수 있 습 니 다(예 를 들 어 각종 필터 효과).처리 후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 으로 설정 하고 RGBAr = 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
)

이것 은 이상 적 인 효과 입 니 다.실제 효 과 는 켜 주세요체험 링크
확장:왜 위 에서 사각형 을 그 리 는 코드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

사이즈 10 배 축소
타이머
우 리 는 모두 게임 이 초당 60 프레임 으로 실 행 될 때 일정한 체험 을 보장 할 수 있다 는 것 을 안다.그러나 현재 우리 의 사례 에 있어 프레임 율 은 우리 가 추구 하 는 첫 번 째 가 아니다.따라서 100 밀리초(구체 적 인 수 치 는 실제 상황 에 달 려 있다)마다 현재 프레임 과 이전 프레임 을 비교 하면 된다.
또한,우리 의 동작 은 일반적으로 연관 성 을 가지 기 때문에 이 연관 동작 에서 가장 큰 폭(즉,'점수'가 가장 높 음)이나 마지막 프레임 동작 으로 처리 하면 된다(예 를 들 어 로 컬 에 저장 하거나 친구 권 에 공유 하 는 것).
뻗다
이로써 웹 기술 로 간편 하 게 구현 되 는'모 바 일 모니터링'효 과 는 기본적으로 설명 됐다.알고리즘,장비 등 요소 의 제한 으로 인해 이 효 과 는 2D 화면 을 바탕 으로 물체 의'이동'여 부 를 판단 할 수 밖 에 없다.반면 마이크로소프트 의 엑스 박스,소니 의 PS,닌텐도 의 Wii 등 게임 기기 의 체감 게임 은 하드웨어 에 의존한다.마이크로소프트 의 Kinect 를 예 로 들 면 개발 자 에 게 최대 6 개의 완전한 뼈 와 1 인당 25 개의 관절 을 추적 할 수 있 는 강력 한 기능 을 제공 합 니 다.이런 상세 한 인체 매개 변 수 를 이용 하면 우 리 는 각종 간격 을 두 고'손짓 조작'을 실현 할 수 있다.예 를 들 어 동 그 라 미 를 그 려 누 군 가 를 저주 하 는 것 과 같다.
다음은 웹 을 통 해 Kinect 를 사용 하 는 라 이브 러 리 입 니 다.

DepthJS:브 라 우 저 플러그 인 형식 으로 데이터 접근 을 제공 합 니 다.

Node-Kinect2:Nodejs 로 서버 단 을 구축 하여 데이터 가 비교적 완전 하고 인 스 턴 스 가 많 습 니 다.

ZigFu:H5,U3D,Flash 를 지원 하고 API 가 비교적 완전 합 니 다.

Kinect-HTML5:Kinect-HTML5 는 C\#로 서버 를 구축 하여 색채 데이터,깊이 데이터 와 골격 데 이 터 를 제공한다.

Node-Kinect 2 를 통 해 골격 데이터 획득
글 은 여기 서 정말 끝 납 니 다.더 많은 게임 방법 을 알 고 싶다 면 주목 하 세 요요철 실험실.더 많은 게임 방법 도 발굴 해 주시 기 바 랍 니 다.
참고 자료
HTML 5 로 Kinect 체감 게임 개발
MOTION DETECTION WITH JAVASCRIPT
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!