ionic-team / ionic-team/cordova-plugin-ionic-webview

Opening Wikitude AR Viewer in app interferes with video loading on main app...

Open
#601 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Objective-C
Stars
493
Forks
410
PR merge metrics
No merged PRs in 30d

Description

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 = document.getElementById('videoEl');
if (videoForRemoving) {
videoForRemoving.remove();
}

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

video.setAttribute('src', testMov);

//YOU WILL NEED TO ADD '

' 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 (cordova-lib@9.0.1)
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"
######################################################################

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.