I have a working web functionality that uses html5 video and canvas to access the mediaStream of the device camera then take a photo and render the image in the canvas. Works well but I would like to use konvajs stage instead of canvas.
The code
I created a new konva image object:
var video = new Konva.Image({
node:video,
x: 50,
y: 50,
image: vidObj,
width: 300,
height: 300
});
The complete code is here: https://jsfiddle.net/tommy6s/63qbt12b/
I think the best way is to draw video into canvas element, then use this canvas as source for Konva.Image:
// create canvas
var width = 300;
var height = 300;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
var vidObj = new Image();
var snap = layer.findOne('.snap');
if (!snap) {
snap = new Konva.Image({
image: canvas,
x: 50,
y: 50,
width: 300,
height: 300,
name: 'snap'
});
layer.add(snap);
}
snap.image(canvas);
layer.draw();
