javascript - 将视频添加到 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

我认为最好的方法是将视频绘制到画布元素中，然后使用这个画布作为源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