HTML5 모션 추적 <canvas>을 사용하여

현재 HTML5 모션 추적 작업을하고 있으며 현재 드로잉 컨텍스트의 drawImage 메서드를 사용하여 현재 프레임을 캡처하고 "추적기"개체를 추가하고 있습니다.HTML5 모션 추적 <canvas>을 사용하여

여기 예제 코드를 볼 수 있습니다

ctx.drawImage(video, 0, 0); 

    var cat = new Image(); 
    cat.src = 'cat.png'; 
    cat.onload = function() { 
     ctx.drawImage(cat, 150, 190); 
    }

하지만 내뿐만 아니라 사파리 아이폰 OS 브라우저를 지원해야 솔루션, 그러나 이것은 브라우저의 문서에서입니다 다음의 소스로 비디오 :

주 canvas drawImage() 메소드가 현재 iOS에서 지원되는 이 아닙니다.

의 drawImage의 소스 (로 비디오 사용) 시스템 많은 자원을 포함한다 :

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

그래서 그들은 다음과 같은 솔루션을 제안했다. 일반적으로 비디오는 캔버스 요소가 아닌 비디오 요소를 사용하여 가장 잘 표시됩니다. 동영상을 움직여서 캔버스 텍스트 또는 애니메이션을 합성하려면 캔버스 뒤에서 비디오 요소 을 사용하는 것이 좋습니다. 비디오는 캔버스 캔버스에 비디오를 표시하는 오버 헤드없이 캔버스의 투명 배경 을 통해 투명 배경을 통해 보여줍니다.
"frames": { 
    "0": [{ 
     "i": 0, 
     "x": 686.356, 
     "y": 192.797 
    }, 
    { 
     "i": 2, 
     "x": 1036.4, 
     "y": 194.135 
    }, 
    { 
     "i": 3, 
     "x": 566, 
     "y": 113.5 
    }, 
    { 
     "i": 4, 
     "x": 357, 
     "y": 98 
    }], 
(저는 여기에 4 개체에 따라)

: 다음 개체의

좌표는 JSON 파일 (I 각 프레임에 대한 정보를 가지고)에서 유래, 여기에 하나 개의 프레임에 대한 JSON 내용입니다 그래서 나는 더 좋은 접근 방법이 무엇인지 생각하고있다. 모든 프레임을 캡처하고 다음 객체를 캔버스에 추가하거나 투명 캔버스를 사용하고 다음 객체 만 그립니다. 나는 오렌지 항목을 의미하는 "다음 개체"으로 http://codeazur.com.br/stuff/motiontracking/

: 내 설명이 나쁜 경우

, 당신은 다음과 같은 영상을 확인할 수 있습니다.

출처

2013-04-24 vitozev

아마도 쉬운 결정 일 것입니다.

비디오 용 비디오 태그와 그림 용 캔버스 태그입니다.

각 프레임마다 json 좌표가 있으므로 배경에서 비디오를 재생하고 주황색 트래커를 비디오 상단에있는 캔버스에 놓습니다.

비디오 메트릭을 사용하여 프레임을 추적 그림과 동기화 할 수 있습니다. 이미 솔루션의 일부분을 가지고 있다고 가정하지만 여기에 비디오 측정 항목에 대한 참조가 있습니다. http://wiki.whatwg.org/wiki/Video_Metrics

출처

2013-04-24 17:26:28 markE

HTML5 모션 추적 <canvas>을 사용하여

답변

관련 문제