Successive Image captures on Safari IOS results in same image after first few are taken.

Description

Successive Image captures on Safari IOS results in same image after first few are taken.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

var optionsImage = {
            controls: true,
            width: 640,
            height: 480,
            controlBar: {
                volumePanel: false,
                fullscreenToggle: false
            },
            plugins: {
                record: {
                    image: true,
                    audio: false,
                    debug: true,
                    imageOutputType: 'dataURL',
                    imageOutputFormat: 'image/png',
                    imageOutputQuality: 0.70
                }
            }
        };

var playerImage = videojs('myVideo', optionsImage, function () {
            // print version information at startup
            var msg = 'Using video.js ' + videojs.VERSION +
                ' with videojs-record ' + videojs.getPluginVersion('record') +
                ' and recordrtc ' + RecordRTC.version;
            videojs.log(msg);
            $('#buttonGroup2').hide();
            //playerImage.record().getDevice();
            playerImage.record().enumerateDevices();
        });

        var playerVideo = videojs('myVideoFinal', optionsVideo);


        $('#myAudio').hide();
        $('#myVideoFinal').hide();
            $('#unrappWrap').hide();


        playerImage.on('deviceError', function () {
            console.log('device Image error:', player.deviceErrorCode);
            alert('device Image error:' + error);
        });

        playerImage.on('error', function (element, error) {
            console.error(error);
            alert(error);
        });
        playerImage.on('enumerateReady', function () {
            console.log('Enumerate Ready (IMAGE)...');
            playerImage.record().getDevice();
            if (record) {
                playerImage.record().start();
            }
        });
        playerImage.on('startRecord', function () {
            console.log('started Image recording!');
        });
        playerImage.on('finishRecord', function () {
            // the blob object contains the recorded data that
            // can be downloaded by the user, stored on server etc.
            console.log('finished image: ', playerImage.recordedData);
            // Let handler know we are done...
            var formData = new FormData();
            formData.append('file', dataURLToBlob(playerImage.recordedData));
            formData.append('id', id);  //Replace with real ID later...
            formData.append('last', '0');
            formData.append('type', 'R');
            y++;
            formData.append('count', y);

            $.ajax({
                url: "/admin/ws/WebApp2019.ashx",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (result) {
                    console.log('posted: ', y);
                    console.log('result reaction image: ', result);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status, ': ', thrownError);
                    console.log(xhr.responseText);
                }
            });

            setTimeout(shouldRecord, 10);
            

        });

        function shouldRecord() {
            if (record) {
                // Make another image snap...
                playerImage.record().retrySnapshot();
                //playerImage.record().enumerateDevices();
                playerImage.record().start();
            }
        }

Results

After first 5-6 images it starts to be the same screen shot over and over…same code works fine when on in safari ios.

Expected

To be a new screenshot everytime it is executred.

Actual

After first 5-6 images it starts to be the same screen shot over and over…same code works fine when on in safari ios.

Error output

If there are any errors at all, please include them here.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? Using video.js 7.6.6 with videojs-record 3.9.0 and recordrtc 5.5.8

browsers

what browser(s) are affected? Make sure to test with all third-party browser extensions disabled. IOS - Safari

OSes

what platforms (operating systems and devices) are affected? IOS - Safari

[rdurish]

@thijstriemstra just FYI your proposed solutions didn’t work for me. I needed to have retry snapshop and start in order for a picture to be taken (any device for my example of auto taking pictures). For this to work on the iphone I had to not HIDE the image grabber but move it off screen. Once I did that everything worked. I updated my example on dropbox if you care to see. Thanks for your help!

[rdurish]

Sorry that should say NON-IOS devices. I’m having trouble editing. I will put together an example here shortly.