Issue capture a screenshot of a mask rendered take a snapshot.

[eduhpxavier]

Hi, i was trying take a shot using this code in https://www.auduno.com/clmtrackr/examples/face_mask.html but the screen show only WebCan without mask, could you helpme?¿

CODE:

    var videoId = 'videoel';  <--
    var scaleFactor = 1;
    var snapshots = [];

    /**
     * Captures a image frame from the provided video element.
     *
     * @param {Video} video HTML5 video element from where the image frame will be captured.
     * @param {Number} scaleFactor Factor to scale the canvas element that will be return. This is an optional parameter.
     *
     * @return {Canvas}
     */
    function capture(video, scaleFactor) {
        if (scaleFactor == null) {
            scaleFactor = 1;
        }
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        return canvas;
    }

    /**
     * Invokes the <code>capture</code> function and attaches the canvas element to the DOM.
     */
    function shoot() {

        html2canvas(document.querySelector("#capture")).then(canvasr => {
            document.body.appendChild(canvasr)
        });

        var video = document.getElementById(videoId);
        var output = document.getElementById('output');
        var canvas = capture(video, scaleFactor);

        canvas.onclick = function () {
            window.open(this.toDataURL());
        };
        snapshots.unshift(canvas);
        output.innerHTML = '';
        for (var i = 0; i < 4; i++) {
            output.appendChild(snapshots[i]);
        }
    }

[donut87]

The answer lies in lines 109 & 110

clmtrackr/examples/face_mask.html

Line 109 in ebe5264

<canvas id="overlay" width="400" height="300"></canvas>

There are 2 canvases (is that the correct plural???) that are lying over the video tag. So you would need to merge the video with the overlay canvas. This should work by drawing the content of the canvas with the ID 'webgl' (Line 110) in your newly formed canvas element.

I hope this helps.