更新视频的拍摄

package-lock.json

@@ -928,6 +928,21 @@
         }
       }
     },
+    "@ionic-native/media-capture": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npm.taobao.org/@ionic-native/media-capture/download/@ionic-native/media-capture-5.8.0.tgz",
+      "integrity": "sha1-VsdX4YhthWnNSNI9OLsZ1To7hpU=",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      },
+      "dependencies": {
+        "@types/cordova": {
+          "version": "0.0.34",
+          "resolved": "https://registry.npm.taobao.org/@types/cordova/download/@types/cordova-0.0.34.tgz",
+          "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+        }
+      }
+    },
     "@ionic-native/native-page-transitions": {
       "version": "5.7.0",
       "resolved": "https://registry.npm.taobao.org/@ionic-native/native-page-transitions/download/@ionic-native/native-page-transitions-5.7.0.tgz",
@@ -1609,6 +1624,7 @@
       "resolved": "http://registry.npm.taobao.org/are-we-there-yet/download/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha1-SzXClE8GKov82mZBB2A1D+nd/CE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -3028,6 +3044,11 @@
       "integrity": "sha1-gP4eggZ62Ny8Xs8AytL436DQ4Q8=",
       "dev": true
     },
+    "cordova-plugin-media-capture": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npm.taobao.org/cordova-plugin-media-capture/download/cordova-plugin-media-capture-3.0.2.tgz",
+      "integrity": "sha1-2mV8L6rc/H/cKGjlnSFe2D5wDDo="
+    },
     "cordova-plugin-nativestorage": {
       "version": "2.3.2",
       "resolved": "https://registry.npm.taobao.org/cordova-plugin-nativestorage/download/cordova-plugin-nativestorage-2.3.2.tgz",
@@ -3380,7 +3401,8 @@
       "version": "1.0.0",
       "resolved": "http://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -4421,7 +4443,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4836,7 +4859,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4892,6 +4916,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4935,12 +4960,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -4949,6 +4976,7 @@
       "resolved": "http://registry.npm.taobao.org/fstream/download/fstream-1.0.11.tgz",
       "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4966,6 +4994,7 @@
       "resolved": "http://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -5003,7 +5032,8 @@
       "version": "4.0.1",
       "resolved": "http://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -5199,7 +5229,8 @@
       "version": "2.0.1",
       "resolved": "http://registry.npm.taobao.org/has-unicode/download/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5948,7 +5979,8 @@
       "version": "0.2.1",
       "resolved": "http://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6575,6 +6607,7 @@
       "resolved": "http://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6587,13 +6620,15 @@
           "version": "2.3.0",
           "resolved": "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "strip-bom": {
           "version": "2.0.0",
           "resolved": "http://registry.npm.taobao.org/strip-bom/download/strip-bom-2.0.0.tgz",
           "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-utf8": "^0.2.0"
           }
@@ -6871,7 +6906,8 @@
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7517,6 +7553,7 @@
       "resolved": "http://registry.npm.taobao.org/npmlog/download/npmlog-4.1.2.tgz",
       "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8562,6 +8599,7 @@
       "resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
+      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8573,6 +8611,7 @@
           "resolved": "http://registry.npm.taobao.org/path-type/download/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8583,7 +8622,8 @@
           "version": "2.3.0",
           "resolved": "http://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -8592,6 +8632,7 @@
       "resolved": "http://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8602,6 +8643,7 @@
           "resolved": "http://registry.npm.taobao.org/find-up/download/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8612,6 +8654,7 @@
           "resolved": "http://registry.npm.taobao.org/path-exists/download/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
+          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -11279,6 +11322,7 @@
       "resolved": "http://registry.npm.taobao.org/wide-align/download/wide-align-1.1.3.tgz",
       "integrity": "sha1-rgdOa9wMFKQx6ATmJFScYzsABFc=",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

package.json

@@ -44,6 +44,7 @@
     "@ionic-native/gao-de-location": "5.6.1",
     "@ionic-native/image-picker": "^5.6.1",
     "@ionic-native/ionic-webview": "^5.8.0",
+    "@ionic-native/media-capture": "^5.8.0",
     "@ionic-native/native-page-transitions": "^5.7.0",
     "@ionic-native/native-storage": "^5.8.0",
     "@ionic-native/splash-screen": "5.0.0",
@@ -61,6 +62,7 @@
     "cordova-plugin-filepath": "1.5.5",
     "cordova-plugin-gaodelocation-chenyu": "2.0.2",
     "cordova-plugin-imagepicker": "1.3.0",
+    "cordova-plugin-media-capture": "3.0.2",
     "cordova-plugin-nativestorage": "2.3.2",
     "core-js": "^2.5.4",
     "echarts": "^4.2.1",
@@ -110,7 +112,9 @@
       "cordova-plugin-statusbar": {},
       "cordova-plugin-device": {},
       "cordova-plugin-splashscreen": {},
-      "cordova-plugin-ionic-webview": {},
+      "cordova-plugin-ionic-webview": {
+        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
+      },
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-camera": {},
       "cordova-plugin-file-transfer": {},
@@ -129,7 +133,8 @@
       "com-badrit-base64": {},
       "com.telerik.plugins.nativepagetransitions": {},
       "cordova-plugin-filepath": {},
-      "cordova-plugin-nativestorage": {}
+      "cordova-plugin-nativestorage": {},
+      "cordova-plugin-media-capture": {}
     },
     "platforms": [
       "android"

src/app/app.module.ts

@@ -30,6 +30,9 @@ import { File } from '@ionic-native/file/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { NativeStorage } from '@ionic-native/native-storage/ngx';
+import { MediaCapture} from '@ionic-native/media-capture/ngx';
+
+
 @NgModule({
   declarations: [
     AppComponent
@@ -72,6 +75,7 @@ import { NativeStorage } from '@ionic-native/native-storage/ngx';
     WebView,
     NativeStorage,
     NativePageTransitions,
+    MediaCapture,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     // { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }, //添加拦截器
     // {provide: ErrorHandler, useClass: error},

src/app/shared/compenents/select-video/select-video.component.html

@@ -1,11 +1,3 @@
-<article style="border:1px solid white;width:360px;height:400px;margin:0 auto;background-color:white;">
-
-  <section class="experiment" style="width:358px; height:240px;border:1px solid green; margin:50px auto;">
-    <div id="videos-container" style="width:360px; height:240px;"></div>
-  </section>
-  <section class="experiment" style="text-align:center;border:none; margin-top:20px;">
-    <button id="openCamera" (click)="openCamera()">打开摄像头</button>
-    <button id="start-recording" (click)="startRecord()">开始录制</button>
-    <button id="save-recording" (click)="saver()">保存</button>
-  </section>
-</article>
+<ion-button (click)="openVideo()">
+  Click me
+</ion-button>

src/app/shared/compenents/select-video/select-video.component.scss

@@ -1,41 +0,0 @@
-com-select-picture {
-    .pictures {
-      position: relative;
-      float: left;
-      width: 50px;
-      height: 50px;
-      margin: 3px;
-      background-color: #f1f1f1;
-    }
-    .pictures img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 6px;
-    }
-  
-    .add {
-      font-size: 25px;
-      color: #5c5c5c;
-      text-align: center;
-      border: solid 1px #e0dfe4;
-      line-height: 54px;
-      vertical-align: middle;
-      border-radius: 6px;
-    }
-  
-    .remove {
-      position: absolute;
-      right: -5px;
-      top: -5px;
-      display: block;
-      width: 18px;
-      height: 18px;
-      border-radius: 18px;
-      font-size: 16px;
-      text-align: center;
-      color: #fff;
-      background-color: red;
-    }
-  }
-  

src/app/shared/compenents/select-video/select-video.component.ts

@@ -7,18 +7,18 @@ import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker/ngx'
 import { BusinessesHelper } from 'src/app/util/helper-classes/businesses-helper';
 import { Base64 } from '@ionic-native/base64/ngx';
 import { DomSanitizer } from '@angular/platform-browser';
+import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx';
+
+
 
 
-declare var mediaRecorde: any;
 @Component({
   selector: 'com-select-video',
   templateUrl: 'select-video.component.html',
   styleUrls: ['./select-video.component.scss'],
 })
 export class SelectVideoComponent {
-  mediaStream:any;
-  recorderFile:any;
-  stopRecordCallback:any;
+ 
   constructor(
     private actionSheet: ActionSheetController,
     private camera: Camera,
@@ -27,121 +27,21 @@ export class SelectVideoComponent {
     private businesses: BusinessesHelper,
     private base64: Base64,
     private sanitizer: DomSanitizer,
+    private mediaCapture: MediaCapture
 
 
   ) { }
+   openVideo(){
+    let options: CaptureImageOptions = { limit: 3 }
+    this.mediaCapture.captureVideo(options)
+      .then(
+        (data: MediaFile[]) => console.log(data),
+        (err: CaptureError) => console.error(err)
+      );
+   }
 
 
 
-  // /**
-  // * 获取用户媒体设备(处理兼容的问题)
-  // * @param videoEnable {boolean} - 是否启用摄像头
-  // * @param audioEnable {boolean} - 是否启用麦克风
-  // * @param callback {Function} - 处理回调
-  // */
-  // getUserMedia(videoEnable: any, audioEnable: any, callback: any) {
-  //   navigator.getUserMedia = navigator.getUserMedia;
-  //   var constraints = { video: videoEnable, audio: audioEnable };
-  //   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-  //     navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
-  //       callback(false, stream);
-  //     })['catch'](function (err) {
-  //       callback(err);
-  //     });
-  //   } else if (navigator.getUserMedia) {
-  //     navigator.getUserMedia(constraints, function (stream) {
-  //       callback(false, stream);
-  //     }, function (err) {
-  //       callback(err);
-  //     });
-  //   } else {
-  //     callback(new Error('Not support userMedia'));
-  //   }
-  // }
-
-
-  // /**
-  // * 关闭媒体流
-  // * @param stream {MediaStream} - 需要关闭的流
-  // */
-  // closeStream(stream: any) {
-  //   if (typeof stream.stop === 'function') {
-  //     stream.stop();
-  //   }
-  //   else {
-  //     let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];
-  //     for (let i = 0; i < trackList.length; i++) {
-  //       let tracks = trackList[i];
-  //       if (tracks && tracks.length > 0) {
-  //         for (let j = 0; j < tracks.length; j++) {
-  //           let track = tracks[j];
-  //           if (typeof track.stop === 'function') {
-  //             track.stop();
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-
-
-
-  // openCamera() {
-  //   console.log('openCamera');
-  //   var mediaRecorder;
-  //   var videosContainer = document.getElementById('videos-container');
-  //   var len = videosContainer.childNodes.length;
-  //   for (var i = 0; i < len; i++) {
-  //     videosContainer.removeChild(videosContainer.childNodes[i]);
-  //   }
-
-  //   var video = document.createElement('video');
-
-  //   var videoWidth = 320;
-  //   var videoHeight = 240;
-
-  //   video.controls = false;
-  //   video.muted = true;
-  //   video.width = videoWidth;
-  //   video.height = videoHeight;
-  //   this.getUserMedia(true, false, function (err, stream) {
-  //     if (err) {
-  //       throw err;
-  //     } else {
-  //       // 通过 MediaRecorder 记录获取到的媒体流
-  //       console.log();
-  //       mediaRecorder = new MediaRecorder(stream);
-  //       this.mediaStream = stream;
-  //       var chunks = [], startTime = 0;
-  //       video.srcObject = stream;
-  //       video.play();
-
-  //       videosContainer.appendChild(video);
-  //       mediaRecorder.ondataavailable = function (e) {
-  //         mediaRecorder.blobs.push(e.data);
-  //         chunks.push(e.data);
-  //       };
-  //       mediaRecorder.blobs = [];
-
-  //       mediaRecorder.onstop = function (e) {
-  //         this.recorderFile = new Blob(chunks, { 'type': mediaRecorder.mimeType });
-  //         chunks = [];
-  //         if (null != this.stopRecordCallback) {
-  //           stopRecordCallback();
-  //         }
-  //       };
-  //     }
-  //   });
-
-  // }
-  // startRecord() {
-  //   console.log('startRecord')
-  // }
-  // saver() {
-  //   console.log('saver')
-  // }
-
 
 
 }

yarn.lock

@@ -396,6 +396,13 @@
   dependencies:
     "@types/cordova" latest
 
+"@ionic-native/media-capture@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.npm.taobao.org/@ionic-native/media-capture/download/@ionic-native/media-capture-5.8.0.tgz#56c757e1886d8569cd48d23d38bb19d53a3b8695"
+  integrity sha1-VsdX4YhthWnNSNI9OLsZ1To7hpU=
+  dependencies:
+    "@types/cordova" latest
+
 "@ionic-native/native-page-transitions@^5.7.0":
   version "5.7.0"
   resolved "https://registry.npm.taobao.org/@ionic-native/native-page-transitions/download/@ionic-native/native-page-transitions-5.7.0.tgz#56e0eac4959cf0b4aab727d787709bbc3a8a6619"
@@ -2041,6 +2048,11 @@ cordova-plugin-ionic-webview@^3.1.2:
   resolved "http://registry.npm.taobao.org/cordova-plugin-ionic-webview/download/cordova-plugin-ionic-webview-3.1.2.tgz#80fe1e82067ad8dcbc5ecf00cad2f8dfa0d0e10f"
   integrity sha1-gP4eggZ62Ny8Xs8AytL436DQ4Q8=
 
+cordova-plugin-media-capture@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npm.taobao.org/cordova-plugin-media-capture/download/cordova-plugin-media-capture-3.0.2.tgz#da657c2faadcfc7fdc2868e59d215ed83e700c3a"
+  integrity sha1-2mV8L6rc/H/cKGjlnSFe2D5wDDo=
+
 cordova-plugin-nativestorage@2.3.2:
   version "2.3.2"
   resolved "https://registry.npm.taobao.org/cordova-plugin-nativestorage/download/cordova-plugin-nativestorage-2.3.2.tgz#d6a1d50632aff2a70227102f68bc605e91aabca2"
@@ -2056,11 +2068,6 @@ cordova-plugin-statusbar@^2.4.2:
   resolved "http://registry.npm.taobao.org/cordova-plugin-statusbar/download/cordova-plugin-statusbar-2.4.2.tgz#fc1fbdc0d8d7033a7e8e1f1f7ff167ac9bd4faf6"
   integrity sha1-/B+9wNjXAzp+jh8ff/FnrJvU+vY=
 
-cordova-plugin-telerik-imagepicker@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.npm.taobao.org/cordova-plugin-telerik-imagepicker/download/cordova-plugin-telerik-imagepicker-2.3.2.tgz#cd95b23292893f0ca4e5a22b871a664e27a9673c"
-  integrity sha1-zZWyMpKJPwyk5aIrhxpmTiepZzw=
-
 cordova-plugin-whitelist@^1.3.3:
   version "1.3.3"
   resolved "http://registry.npm.taobao.org/cordova-plugin-whitelist/download/cordova-plugin-whitelist-1.3.3.tgz#b5e85ecdbbfe5aeded40a1bf4ee2372e67d96fb4"