cordova-plugin-camera
cordova-plugin-camera copied to clipboard
apache
Ionic 5 - Picking video as memory array is giving "ENCODING ERR" or "Not allowed to load local resource"
Bug Report
/**
* PickVideo
*/
pickVideo(sourceType) {
const options: CameraOptions = {
sourceType,
mediaType: this.camera.MediaType.VIDEO,
destinationType: this.camera.DestinationType.FILE_URI,
quality: 100,
allowEdit: false,
saveToPhotoAlbum: false,
correctOrientation: true
};
this.camera.getPicture(options)
.then( (videoUrl) => {
this.ngZone.run(async () => {
if (videoUrl) {
console.log(videoUrl);
const load = await this.loadingService.presentLoading();
const filename = videoUrl.substr(videoUrl.lastIndexOf('/') + 1);
let dirpath = videoUrl.substr(0, videoUrl.lastIndexOf('/') + 1);
dirpath = dirpath.includes('file://') ? dirpath : 'file://' + dirpath;
try {
const dirUrl = await this.file.resolveDirectoryUrl(dirpath);
const retrievedFile = await this.file.getFile(dirUrl, filename, {});
retrievedFile.file(async data => {
console.log('NativeURL = ' + retrievedFile.nativeURL);
if (data.size > MAX_FILE_SIZE) {
await load.dismiss();
const err = this.translateService.instant('Not_MoreThan10Mb');
return alert(err);
}
if (data.type !== ALLOWED_MIME_TYPE) {
await load.dismiss();
const err = this.translateService.instant('Not_AllowdMedia');
return alert(err);
}
this.file.readAsArrayBuffer(dirpath, filename).then((res) => {
this.ngZone.run(async () => {
await load.dismiss();
this.chosenVideoBuffer = res;
this.chosenVideo = retrievedFile.nativeURL;
}).catch(err => {
console.log('readAsArrayBuffer=' + err);
});
});
});
} catch (err) {
console.log('resolveDirectoryUrl error=' + err);
return await load.dismiss();
}
}
});
},
(err) => { });
}
This is my code for picking video as memory array. I have used camera and file plugin, and also have tried with "resolveLocalFilesystemUrl", "resolveDirectoryUrl" and "readAsArrayBuffer". I am getting null response from the readAsArrayBuffer of the file plugin, and "not allowed to load local resource" error when i put the url to the video element. I have hit google, and found solution to convert the path using the webview plugin. But after when i have converted the path using the webview plugin, I am getting "ENCODING ERR". I am stuck more than 5 days for this. Funny was that... I have succeed in this operation in Android build 1 month ago. I am trying to change the versions of both plugins, but still not any luck.
If anyone have similar experience, please give me assistance to sort this issue quickly.
Problem
What is expected to happen?
I have expected to read video as memory stream, and making a blob to upload to server.
What does actually happen?
But still getting null response from the file.readAsArrayBuffer or the readingfunction of the FileReader class.
Information
The followings are part of my package.json
"dependencies": {
"@angular/animations": "^9.1.9",
"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ionic-native/barcode-scanner": "^5.27.0",
"@ionic-native/camera": "^5.29.0",
"@ionic-native/core": "^5.0.7",
"@ionic-native/crop": "^5.26.0",
"@ionic-native/deeplinks": "^5.28.0",
"@ionic-native/facebook": "^5.29.0",
"@ionic-native/file": "^5.29.0",
"@ionic-native/firebase": "^5.27.0",
"@ionic-native/http": "^5.29.0",
"@ionic-native/in-app-browser": "^5.28.0",
"@ionic-native/keyboard": "^5.26.0",
"@ionic-native/push": "^5.27.0",
"@ionic-native/social-sharing": "^5.26.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"cordova-ios": "6.1.1",
"cordova-plugin-inappbrowser": "^4.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.8",
"cordova-res": "^0.15.1",
"cordova-serve": "^4.0.0",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"gulp": "^4.0.2",
"ionic-plugin-deeplinks": "^1.0.20",
"ios-sim": "^9.0.0",
"moment": "^2.29.0",
"native-run": "^1.0.0",
"phonegap-plugin-barcodescanner": "^8.1.0",
"phonegap-plugin-multidex": "^1.0.0",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"videogular2": "^7.0.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.20",
"@angular/cli": "~8.3.23",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@ionic/angular-toolkit": "^2.1.1",
"@types/core-js": "^2.5.3",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-android": "^9.0.0",
"cordova-ios": "^6.1.1",
"cordova-plugin-advanced-http": "^3.1.0",
"cordova-plugin-camera": "^5.0.0",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-facebook4": "^6.4.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-push": "0.0.1",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-support-android-plugin": "^1.0.2",
"cordova-support-google-services": "^1.3.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"phonegap-plugin-push": "^2.3.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-x-socialsharing": {
"ANDROID_SUPPORT_V13_VERSION": "24.1.1+",
"PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
"ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
},
"ionic-plugin-deeplinks": {
},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"phonegap-plugin-push": {
"ANDROID_SUPPORT_V13_VERSION": "27.+",
"FCM_VERSION": "17.0.+"
},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-facebook4": {
"APP_ID": "xxxx",
"APP_NAME": "xxx",
"FACEBOOK_HYBRID_APP_EVENTS": "false",
"FACEBOOK_ANDROID_SDK_VERSION": "6.5.1"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-camera": {},
"cordova-plugin-file": {},
"cordova-plugin-advanced-http": {}
},
"platforms": [
"ios",
"android"
]
Environment, Platform, Device
I am running on Ionic CLI 6.12.0, Cordova 10.0, Angular CLI 10.1.2
Checklist
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
