Start a new topic

Viewer interferes with embedded video on rest of app

I am using the wikitude cordova plugin (see stack below). When the app first starts, HTML videos run with no problem from both local and remote files.


However, once the viewer has been opened and closed, returning to the initial webview shows that any of the videos that were running are now frozen, and trying to open new videos results in empty video elements, with the javascript error promise reading: "AbortError: The operation was aborted."


This error message will appear for files that had loaded and run successfully before the viewer was opened, and/or in previous sessions.


This makes me think the viewer is interfering with background video activity.


*I cannot even create/load entirely new video elements once the viewer has run, although I can before.


Can you advise on this?


Thanks,

Neal


*We have a way to record a video feed from the viewer, but cannot show it to the user immediately after they close the viewer, only when they close/reopen the app.


1 person has this problem

I have created two repositories from the Wikitude Cordova Samples Repo.


It turns out the Samples repo does not break web services on the parent app, but it also does not use WKWebview. The cordova app uses it's default UIWebview, which cannot be pushed to App Store.


Simply adding the cordova WKWebview plugin to the Sample project makes it unable to play videos (after the view has been used).


Here are two demo's for this, one with and one without the WKWebviewer. Instructions will be on the screens when you open these:


https://github.com/NealBrennan75/WikitudeVideoBugDemo_WKWebview

https://github.com/NealBrennan75/WikitudeVideoBugDemo_UIWebview

My apologies, here is a more elaborate run down of problem:


*I understand your side may say, 'if it works on our sample, we are okay'. But maybe someone on iOS side can take a quick look at it.



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 <img> 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 (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"

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

Hi Neal,


Could you please provide the following details:


  • Which version of the SDK are you using?
  • What Cordova version are you using?
  • What device does this happen with (model details and OS version)?
  • Is this happening with the sample app or in your own app? If it happens with your own app, do the video samples of the sample app work on your device? If so, please check for differences in your implementation compared to the sample app (especially with the background handling)
  • Could you send exact steps to reproduce the issue also with the sample app?


Thx and greetings

Nicola

Login or Signup to post a comment