Why is video from canvas.captureStream empty when

I have a perfectly working demo animation within a canvas element that I can record as a webm video file with MediaRecorder and captureStream() from the <canvas> element.

The animations from the 2d context api come out just fine in the resulting video, but when I try to use drawImage() in order to add an image to the canvas I can't seem to make it work properly. In the latter case the MediaRecorder.ondataavailable handler doesn't receive valid data and the resulting video file is a 0-byte file.

I even implemented a demo where I can toggle whether or not a drawImage() call is performed. in the code below, if drawImage = false the video is generated without a problem, but if drawImage is toggled to true, it will generate a 0-byte file instead.

In order to demonstrate, I put together this jsfiddle https://jsfiddle.net/keyboardsamurai/3tkm0dp6/16/

I am running this code on "Chrome Version 75.0.3770.100 (Official Build) (64-Bit)" on MacOS - not even sure if it is supposed to run on Firefox etc. since the MediaRecorder API throws seemingly unrelated errors on FF.

See also the full code here:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<canvas id="drawing_canvas" width="1280" height="720"></canvas>

<script>
    const image = new Image();
    image.src = 'https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg';

    window.requestAnimationFrame(animation);

    const drawImage = false;  // toggle to 'true' to make this example fail
    const canvas = document.getElementById('drawing_canvas');

    const allChunks = [];
    const recorder = initMediaRecorder(canvas);
    recorder.start();

    setTimeout(function (e) {
        console.log("Video ended");
        recorder.stop();
    }, 5000);

    function initMediaRecorder(canvasElement) {
        const stream = canvasElement.captureStream(60);
        const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});
        recorder.ondataavailable = function (e) {
            console.log("data handler called");
            if (e.data) {
                console.log("data available: " + e.data.size)
                if (e.data.size > 0) {
                    console.log("data added");
                    allChunks.push(e.data);
                }
            } else {
                console.error("Data handler received no data in event: " + JSON.stringify(e))
            }
        };

        recorder.onstop = function (e) {
            const fullBlob = new Blob(allChunks);
            const link = document.createElement('a');
            link.style.display = 'none';

            link.href = window.URL.createObjectURL(fullBlob);
            link.download = 'media.webm';

            document.body.appendChild(link);
            link.click();
            link.remove();
        };
        return recorder;
    }


    function animation() {
        const now = new Date();
        const ctx = document.getElementById('drawing_canvas').getContext('2d');

        if (drawImage) {
            ctx.drawImage(image, 0, 0);
        }

        ctx.clearRect(0, 0, 150, 150);

        ctx.strokeStyle = 'white';
        ctx.fillStyle = 'white';
        ctx.rect(0, 0, 1280, 720);
        ctx.stroke();

        ctx.save();

        ctx.translate(75, 75);
        ctx.scale(0.4, 0.4);
        ctx.rotate(-Math.PI / 2);
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white';
        ctx.lineWidth = 8;
        ctx.lineCap = 'round';

        // Hour marks
        ctx.save();
        for (var i = 0; i < 12; i++) {
            ctx.beginPath();
            ctx.rotate(Math.PI / 6);
            ctx.moveTo(100, 0);
            ctx.lineTo(120, 0);
            ctx.stroke();
        }
        ctx.restore();

        // Minute marks
        ctx.save();
        ctx.lineWidth = 5;
        for (i = 0; i < 60; i++) {
            if (i % 5 != 0) {
                ctx.beginPath();
                ctx.moveTo(117, 0);
                ctx.lineTo(120, 0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI / 30);
        }
        ctx.restore();

        const sec = now.getSeconds();
        const min = now.getMinutes();
        let hr = now.getHours();
        hr = hr >= 12 ? hr - 12 : hr;

        ctx.fillStyle = 'black';

        // write Hours
        ctx.save();
        ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
        ctx.lineWidth = 14;
        ctx.beginPath();
        ctx.moveTo(-20, 0);
        ctx.lineTo(80, 0);
        ctx.stroke();
        ctx.restore();

        // write Minutes
        ctx.save();
        ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-28, 0);
        ctx.lineTo(112, 0);
        ctx.stroke();
        ctx.restore();

        // Write seconds
        ctx.save();
        ctx.rotate(sec * Math.PI / 30);
        ctx.strokeStyle = '#D40000';
        ctx.fillStyle = '#D40000';
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-30, 0);
        ctx.lineTo(83, 0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
        ctx.stroke();
        ctx.fillStyle = 'rgba(0, 0, 0, 0)';
        ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.restore();

        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
        ctx.stroke();

        ctx.restore();

        window.requestAnimationFrame(animation);
    }

</script>
</body>
</html>

Update: The above behavior is confirmed to be replicable on at least these Chrom(e/ium) versions:

Version 75.0.3770.100 (Official Build) (64-Bit) on MacOS Mojave 10.14.5

Version 77.0.3849.0 (Official Build) canary (64-Bit) on MacOS Mojave 10.14.5

Version 77.0.3770.100 (Official Build) snap (64-bit) on Ubuntu 19.04 Disco Dingo

标签： javascript html google-chrome web-mediarecorder

1条回答

爷的心禁止访问

2楼-- · 2020-05-02 04:19

That happens because your image is coming from a cross-domain resource and has tainted your canvas.
Tainting a canvas from which a MediaStream is being captured will stop said MediaStream from capturing any new image.

Also, trying to capture a MediaStream from such a tainted canvas will throw a SecurityError.

const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;

const img = new Image();
img.onload = e => {
  console.log('will taint the canvas')
  ctx.drawImage(img, 0, 0);
  // and if we try now to capture a new stream, we have a clear error
  const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);

<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>

To circumvent it, you need the server to send the image in a cross-origin compliant way, by setting correctly the Access-control-origin headers to accept your own domain, then requesting this image with the crossorigin attribute. The server from which you are loading this particular image does allow anyone to access their data in such a cross-origin compliant way, so we can demonstrate the front-end part:

const ctx = canvas.getContext('2d');
const stream = canvas.captureStream();
vid.srcObject = stream;

const img = new Image();
img.crossOrigin = 'anonymous'; // add this to request the image as cross-origin allowed
img.onload = e => {
  console.log('will not taint the canvas anymore')
  ctx.drawImage(img, 0, 0);
  // and if we try now to capture a new stream, we have a clear error
  const stream2 = canvas.captureStream();
}
img.src = "https://66.media.tumblr.com/84d332cafeb1052c477c979281e5713b/tumblr_owe3l0tkCj1wxdq3zo1_1280.jpg";
ctx.fillRect(0,0,20,20);

<canvas id="canvas"></canvas>
<video id="vid" controls autoplay muted></video>

0人赞添加讨论(0) 举报

Why is video from canvas.captureStream empty when

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间