How to take snapshot with a webcam in EXTJS - extjs

Question

everyone, can you help me? How to take snapshot with a webcam in EXTJS
is that possible?
thanks

Answer 1

I have done an example which works in firefox browser and you can have at look at these demo
Ext.onReady(function(){
var localMediaStream;
Ext.create('Ext.window.Window', {
title: 'Take SnapShot',
height: 400,
width: 800,
layout: 'hbox',
items:[
{
width:400,
title:"Preview",
height:400,
id:'preview',
html:'<video id="video" width="350" height="250" autoplay></video>',
tbar:[{
text:"Start Video",
handler:function(){
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
navigator.getUserMedia (
{
video: true
},
function(stream) {
if (video.mozSrcObject !== undefined) {
localMediaStream = stream;
video.mozSrcObject = stream;
}
},function(err) {
console.log("The following error occured: " + err);
}
);
}
},
{
text:"Snapshot",
handler:function(){
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.drawImage(video, 20, 20, 400, 220);
}
}
]
},
{
width:400,
title:"Snapshot",
height:400,
html:'<canvas id="canvas" width="320" height="240"></canvas>'
}
]
}).show();
});