video chat screen freeze in ios when app goes background to foreground

[priyankasaini3]

In ios in video chat screen freeze in ios when app goes background to foreground. Here screen freeze means toolbar buttons are not clickable for a few seconds and some time few minutes. I have also implemented the appState and mute the audio and also stop the camera capture like below code :-- componentDidMount() { AppState.addEventListener('change', this.handleAppStateChange); } componentWillUnmount() { AppState.removeEventListener('change', this.handleAppStateChange); }

handleAppStateChange = (AppState) => {

if (this.props.selectedUsersIds.length != 0) {
if (AppState === 'inactive') {

}
else
{

if (AppState === 'background') { 
  console.log('---background  toolbar---');
  CallService.setAudioMuteState(true);
  this.setState((prevState) => ({isAudioMuted: true}));
  CallService.setvideoMuteState(true);

} else { 
  console.log('---active  toolbar---');

  CallService.setAudioMuteState(false);
  this.setState((prevState) => ({isAudioMuted: false}));
  CallService.setvideoMuteState(false);
}

}

}

}

setvideoMuteState = (mute) => { if (mute) { this._session.mute("video"); } else { this._session.unmute("video"); } };

it works first time but on second try I got this error log 👎

2021-06-22 08:53:32.436621+0530 StudyGroup[5863:500637] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C20.1:2][0x10c16c090] get output frames failed, state 8196 2021-06-22 08:53:32.437986+0530 StudyGroup[5863:500637] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C20.1:2][0x10c16c090] get output frames failed, state 8196 2021-06-22 08:53:32.442700+0530 StudyGroup[5863:500637] TIC Read Status [20:0x0]: 1:57 2021-06-22 08:53:32.442793+0530 StudyGroup[5863:500637] TIC Read Status [20:0x0]: 1:57

Can you please help.

Thanks

[ccvlad]

Hello @priyankasaini3 !

I think that you should ignore AppState === 'inactive', use AppState === 'background' instead. Do not use } else {...} after if (AppState === 'background') {...}, because it doesn't specify an exact AppState.

if (AppState === 'inactive') { /* ignore */ }
if (AppState === 'background') { /* mute video track */ }
if (AppState === 'foreground') { /* unmute video track, if it was unmuted before gone to background */ }

Also check the screenshot below to configure your iOS project via Xcode. It may help you to hold stream in background a long time. You are able to mute only video track and left audio working while in background.

[priyankasaini3]

Hi, Thanks for reply. I did the code change according to your guide line and also did the setting in xcode as per of your guidance. But no-luck getting the same issue again I have providing the code and setting below and also providing my log. Please help thanks.

componentDidMount() { AppState.addEventListener('change', this.handleAppStateChange); } componentWillUnmount() { AppState.removeEventListener('change', this.handleAppStateChange); }

handleAppStateChange = (AppState) => {

if (AppState === 'inactive') { 

  /* ignore */ }
if (AppState === 'background') { 
  console.log('---background  toolbar---');
  CallService.setvideoMuteState(true);

  /* mute video track */ }
if (AppState === 'active') { 

  console.log('---foreground toolbar---');
  CallService.setvideoMuteState(false);

 /* unmute video track, if it was unmuted before gone to background */ }

}

2021-06-24 16:56:31.888874+0530 StudyGroup[1972:267536] [javascript] ---background toolbar--- 2021-06-24 16:56:31.938903+0530 StudyGroup[1972:268028] [native] [VideoCaptureController] Capture will stop 2021-06-24 16:56:40.948569+0530 StudyGroup[1972:267811] [native] [VideoCaptureController] Capture stopped 2021-06-24 16:57:10.374709+0530 StudyGroup[1972:267597] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C22.1:2][0x10bd76ac0] get output frames failed, state 8196 2021-06-24 16:57:10.375259+0530 StudyGroup[1972:267597] [BoringSSL] nw_protocol_boringssl_get_output_frames(1301) [C22.1:2][0x10bd76ac0] get output frames failed, state 8196 2021-06-24 16:57:10.380620+0530 StudyGroup[1972:267597] TIC Read Status [22:0x0]: 1:57 2021-06-24 16:57:10.380752+0530 StudyGroup[1972:267597] TIC Read Status [22:0x0]: 1:57 2021-06-24 16:58:14.998841+0530 StudyGroup[1972:267397] [native] [VideoTrackAdapter] Mute event for 0 7A542731-A7E0-49A2-9BFA-EAA1E08D5988 09568463-f938-49b5-a589-3a14d883da39 2021-06-24 16:58:17.492785+0530 StudyGroup[1972:267536] [javascript] ---foreground toolbar--- 2021-06-24 16:58:17.494675+0530 StudyGroup[1972:268153] [native] [VideoCaptureController] Capture will start

[ccvlad]

As I understand toolbar's buttons don't work (not clickable) some time, right? Does the video continue working after app goes to foreground? Please, clarify

[priyankasaini3]

when the app goes to foreground the below function trigger (if (AppState === 'active')) after some time in-fact the app is in foreground that is why toolbar's button and CallService.setvideoMuteState(false); not works on time.

if (AppState === 'active') {

console.log('---foreground toolbar---'); CallService.setvideoMuteState(false);

/ unmute video track, if it was unmuted before gone to background / }

[priyankasaini3]

both toolbar's buttons and video not works when the app is in foreground because AppState=== 'active' trigger after some time and I don't know why this happen. Please help thanks.

[ccvlad]

Did you swipe from top to bottom (show/hide iOS Notification Center)? I know that ”inactive”/”active” state triggers when show/hide Notification Center. Try to use ”inactive” AppState instead of ”background” on iOS.

The code below I use to manage this case (sample):

handleAppStateChange = async (appState) => {
    const isActiveAppState = appState === 'active';
    const isInactiveAppState = Platform.select({
        ios: appState === 'inactive',
        android: appState === 'background'
    });

    if (isInactiveAppState) {
        this.setMuteVideo(true);
    } else if (isActiveAppState) {
        this.setMuteVideo(false);
    }
};

[priyankasaini3]

Hi ccvlad, I have implemented the above code provided by you but I got the same error again. I think when app come from background to foreground then something is happening which delay the appState to update from inactive to active state.

[ccvlad]

Try to check your AppState listener. Add console.log(appState) and make sure that it is working correct.

[priyankasaini3]

Hi ccvlad, I have checked it in console.log(appState) and come to know that appState get active after 1 to 3 min later when the app is in foreground. So toolbar and video not works for for 1 to 3 min when the app is in foreground.

[priyankasaini3]

Can we need to implement CallKit and VoIP push notifications to solve this issue.

[priyankasaini3]

Hi ccvlad, I have solved the issue , actually the issue is related to the timer which we have implemented during the call duration. when app goes in background it create the problem that is why toolbox freeze.

Thanks for your time and help.

[ccvlad]

Closed due to inactivity. Please create a new issue if needed.