Попытка медиа-записи холста, однако событие «ondataavailable» никогда не запускалось - PullRequest
Новая
       27

Попытка медиа-записи холста, однако событие «ondataavailable» никогда не запускалось

0 голосов
/ 07 октября 2018

Я пытаюсь воспроизвести видео на холсте, записанном с использованием 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>

Может кто-нибудь заметить, что я делаю неправильно?Кажется, что холст работает правильно, но медиа-рекордер, похоже, ничего не берет.

Спасибо

РЕДАКТИРОВАТЬ:

Я считаю, что проблема в том, что пультвидео не позволяет удаленного доступа и, следовательно, испортил холст.

...