Hi everyone, i'm working in a project of AR and I need take screenshot quickly from the camera and draw this images in a canvas defined in a webview, but i can't get it to work.
in my controller/index.js i have this:
Titanium.Media.showCamera({ success : function(e) { }, error : function(e) { }, cancel : function(e) { }, overlay : Titanium.UI.createWebView({ url:'/www/index.html', top:0, left:10, right:10, height:320, width:320, backgroundColor:'transparent', touchEnabled:false }) }); setInterval(function(){ Titanium.Media.takeScreenshot(function(blob){ Ti.App.fireEvent("sendImage", {image: blob}); }); }, 4000); $.index.open();and in my index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <meta name="description" content=""> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cleartype" content="on"> <style> h1 { color: yellow; } </style> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); Ti.App.addEventListener('sendImage', function(r) { var bytes = new Uint8Array(r.image); var image = context.createImageData(canvas.width, canvas.height); for (var i=0; i<bytes.length; i++) { image.data[i] = bytes[i]; } context.drawImage(image, 0, 0); }); </script> </body> </html>but nothing happens, i really don't know how work with blob images.
I will be eternally grateful for your support.
Thanks and sorry for my english.