将视频添加到konvajs舞台

Question

我有一个工作网络功能，使用html5视频和画布访问设备摄像头的mediaStream，然后拍摄照片并在画布中呈现图像。运作良好，但我想用konvajs舞台而不是画布。

代码

I created a new konva image object: 

     var video = new Konva.Image({ 
     node:video, 
     x: 50, 
     y: 50, 
    image: vidObj, 
    width: 300, 
    height: 300 
    }); 

完整的代码是在这里：https://jsfiddle.net/tommy6s/63qbt12b/

Answer 1

我认为最好的办法是画视频到canvas元素，然后用这个画布作为源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