If I open the Augmented Reality Viewer, ‘Wikitude’ on my app, then I can no longer create new videos when I return to my app.
I have tried this with a test remote video, I can use a javascript function to create/remove it over and over and it works properly, until I open the Wikitude viewer. Then when the app can create the HTML Element for the video, but it cannot load or play the video, an element with the intended source merely sits looking empty. The play command results in the vague promise error:
“abortError: The operation was aborted.”
Wikitude offers a sample app to try their app out. It is only cordova , running a minimal HTML app. I tried my javascript function there and it WAS able to create/remove video elements, even after the viewer was used. I ported all of my plugins and Podfile over to this sample app, hoping to find the culprit, which would end new video functionality once the viewer go used, but the sample app always works. This makes me wonder if it is an issue with Ionic.
I am including my simple ‘startVideo()’ function, which removes/recreates the test video, and the stacks for both my app and the Wikitude sample app.
Does anybody have an idea why this might be happening? Or possible workarounds? Any help would be much appreciated!
*** Also, if it helps, the Wikitude viewer is a cordova plugin that I believe opens a wkwebviewer, it sets the background image of the BODY in this viewer to the stream from the camera. Perhaps this interferes with garbage collection or video functionality. It doesn’t break their sample app, however.
My test function:
#######################################################
(page will need: < div id=“videoContainer” > < div id=“videoEl” > </div></div >)
startVideo = () => {
videoUrl = ‘https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mov-file.mov’;
console.log('videoUrl: ' + videoUrl);
let videoForRemoving = document.getElementById('videoEl');
if (videoForRemoving) {
videoForRemoving.remove();
}
let video = document.createElement('video');
video.id = 'videoEl';
video.setAttribute('loop', 'true');
video.setAttribute('autoplay', 'true');
video.setAttribute('muted', 'true');
video.setAttribute('playsinline', 'true');
video.setAttribute('preload', 'auto');
video.setAttribute('webkit-playsinline', 'true');
video.setAttribute('width', '150px');
video.setAttribute('src', videoUrl);
// let testMov = this.sanitizeFilePath(videoUrl);
let testMov = videoUrl;
// video.pause();
video.setAttribute('src', testMov);
// source.setAttribute('src', testMov);
video.load();
video.muted = true;
let fileExplorEl = document.getElementById('videoContainer');
fileExplorEl.insertBefore(video, fileExplorEl.firstChild);
setTimeout(() => {
video.play().then(
res => {
console.log('success test');
console.log(res);
console.log('success test two');
},
err => {
console.log('error test');
console.log(err);
console.log('error test two');
}
);
}, 2000);
}
#############################################################
My App’s Ionic Info:
#############################################################
Ionic:
Ionic CLI : 5.2.1 (/Users/nealbrennan/.nvm/versions/node/v10.16.0/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.10
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, ios 6.0.0
Cordova Plugins : cordova-plugin-ionic-webview 5.0.0, (and 27 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
Wikitude Plugin Version: 9.2.0
#############################################################
Info for Wikitude Demo (this works, it also doesn’t use Ionic, only simple cordova demo):
#############################################################
Cordova: 9.0.0
Cordova-IOS: 5.1.1
Wikitude Plugin Version: 9.2.0
Node Version: 10.16.0
#############################################################