iOS 15 app crashes when try to load local video

Ionic Version


Ionic:

   Ionic CLI                     : 6.18.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.13
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 3.4.3
  @capacitor/core: 3.4.3
  @capacitor/android: 3.4.3
  @capacitor/ios: 3.4.3

Installed Dependencies:

  @capacitor/android: not installed
  @capacitor/cli: 3.4.3
  @capacitor/core: 3.4.3
  @capacitor/ios: 3.4.3

Platform(s)

iOS (version >15.0)

Current Behavior

  • App crash or reload when try to load local asset or file system video with size more than 100 mb.

Expected Behavior

  • Application does not crash or reload when try to load large video.

Code Reproduction

  • Create sample page and add video in asset folder.
  • Load video using normal html video tag.
  • Run application in iOS 15 device.
<div class="video-wrapper">
      <video height="200" controls autoplay playsinline>
        <source src="assets/videos/vid-235-mb.mp4" type="video/mp4" />
      </video>
</div>

Crash Log

022-03-25 16:24:08.313078+0530 App[16616:1566152] [Process] 0x1100b4380 - GPUProcessProxy::didClose:
2022-03-25 16:24:08.314109+0530 App[16616:1566152] [Process] 0x1100b4380 - GPUProcessProxy::gpuProcessExited: reason=crash
2022-03-25 16:24:08.317147+0530 App[16616:1566152] [Process] 0x111000920 - [PID=16628] WebProcessProxy::gpuProcessExited: reason=0
2022-03-25 16:24:08.403599+0530 App[16616:1566666] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 
"target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" 
UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-03-25 16:24:08.403698+0530 App[16616:1566666] [ProcessSuspension] 0x1100086d0 -
 ProcessAssertion: Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=16631, 
 error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" 
 UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-03-25 16:24:18.156063+0530 App[16616:1566152] [Process] 0x1100644e0 - GPUProcessProxy::didClose:
2022-03-25 16:24:18.157466+0530 App[16616:1566152] [Process] 0x1100644e0 - GPUProcessProxy::gpuProcessExited: reason=crash
2022-03-25 16:24:18.159427+0530 App[16616:1566152] [Process] 0x111000920 - [PID=16628] WebProcessProxy::gpuProcessExited: reason=0
2022-03-25 16:24:18.395119+0530 App[16616:1567234] [assertion] Error acquiring assertion: <Error Domain=RBSAssertionErrorDomain Code=2 
"Specified target process does not exist" UserInfo={NSLocalizedFailureReason=Specified target process does not exist}>
2022-03-25 16:24:18.395197+0530 App[16616:1567234] [ProcessSuspension] 0x1100088b0 - 
ProcessAssertion: Failed to acquire RBS assertion 'GPUProcess Background Assertion' for process with PID=16633, 
error: Error Domain=RBSAssertionErrorDomain Code=2 "Specified target process does not exist" 
UserInfo={NSLocalizedFailureReason=Specified target process does not exist}

Other Technical Details

npm --version output: 6.14.13

node --version output: v14.17.3

pod --version output (iOS issues only): 1.11.2

We’ll take a look at it. But in the meantime, maybe using a Capacitor plugin like this one will help get you unstuck.

@thomasvidas
This plugin is not useful in our case, Because we have to play video in embedded mode . And capacitor-video-player plugin is not support embedded mode in android and iOS.

You can try CapacitorVideoPlayer. It helps me (Ionic 5).

Some tutorials:

Something like this:

 import { CapacitorVideoPlayer } from 'capacitor-video-player';

async play() {
    const res: any = await this.videoPlayer.initPlayer({
      mode: 'fullscreen', url: '/assets/videos/video1.mp4',
...
    });
  }

Plugins should still work if you are embedding Capacitor. For example, Ionic Portals, the official embedded solution from the Ionic Team, allows usage of any Capacitor plugin