samsung internet browser stream upload with html5 - camera freez

Question

I have part of my system that uploads stream from mobile webapp in html5, it works for chrome browser on Android, in samsung internet browser the picture constantly freez sometimes from the beginning of record and sometimes suddenly during while recording, i have reproduced it by interrupting with for example a phone call while recording, any ideas?

the video tag and the constraints define as follow:

video = document.getElementById('vid');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');

video.style.width = '160px';
video.style.height = '90px';


//constraints:
video: {
        mandatory: {
            minWidth: CANVAS_WIDTH,
            minHeight: CANVAS_HEIGHT,
            maxWidth: CANVAS_WIDTH,
            maxHeight: CANVAS_HEIGHT
        }

Answer 1

I think you might need to handle the visibility changed event and stop/resume the camera access I would recommend you port your app to Cordova and use the events to handle the app in background or foreground mode. for that, you can look here: how to check mobile web browser is running in foreground or background on mobile device

If you're forced to use the standard web browsers then you could look at the following page and try this however since it's experimental there is no guarantee it will work.

Taken from https://greensock.com/forums/topic/10051-animations-pause-when-browser-tab-is-not-visible/ .

var vis = (function(){
    var stateKey, 
        eventKey, 
        keys = {
                hidden: "visibilitychange",
                webkitHidden: "webkitvisibilitychange",
                mozHidden: "mozvisibilitychange",
                msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

usage:

// check if current tab is active or not
vis(function(){

    if(vis()){  

    setTimeout(function(){  
            // tween resume() code goes here          
            console.log("tab is visible - has focus");
        },300);     

    } else {

        // tween pause() code goes here
        console.log("tab is invisible - has blur");      
    }
});