Ajouter une vidéo à l'étape konvajs

Question

Je dispose d'une fonctionnalité Web qui utilise la vidéo et le canevas html5 pour accéder à mediaStream de la caméra de l'appareil, puis prendre une photo et restituer l'image dans le canevas. Fonctionne bien mais je voudrais utiliser konvajs stage au lieu de canvas.

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

Le code complet est ici: https://jsfiddle.net/tommy6s/63qbt12b/

Answer 1

Je pense que la meilleure façon est de dessiner la vidéo dans l'élément de toile, utilisez cette toile comme source pour 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(); 

DEMO