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

Is it indeed impossible to play an embedded video on iOS?