javascript - 将视频添加到 konvajs 舞台

Question

我有一个有效的 Web 功能，它使用 html5 视频和 Canvas 来访问设备相机的媒体流，然后拍照并在 Canvas 中渲染图像。效果很好，但我想使用 konvajs stage 而不是 canvas。

代码

    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 元素中，然后使用此 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();

https://konvajs.github.io/docs/sandbox/Video_On_Canvas.html