JavaScript合并画布和视频上下文

Question

我有一个Video标签，在该标签上方有一个画布元素，可以在其中绘制。我需要创建一个对视频和画布进行截图的功能。

到目前为止，我可以创建视频的屏幕截图，但不能同时创建两者

到目前为止，我的代码：

getCameraImage () {
    let video = $("video").get(0);
    let canvas = document.createElement("canvas");
    let img = document.createElement("img");

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    img.src = canvas.toDataURL();

    return img.src;
},

这就是我使用源生成img标签的方式：

    let screenImg = this.getCameraImage();

    this.screenshotContainer.prepend(
            '<img src="" id=\"current-video-screenshot-' + counter + '\" alt="screenshot" width="300px"/>'
        );
    document.getElementById('current-video-screenshot-'+counter).setAttribute('src', screenImg);