尝试对媒体录制画布，但是从未触发“ ondataavailable”事件

Question

我正在尝试在使用captureStream和媒体记录器记录的画布中播放视频。但是，似乎“ ondataavailable”从未被解雇。

    $(function () {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var video = document.getElementById('videos');

        // setup stream capture
        var mediaStream = canvas.captureStream(30);
        // setup a media recorder
        var mediaRecorder = new MediaRecorder(
            mediaStream,
            {
                mimeType: 'video/webm;codecs=h264',
                videoBitsPerSecond: 3000000
            }
        );

        video.addEventListener('play', function () {
            var $this = this; //cache

            // Start the media recorder
            mediaRecorder.start(1000);

            (function loop() {
                if (!$this.paused && !$this.ended) {
                    var vRatio = (canvas.height / video.videoHeight) * video.videoWidth;
                    ctx.drawImage($this, 0, 0, vRatio, canvas.height);
                    var hRatio = (canvas.width / video.videoWidth) * video.videoHeight;
                    ctx.drawImage($this, 0, 0, canvas.width, hRatio);
                    setTimeout(loop, 1000 / 30); 
                }
            })();
        }, 0);

        const ws = new WebSocket(
            window.location.protocol.replace('http', 'ws') + '//' + // http: => ws:, https: -> wss:
            '127.0.0.1:5000/ws'
        );

        ws.addEventListener('open', function (event) {
            console.log('connection opened');
        });

        mediaRecorder.onstart = function(event) {
            console.log('media recorder started');
        };

        mediaRecorder.ondataavailable = function(event) {
        // NEVER GETS CALLED
            console.log('sending data');
            console.log(event.data);
            ws.send(event.data);
        };

        mediaRecorder.addEventListener('stop', ws.close.bind(ws));

        ws.addEventListener('close', function (event) {
            console.log('connection closed');
            if (mediaRecorder) {
                mediaRecorder.stop();
            }
        });

    });

<h3>Original Video</h3>
<video width="640" height="360" id="video"
       src="http://techslides.com/demos/sample-videos/small.mp4"
       controls="false"></video>
<h3>Canvas Video</h3>
<canvas width="640" height="360" id="canvas"></canvas>

有人可以发现我在做什么错吗？画布似乎可以正确绘制，但是媒体记录器似乎没有拾取任何东西。

谢谢

编辑：

我认为问题是因为远程视频不允许远程访问，因此污染了画布。