import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { ModalController, NavParams } from '@ionic/angular';
import { SelecttopicPage } from '../selecttopic/selecttopic.page';
import { ActionSheetController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { Storage } from '@ionic/storage';
import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';
import { Media } from '@ionic-native/media';
import { File } from '@ionic-native/file';
import { Diagnostic } from '@ionic-native/diagnostic';
import { AndroidPermissions } from '@ionic-native/android-permissions';
const MEDIA_FILES_KEY = 'mediaFiles';
@Component({
selector: 'app-uploadvid',
templateUrl: './uploadvid.page.html',
styleUrls: ['./uploadvid.page.scss'],
})
export class UploadvidPage implements OnInit {
@ViewChild('myvideo') myVideo: any;
//uploadVid: FormGroup;
public filePath: string;
public mediaFiles = [];
public isAndroid: boolean;
uploadVid = new FormGroup({
title: new FormControl('', Validators.required),
topic: new FormControl({value: '', disabled: true}, Validators.required),
target: new FormControl('', Validators.required)
});
PERMISSION = {
WRITE_EXTERNAL: this.diagnostic.permission.WRITE_EXTERNAL_STORAGE,
READ_EXTERNAL: this.diagnostic.permission.READ_EXTERNAL_STORAGE,
CAMERA: this.diagnostic.permission.CAMERA,
};
constructor(public formBuilder: FormBuilder,
public modalCtrl: ModalController,
public platform: Platform,
public actionSheetController: ActionSheetController,
public storage: Storage,
public mediaCapture: MediaCapture,
public media: Media,
public file: File,
private diagnostic: Diagnostic,
private androidPermissions: AndroidPermissions) {
// this.uploadVid = formBuilder.group({
// title: ['', Validators.compose([Validators.required])],
// topic: ['', Validators.compose([Validators.required])],
// target: ['', Validators.compose([Validators.required])]
// });
}
ngOnInit() {
this.checkIfMobile();
}
loadStoredVideo(){
this.storage.get(MEDIA_FILES_KEY).then(res => {
this.mediaFiles = JSON.parse(res) || [];
});
}
checkIfMobile(){
if(this.platform.is('android')){
this.isAndroid = true;
}else{
this.isAndroid = false;
}
}
async openModal() {
const modal = await this.modalCtrl.create({
component: SelecttopicPage,
//componentProps: { value: 123 }
});
modal.onDidDismiss((topic) => {
console.log("topic2: "+topic);
this.uploadVid.controls['topic'].setValue(topic);
})
return await modal.present();
}
// for web & ios
handleFileSelect(evt){
this.filePath = evt.target.files;
alert("Selected Video: "+this.filePath);
}
// for android
async openVidOption() {
const actionSheet = await this.actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Camera',
role: 'destructive',
icon: 'camera',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Gallery',
role: 'cancel',
icon: 'folder-open',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}
checkAndroidPerm(){
if(this.platform.is('android')){
//this.requestAllPermissions();
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
(success) => {console.log('Succes granted the permissions');
this.captureVideo()},
(err) => {this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)}
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE, this.diagnostic.permission.WRITE_EXTERNAL_STORAGE]);
}
}
// requestAllPermissions(){
// const permissions = Object.keys(this.PERMISSION).map(k => this.PERMISSION[k]);
// this.diagnostic.requestRuntimePermissions(permissions).then((status) => {
// alert(JSON.stringify(status));
// }, error => {
// alert('Error: '+ error);
// });
// }
captureVideo(){
let options: CaptureVideoOptions = {
limit: 1,
duration: 30
}
this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
//this.storeMediaFiles(res);
let capturedFile = res[0];
console.log('capturedFile: '+capturedFile);
let fileName = capturedFile.name;
let dir = capturedFile['localURL'].split('/');
dir.pop();
let fromDirectory = dir.join('/');
let toDirectory = this.file.dataDirectory;
this.file.copyFile(fromDirectory, fileName, toDirectory, fileName).then(res => {
let url = res.nativeURL.replace(/^file:\/\//, '');
this.storeMediaFiles([{name: fileName, size: capturedFile.size, localURL: url}]);
});
});
}
storeMediaFiles(files){
this.storage.get(MEDIA_FILES_KEY).then(res =>{
if(res){
let arr = JSON.parse(res);
arr = arr.concat(files);
this.storage.set(MEDIA_FILES_KEY, JSON.stringify(arr));
}else{
this.storage.set(MEDIA_FILES_KEY, JSON.stringify(files));
}
this.mediaFiles = this.mediaFiles.concat();
})
}
playFile(myFile){
console.log('play: ', myFile);
let video = this.myVideo.nativeElement;
video.src = myFile.localURl;
}
}
我是Ionic的新手,正在从事此tutorial的视频捕获功能。当我构建android apk并打开应用程序时,出现黑屏。所以我检查了计算机浏览器,并得到了错误,如屏幕快照所示。我尝试搜索其解决方案,并发现了这篇帖子Link1和Link2,但这也没有解决我的问题。
如果有人可以在这方面帮助我,那会很好。预先感谢。
// config.xml
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-sqlite-storage" spec="^2.3.3" />
<plugin name="cordova-plugin-filechooser" spec="^1.0.1" />
<plugin name="cordova-plugin-filepicker" spec="^1.1.5" />
<plugin name="cordova-plugin-filepath" spec="^1.4.2" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-media" spec="^5.0.2">
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.8" />
<engine name="ios" spec="4.5.5" />
<engine name="android" spec="7.0.0" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
// package.json
"dependencies": {
"@angular/common": "6.0.9",
"@angular/core": "6.0.9",
"@angular/forms": "6.0.9",
"@angular/http": "6.0.9",
"@angular/platform-browser": "6.0.9",
"@angular/platform-browser-dynamic": "6.0.9",
"@angular/router": "6.0.9",
"@ionic-native/android-permissions": "^4.12.0",
"@ionic-native/core": "5.0.0-beta.14",
"@ionic-native/diagnostic": "^4.12.0",
"@ionic-native/file": "^4.12.0",
"@ionic-native/file-chooser": "^4.12.0",
"@ionic-native/file-path": "^4.12.0",
"@ionic-native/media": "^4.12.0",
"@ionic-native/media-capture": "^4.12.0",
"@ionic-native/splash-screen": "5.0.0-beta.14",
"@ionic-native/status-bar": "5.0.0-beta.14",
"@ionic/angular": "4.0.0-beta.0",
"@ionic/lab": "^1.0.2",
"@ionic/ng-toolkit": "1.0.0",
"@ionic/schematics-angular": "1.0.1",
"@ionic/storage": "^2.1.3",
"angular-progress-http": "^1.0.0",
"cordova-android": "7.0.0",
"cordova-ios": "4.5.5",
"cordova-plugin-android-permissions": "^1.0.0",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-filechooser": "^1.0.1",
"cordova-plugin-filepath": "^1.4.2",
"cordova-plugin-filepicker": "^1.1.5",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.0.2",
"cordova-plugin-media": "^5.0.2",
"cordova-plugin-media-capture": "^3.0.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.3.3",
"cordova.plugins.diagnostic": "^4.0.8",
"core-js": "^2.5.3",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/cli": "6.0.8",
"@angular/compiler": "6.0.9",
"@angular/compiler-cli": "6.0.9",
"@angular/language-service": "6.0.9",
"@angular-devkit/architect": "0.7.0-rc.3",
"@angular-devkit/build-angular": "0.7.0-rc.3",
"@angular-devkit/core": "0.7.0-rc.3",
"@angular-devkit/schematics": "0.7.0-rc.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~10.5.2",
"codelyzer": "~4.4.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.2",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.7.2"
}
答案 0 :(得分:9)
我要做的就是:
在依赖项中,我写了"@ionic-native/media-capture": "^4.12.0"
而不是"@ionic-native/media-capture": "^5.0.0-beta.14"
。之后,我在CLI中键入npm update
。在页面组件中,我使用了import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx';
。这里的重要部分是link中所述的/ngx
。好吧,我必须对AndroidPermissions,Diagnostic,Media和File执行此操作。该问题解决后。希望对别人有帮助。
答案 1 :(得分:1)
通过安装
解决npm install --save @ ionic-native / media-capture @ 4.20.0
答案 2 :(得分:0)
伙计们,我正在使用ionic 4 + angular 7构建一个项目,我正在尝试在项目中使用ionic文件系统, https://ionicframework.com/docs/native/file/
此页面之后,在安装所有依赖项后,当我尝试将“文件”导入到“ appModule.ts”中时,出现此错误:
未捕获的TypeError:
模块../node_modules/@ionic-native/native_plugin/index.js上vendor.js:85920上的Object(...)不是函数
// native_plugin =任何本地组件
使用以下方法解决问题:
npm i -s @ionic-native/xxx@5.0.0-beta.14
import { xxx } from '@ionic-native/xxx/ngx
import { file } from '@ionic-native/file/ngx';
import { xxx } from '@ionic-native/xxx';
import { file } from '@ionic-native/file';
最后检查npm上的@ ionic-native / xxx版本:
https://www.npmjs.com/package/@ionic-native/xxx
https://www.npmjs.com/package/@ionic-native/file
您必须将5.x.x版本用于ANGULAR和4.x.x ANGULAR-IONIC。 在ionic.config.json文件中检查项目类型