2

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
        }
Adi Miller
  • 21
  • 1

1 Answers1

0

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");      
    }
});
Barkermn01
  • 6,781
  • 33
  • 83
  • thanks for replying, I already wrote a code to detect the occurrence of this phenomenon, the problem is that reactivate the camera does not work.. – Adi Miller Jan 31 '18 at 12:29
  • Are you deactivating the camera on the state change to inactive? if so it's a bug in the browser report it to Samsung especially if it's working 100% in the android chrome browser – Barkermn01 Jan 31 '18 at 12:32
  • what do you mean by inactivating? i tried send the .play again when it occur, any other way to inactive camera? – Adi Miller Jan 31 '18 at 14:21