cordova-plugin-ionic-webview

cordova-plugin-ionic-webview copied to clipboard

Problem: ###################################################################### My app runs on Ionic and uses the Wikitude Augmented Reality plugin (cordova plugin).

When the app opens the Wikitude viewer, and then the closes it to return to the main app, I can no longer play HTML5 videos.

Before using the viewer, I can continually spin up (javascript) video elements and play them, then destroy and recreate.

It looks like the (problem/after using viewer) videos never successfully load:

• Tried ‘onload’ event to console.log back, it never fires
• Tried ‘cache-buster’ urls, both for local (sanitized) url’s and external url’s
• Tried ‘.pause() —> .load() —> .play()’ sequence on video object to no avail
• Tried setting ‘.currentTime’ equal to 0, after .load(), then .play() to no avail

I can load jpg’s to tags in the same scenario, even with cache-buster url’s. So loading content is possible.

This issue does NOT arise on the Wikitude sample app, which runs Cordova w/ simple JQuery (no Ionic). I can use the Wikitude viewer, then close it and return to the main app, and spin up HTML5 videos with no problems.

I think this problem is due to the cordova-plugin-ionic-webview. I think that the Wikitude Viewer interferes with this perhaps because either:

• It doesn’t create a child-view in proper hierarchy in iOS, making videos play, but in viewer layer out of sight
• Wikitude Viewer connects the HTML body.background to a live video feed from camera, perhaps this locks up video resources for entire app

######################################################################

Demo Code: ###################################################################### startVideo(videoUrl) {

  //YOU WILL NEED TO COPY A LOCAL FILE TO YOUR SYSTEM TO TEST (OR TRY REMOTE URL, THOSE BREAK ALSO)
  videoUrl = 'assets/videos/test_movie.mov';

  let videoForRemoving = <HTMLVideoElement> document.getElementById('videoEl');
  if (videoForRemoving) {
    videoForRemoving.remove();
  }

  let video = <HTMLVideoElement> document.createElement('video');
  video.id = 'videoEl';
  let testMov = videoUrl;

  video.setAttribute('src', testMov);

  //YOU WILL NEED TO ADD '<div id="fileExplorer"></div>' TO CURRENT VIEW’S HTML
  let fileExploreEl = document.getElementById('fileExplorer');
  fileExploreEl.insertBefore(video, fileExploreEl.firstChild);


  video.load();
  video.currentTime = 0;
  video.play();

} ######################################################################

Tech Stack: ###################################################################### Ionic:

Ionic CLI : 5.2.1 (/Users/nealbrennan/.nvm/versions/node/v10.16.0/lib/node_modules/ionic) Ionic Framework : @ionic/angular 5.3.0 @angular-devkit/build-angular : 0.901.12 @angular-devkit/schematics : 9.1.12 @angular/cli : 9.1.12 @ionic/angular-toolkit : 2.3.0

Cordova:

Cordova CLI : 9.0.0 ([email protected]) Cordova Platforms : ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 6 other plugins)

Utility:

cordova-res : not installed native-run : 0.2.7 (update available: 1.0.0)

System:

Android SDK Tools : 26.1.1 (/Users/nealbrennan/Library/Android/sdk/) ios-deploy : 1.10.0 ios-sim : 8.0.2 NodeJS : v10.16.0 (/Users/nealbrennan/.nvm/versions/node/v10.16.0/bin/node) npm : 6.9.0 OS : macOS Catalina Xcode : Xcode 11.5 Build version 11E608c

Plugins:

com.wikitude.phonegap.wikitudeplugin 9.2.0 "Augmented Reality - Wikitude SDK Plugin" cordova-plugin-device 2.0.2 "Device" cordova-plugin-file 6.0.2 "File" cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)" cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 5.0.0 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" ######################################################################