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); 
    }

但我的解決方案應該支持Safari瀏覽器的iOS瀏覽器爲好，但這是從瀏覽器的文檔：

注：視頻作爲源畫布drawImage（）方法不是當前在iOS上支持的。

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

因此，他們提出以下解決方案：

使用錄像作爲的drawImage源（）涉及大量的系統資源的。一般來說，視頻最好使用視頻元素顯示，而不是畫布元素。要合成畫布文本或移動視頻上的動畫，最好在畫布後使用視頻元素 -視頻通過畫布的透明背景顯示，無需在畫布本身上顯示視頻的開銷。

遵循對象的座標來自JSON文件（我對每一幀信息），這裏是JSON內容爲一個框架：

"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個對象）

所以我在想，有什麼更好的方法？要捕捉每一幀並在畫布上添加以下對象，或者使用透明畫布並僅繪製下列對象。

如果我的解釋是壞，你可以檢查以下視頻：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>

回答

相關問題