Cordova-plugin-ionic-webview: After updating to cordova-plugin-ionic-webview: 2.0.3, unable to load or play locally stored assets from http://localhost:8080 using window.Ionic.WebView.convertFileSrc

[KevRyan2]

Expected Behavior:
The new method window.Ionic.WebView.convertFileSrc will work as expected and replace normalizeURL to allow locally stored videos/photos/audio files to be accessed/played.

Actual Behavior:
The videos/audio files/images served at localhost:8080/_file_/ ... (which is the new formatted file location by the suggested method) will not load or play. Have tried running
this.renderer.invokeElementMethod(video, 'load');
this.renderer.invokeElementMethod(video, 'play');
video.load();
video.play();

I believe the load method works because it immediately hits an error with
let canPlayThrough = this.renderer.listen(video, 'canPlayThrough', (evt) =>
});
Error output here is
evt {
bubbles: false
cancelBubble: false
cancelable: true
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
returnValue: true
srcElement:

Has anybody run into this issue yet/solved it? I was already using WKWebview with everything working perfectly, the reason this became an issue (I believe) is the deprecation of normalizeURL. Any ideas or tips would be awesome.

UPDATE: If I hardcode one of the file URLs into the video tag it hits a 500 Internal Server Error multiple times before giving up. If I load this same URL in a chrome browser, it locates and plays the media file without issue.

Config.xml
<access origin="http://localhost:8080" />
<allow-navigation href="http://localhost:8080/*" />
<allow-intent href="http://localhost:8080/*" />

Packages:
Angular CLI: 1.7.4
Node: 6.11.0
OS: darwin x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router

@angular/cli: 1.7.4
@angular/tsc-wrapped: 4.4.6
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

"dependencies": {
"@angular/animations": "^5.2.11",
"@angular/common": "^5.2.11",
"@angular/compiler": "^5.2.11",
"@angular/compiler-cli": "^5.2.11",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.11",
"@angular/http": "^5.2.11",
"@angular/platform-browser": "^5.2.11",
"@angular/platform-browser-dynamic": "^5.2.11",
"@angular/platform-server": "^5.2.11",
"@angular/router": "^5.2.11",
"@ionic-native/app-rate": "^4.6.0",
"@ionic-native/app-version": "^3.12.1",
"@ionic-native/background-mode": "^3.12.1",
"@ionic-native/camera": "^3.12.1",
"@ionic-native/clipboard": "^4.10.0",
"@ionic-native/core": "3.10.2",
"@ionic-native/deeplinks": "^3.12.1",
"@ionic-native/device": "^3.12.1",
"@ionic-native/email-composer": "^3.12.1",
"@ionic-native/facebook": "^3.12.1",
"@ionic-native/file": "^4.5.3",
"@ionic-native/file-transfer": "^4.10.0",
"@ionic-native/google-plus": "^3.12.1",
"@ionic-native/health": "^3.12.1",
"@ionic-native/health-kit": "^4.7.0",
"@ionic-native/http": "^3.12.1",
"@ionic-native/in-app-browser": "^3.5.0",
"@ionic-native/insomnia": "^3.12.1",
"@ionic-native/keyboard": "^3.12.1",
"@ionic-native/local-notifications": "^3.14.0",
"@ionic-native/market": "^4.7.0",
"@ionic-native/media": "^4.3.1",
"@ionic-native/mixpanel": "^4.1.0",
"@ionic-native/native-audio": "^4.3.1",
"@ionic-native/native-storage": "^3.12.1",
"@ionic-native/network": "^3.12.1",
"@ionic-native/onesignal": "^4.2.1",
"@ionic-native/photo-viewer": "^4.5.2",
"@ionic-native/safari-view-controller": "^3.12.1",
"@ionic-native/screen-orientation": "^3.12.1",
"@ionic-native/social-sharing": "^3.12.1",
"@ionic-native/splash-screen": "^3.10.2",
"@ionic-native/status-bar": "^3.13.1",
"@ionic-native/streaming-media": "^3.14.0",
"@ionic-native/transfer": "^3.12.1",
"@ionic-native/wheel-selector": "^4.2.1",
"@ionic-native/youtube-video-player": "^4.10.0",
"@ionic/cloud-angular": "0.12.0",
"@ionic/storage": "^2.0.1",
"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
"@types/moment-timezone": "^0.2.34",
"acorn-dynamic-import": "^2.0.2",
"app-scripts": "0.0.0",
"async": "^2.4.0",
"chalk": "^2.1.0",
"com-sarriaroman-photoviewer": "^1.1.11",
"cordova-android": "^6.4.0",
"cordova-android-play-services-gradle-release": "0.0.2",
"cordova-custom-config": "^4.0.2",
"cordova-ios": "~4.5.4",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-background-mode": "^0.7.2",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.1.0",
"cordova-plugin-crosswalk-webview": "^2.2.0",
"cordova-plugin-device": "^1.1.6",
"cordova-plugin-email": "^1.2.6",
"cordova-plugin-facebook4": "^1.7.4",
"cordova-plugin-file": "^4.3.3",
"cordova-plugin-geolocation": "^2.4.3",
"cordova-plugin-googleplus": "^5.1.1",
"cordova-plugin-health": "^0.10.1",
"cordova-plugin-http": "^1.2.0",
"cordova-plugin-inappbrowser": "^1.6.1",
"cordova-plugin-insomnia": "https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git",
"cordova-plugin-ionic-webview": "^2.0.3",
"cordova-plugin-local-notifications": "https://github.com/katzer/cordova-plugin-local-notifications.git#ios10",
"cordova-plugin-mixpanel": "^4.0.0",
"cordova-plugin-music-controls": "https://github.com/amitkhare/cordova-music-controls-plugin.git",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-network-information": "^1.3.3",
"cordova-plugin-safariviewcontroller": "^1.4.7",
"cordova-plugin-screen-orientation": "^2.0.1",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.4.1",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-plugin-x-socialsharing": "^5.1.8",
"cordova-wheel-selector-plugin": "^1.0.9",
"crypto-js": "^3.1.9-1",
"es6-promise-plugin": "^4.1.1",
"hammerjs": "^2.0.8",
"ionic-angular": "^3.8.0",
"ionic-plugin-deeplinks": "^1.0.15",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"json-loader": "^0.5.7",
"loader-runner": "^2.3.0",
"moment-timezone": "^0.5.17",
"node-sass": "^4.5.3",
"onesignal-cordova-plugin": "^2.2.2",
"rollup-pluginutils": "^2.0.1",
"rxjs": "^5.5.11",
"sw-toolbox": "3.6.0",
"typescript": "^2.4.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "^3.1.2",
"@types/async": "2.0.40",
"ionic": "3.20.0",
"typescript": "2.4.2"
}

[ghenry22]

I believe that the accepts range requests setting was lost in one of the other recent updates and this breaks video playback.

Audio, images and other types of files like PDFs seem fine to me.

I’ll take a look at it tomorrow and submit a PR if I can find where it went wrong.

[KevRyan2]

@ghenry22 thank you, if you are able to submit a PR fixing this that would be incredible. Does this mean that as far as you guys are aware, WKWebview does actually support playing local video/audio files now using this localhost:8080 server approach?

[KevRyan2]

I can confirm that convertFilSrc works as intended for images, serving them properly over localhost:8080/_file_/. For a Media audio file created with ionic-native/media it seems there is a similar or identical issue as the video playback.

[KevRyan2]

@ghenry22 I have been forced to revert to 1.1.19 for now because having local videos play is one of the most fundamental functions of our application; I then mimicked the changes you made to prevent the splash screen showing (which worked), but now I have noticed an issue with re-accessing the local filesystem you alluded to here https://github.com/ionic-team/cordova-plugin-ionic-webview/commit/219133305c1bd3d4965736f1566d205ecf8520b5#commitcomment-29291006. Because I can't re-upgrade to 2.0.x as of right now (where those fixes are present), do you have any suggestions? Basically I need those changes you made to enable GCDwebserver to continue running in the background/restart if it errors out when the app returns to the foreground, but I can't upgrade to 2.0.x (where those changes live) until this local video/media issue is sorted out.

[jcesarmobile]

Range request setting is still there
https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/src/ios/CDVWKWebViewEngine.m#L776

Are the local files from www or created/downloaded somewhere else?

[KevRyan2]

@jcesarmobile They aren't local asset files that sit in www no, they are downloaded from a host to the file.dataDirectory using cordova-file-plugin, which used to use the normalizeURL method to serve them. Now, using the new window.Ionic.WebView.convertFileSrc they are served from http://localhost:8080/_file_/data/user/0/com... After further investigation that new method was locating them and serving them properly: 1. I downloaded these assets to my app using the sim 2. I went into the console to view the 404 error after I tried to play one of these video files with

Essentially after updating cordova-plugin-ionic-webview from 1.1.19 to 2.0.3 all sims and real devices refused to serve the local video asset after using window.Ionic.WebView.convertFileSrc. (I could be wrong but I believe this error is very similar if not identical to the CORS error everyone has had while trying to serve local videos/audio on android but now the issue has made it to iOS here after this plugin upgrade).

[ghenry22]

@jcesarmobile the range request setting is still there but only defined on root path. Now there is a second get handler path defined for _file_. I believe this would also need the allow range requests setting.

If this doesn't work then it can be fixed by setting behaviour for specific media file extensions but this would be a last option as it would be a pain to maintain.

I just haven't had time to test this yet, sorry, I will try and test it with one of my apps this week.

this is the solution I have seen which relies on defining supported file extensions:
https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/134#issuecomment-408742803

[jcesarmobile]

@ghenry22 you are right, on the line I mentioned range requests was only enabled for the current served folder, as @KevRyan2 is downloading files it's not applied to them.

I've sent a PR that allows range requests for all _file_ files (not just .mp4 as the comment linked) https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/154
@KevRyan2 can you give it a try?

[KevRyan2]

@jcesarmobile awesome yes I can definitely give this a try, hopefully switching back to that project sometime tomorrow and I will post on here when I am able to confirm that it worked!

[ghenry22]

@jcesarmobile nice one! I'll try and test it out this week also

[jbgtmartin]

@jcesarmobile I have the exact same issue (videos not playing but images working). Your fix works perfectly in my case

[KevRyan2]

@jcesarmobile @ghenry22 I can confirm that the fix in https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/154/files fixes the issue, thanks for working hard on this! (I don't want to close this pre-maturely but maybe once that's merged in we can close the issue)

[jcesarmobile]

Merged. Thanks for testing!

[ghenry22]

Just to confirm this is also working for me with video and audio in 2 separate Apps

[smakinson]

Should I be able to use seek() when playing an mp3 via Howler using convertFileSrc()? The audio plays but seek always jumps back to 0. This is happening with pause/play also.

[mbossX]

have same problem with android5.0, request range is 0-1, content-length is 2, my mp4 not loaded,but image is fine, and android 6+ is all fine. can help me?