更新media示例

pages.json

@@ -615,7 +615,7 @@
     {
       "path": "pages/API/choose-image/choose-image",
       "style": {
-        "navigationBarTitleText": "图片"
+        "navigationBarTitleText": "拍摄图片或从相册中选择图片"
       }
     },
     // #ifdef APP-ANDROID
@@ -635,13 +635,13 @@
     },
     // #endif
     // #ifdef APP
-    // {
-    //   "path" : "pages/API/choose-video/choose-video",
-    //   "style" :
-    //   {
-    //     "navigationBarTitleText" : "拍摄视频或从相册中选择视频"
-    //   }
-    // },
+    {
+      "path" : "pages/API/choose-video/choose-video",
+      "style" :
+      {
+        "navigationBarTitleText" : "拍摄视频或从相册中选择视频"
+      }
+    },
     {
       "path" : "pages/API/save-video-to-photos-album/save-video-to-photos-album",
       "style" :
@@ -658,13 +658,13 @@
         "navigationBarTitleText" : "获取视频信息"
       }
     },
-    // {
-    //   "path" : "pages/API/compress-video/compress-video",
-    //   "style" :
-    //   {
-    //     "navigationBarTitleText" : "压缩视频"
-    //   }
-    // },
+    {
+      "path" : "pages/API/compress-video/compress-video",
+      "style" :
+      {
+        "navigationBarTitleText" : "压缩视频"
+      }
+    },
     // #endif
     {
       "path": "pages/API/get-network-type/get-network-type",

pages/API/choose-image/choose-image.uvue

@@ -113,7 +113,7 @@
   export default {
     data() {
       return {
-        title: 'choose/previewImage',
+        title: 'chooseImage',
         imageList: [] as Array<string>,
         sourceTypeIndex: 2,
         sourceType: ['拍照', '相册', '拍照或相册'],

pages/API/choose-video/choose-video.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap">
+      <video class="video" :src="src"></video>
+      <view class="uni-btn-v">
+        <button type="primary" @click="chooseVideo">选取视频</button>
+      </view>
+      <enum-data title="视频来源" :items="sourceTypeItemTypes" @change="onSourceTypeChange"></enum-data>
+      <enum-data title="摄像头" :items="cameraItemTypes" @change="onCameraChange"></enum-data>
+      <input-data title="最长拍摄时间，单位秒" defaultValue="60" type="number" @confirm="onMaxDurationConfirm"></input-data>
+      <boolean-data title="是否压缩" :defaultValue="true" @change="onCompressedChange"></boolean-data>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  import { ItemType } from '@/components/enum-data/enum-data'
+  export default {
+    data() {
+      return {
+        title: "chooseVideo",
+        src: "",
+        sourceTypeItemTypes: [{ "value": 0, "name": "从相册中选择视频" }, { "value": 1, "name": "拍摄视频" }, { "value": 2, "name": "从相册中选择视频或拍摄视频" }] as ItemType[],
+        sourceTypeItems: [["album"], ["camera"], ["album", "camera"]],
+        cameraItemTypes: [{ "value": 0, "name": "后置摄像头" }, { "value": 1, "name": "前置摄像头" }] as ItemType[],
+        cameraItems: ["back", "front"],
+        sourceType: ["album", "camera"],
+        compressed: true,
+        maxDuration: 60,
+        camera: "back"
+      }
+    },
+    methods: {
+      chooseVideo() {
+        uni.chooseVideo({
+          sourceType: this.sourceType,
+          compressed: this.compressed,
+          maxDuration: this.maxDuration,
+          camera: this.camera,
+          // extension: ['mp4'],
+          success: (res) => {
+            console.log("chooseVideo success", JSON.stringify(res));
+            this.src = res.tempFilePath;
+          },
+          fail: (err) => {
+            uni.showModal({
+              title: "选择视频失败",
+              content: JSON.stringify(err),
+              showCancel: false
+            });
+          }
+        })
+      },
+      onSourceTypeChange(value : number) {
+        this.sourceType = this.sourceTypeItems[value];
+      },
+      onCompressedChange(value : boolean) {
+        this.compressed = value;
+      },
+      onMaxDurationConfirm(value : number) {
+        this.maxDuration = value;
+      },
+      onCameraChange(value : number) {
+        this.camera = this.cameraItems[value];
+      }
+    }
+  }
+</script>
+
+<style>
+  .video {
+    align-self: center;
+  }
+</style>

pages/API/compress-image/compress-image.uvue

@@ -24,14 +24,12 @@
       </view>
     </view>
     <input-data defaultValue="80" title="压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）" type="number"
-      @confirm="onQualityInputConfirm"></input-data>
-    <input-data title="压缩后图片的宽度，单位px" type="number" @confirm="onCompressedWidthInputConfirm"></input-data>
-    <input-data title="压缩后图片的高度，单位px" type="number" @confirm="onCompressedHeightInputConfirm"></input-data>
-    <input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string"
-      @confirm="onWidthInputConfirm"></input-data>
-    <input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string"
-      @confirm="onHeightInputConfirm"></input-data>
-    <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateInputConfirm"></input-data>
+      @confirm="onQualityConfirm"></input-data>
+    <input-data title="压缩后图片的宽度，单位px" type="number" @confirm="onCompressedWidthConfirm"></input-data>
+    <input-data title="压缩后图片的高度，单位px" type="number" @confirm="onCompressedHeightConfirm"></input-data>
+    <input-data defaultValue="auto" title="压缩后图片的宽度，支持px、%、auto" type="string" @confirm="onWidthConfirm"></input-data>
+    <input-data defaultValue="auto" title="压缩后图片的高度，支持px、%、auto" type="string" @confirm="onHeightConfirm"></input-data>
+    <input-data defaultValue="0" title="旋转度数，范围0～360" type="number" @confirm="onRotateConfirm"></input-data>
   <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
@@ -56,6 +54,16 @@
     },
     methods: {
       compressImage() {
+        if (this.beforeCompressPath == "") {
+          uni.showToast({
+            title: "请先选择图片",
+            icon: "error"
+          });
+          return;
+        }
+        uni.showLoading({
+          title: "图片压缩中"
+        });
         uni.compressImage({
           src: this.beforeCompressPath,
           quality: this.quality,
@@ -64,24 +72,29 @@
           width: this.width,
           height: this.height,
           rotate: this.rotate,
-          success: (_res) => {
-            this.afterCompressPath = _res.tempFilePath;
+          success: (res) => {
+            console.log("compressImage success", JSON.stringify(res));
+            this.afterCompressPath = res.tempFilePath;
             uni.showToast({
               title: "压缩成功",
               icon: null
             });
             uni.getImageInfo({
-              src: _res.tempFilePath,
-              success: (res) => {
-                this.afterCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
+              src: res.tempFilePath,
+              success: (_res) => {
+                this.afterCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
               }
             });
           },
           fail: (err) => {
             uni.showModal({
-              title: "压缩失败",
-              content: JSON.stringify(err)
-            })
+              title: "压缩图片失败",
+              content: JSON.stringify(err),
+              showCancel: false
+            });
+          },
+          complete: (_) => {
+            uni.hideLoading();
           }
         })
       },
@@ -90,33 +103,33 @@
           count: 1,
           sizeType: ["original"],
           sourceType: ["album"],
-          success: (_res) => {
-            this.beforeCompressPath = _res.tempFilePaths[0];
-            uni.getImageInfo({
-              src: _res.tempFilePaths[0],
           success: (res) => {
-                this.beforeCompressImageInfo = `图片宽度: ${res.width}, 图片高度: ${res.height}`;
+            this.beforeCompressPath = res.tempFilePaths[0];
+            uni.getImageInfo({
+              src: res.tempFilePaths[0],
+              success: (_res) => {
+                this.beforeCompressImageInfo = `图片宽度: ${_res.width}, 图片高度: ${_res.height}`;
               }
             });
           }
         });
       },
-      onQualityInputConfirm(value : number) {
+      onQualityConfirm(value : number) {
         this.quality = value;
       },
-      onCompressedWidthInputConfirm(value : number) {
+      onCompressedWidthConfirm(value : number) {
         this.compressedWidth = value;
       },
-      onCompressedHeightInputConfirm(value : number) {
+      onCompressedHeightConfirm(value : number) {
         this.compressedHeight = value;
       },
-      onWidthInputConfirm(value : string) {
+      onWidthConfirm(value : string) {
         this.width = value;
       },
-      onHeightInputConfirm(value : string) {
+      onHeightConfirm(value : string) {
         this.height = value;
       },
-      onRotateInputConfirm(value : number) {
+      onRotateConfirm(value : number) {
         this.rotate = value;
       }
     }

pages/API/compress-video/compress-video.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+  <!-- #endif -->
+    <page-head :title="title"></page-head>
+    <view class="uni-padding-wrap">
+      <video class="video" :src="src"></video>
+      <view class="uni-title">
+        <text class="uni-subtitle-text">压缩前视频信息</text>
+      </view>
+      <text>{{beforeCompressVideoInfo}}</text>
+      <view class="uni-title">
+        <text class="uni-subtitle-text">压缩后视频信息</text>
+      </view>
+      <text>{{afterCompressVideoInfo}}</text>
+      <view class="uni-btn-v">
+        <button type="primary" @click="chooseVideo">从相册中选取待压缩的视频</button>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @click="compressVideo">压缩视频</button>
+      </view>
+    </view>
+    <input-data :defaultValue="null" title="压缩质量，low(低) medium(中) high(高)" type="string"
+      @confirm="onQualityConfirm"></input-data>
+    <!-- <input-data :defaultValue="null" title="码率，单位kbps" type="number" @confirm="onBitrateConfirm"></input-data> -->
+    <!-- <input-data :defaultValue="null" title="帧率" type="number" @confirm="onFpsConfirm"></input-data> -->
+    <input-data :defaultValue="null" title="相对于原视频的分辨率比例，取值范围(0, 1]" type="string"
+      @confirm="onResolutionConfirm"></input-data>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: "compressVideo",
+        src: "",
+        beforeCompressVideoInfo: "",
+        afterCompressVideoInfo: "",
+        beforeCompressPath: "",
+        afterCompressPath: "",
+        quality: null as string | null,
+        bitrate: null as number | null,
+        fps: null as number | null,
+        resolution: null as number | null,
+      }
+    },
+    methods: {
+      compressVideo() {
+        if (this.beforeCompressPath == "") {
+          uni.showToast({
+            title: "请先选择视频",
+            icon: "error"
+          });
+          return;
+        }
+        uni.showLoading({
+          title: "视频压缩中"
+        });
+        uni.compressVideo({
+          src: this.beforeCompressPath,
+          quality: this.quality,
+          resolution: this.resolution,
+          success: (res) => {
+            console.log("compressVideo success", JSON.stringify(res));
+            this.src = res.tempFilePath;
+            uni.showToast({
+              title: "压缩成功",
+              icon: null
+            });
+            uni.getVideoInfo({
+              src: res.tempFilePath,
+              success: (_res) => {
+                this.afterCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
+              }
+            });
+          },
+          fail: (err) => {
+            uni.showModal({
+              title: "压缩视频失败",
+              content: JSON.stringify(err),
+              showCancel: false
+            });
+          },
+          complete: (_) => {
+            uni.hideLoading();
+          }
+        });
+      },
+      chooseVideo() {
+        uni.chooseVideo({
+          sourceType: ["album"],
+          compressed: false,
+          success: (res) => {
+            this.beforeCompressPath = res.tempFilePath;
+            this.src = res.tempFilePath;
+            uni.getVideoInfo({
+              src: res.tempFilePath,
+              success: (_res) => {
+                this.beforeCompressVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
+              }
+            });
+          }
+        });
+      },
+      onQualityConfirm(value : string) {
+        this.quality = value;
+      },
+      onBitrateConfirm(value : number) {
+        this.bitrate = value;
+      },
+      onFpsConfirm(value : number) {
+        this.fps = value;
+      },
+      onResolutionConfirm(value : string) {
+        this.resolution = parseFloat(value);
+      }
+    }
+  }
+</script>
+
+<style>
+  .video {
+    align-self: center;
+  }
+
+  .image-container {
+    flex-direction: row;
+  }
+</style>

pages/API/get-image-info/get-image-info.uvue

@@ -45,12 +45,20 @@
       chooseImage() {
         uni.chooseImage({
           count: 1,
-          success: (_res) => {
-            this.absoluteImagePath = _res.tempFilePaths[0];
-            uni.getImageInfo({
-              src: _res.tempFilePaths[0],
           success: (res) => {
-                this.relativeImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
+            this.absoluteImagePath = res.tempFilePaths[0];
+            uni.getImageInfo({
+              src: res.tempFilePaths[0],
+              success: (_res) => {
+                console.log("getImageInfo success", JSON.stringify(res));
+                this.relativeImageInfo = `图片宽度: ${_res.width}\n图片高度: ${_res.height}\n图片路径: ${_res.path}\n图片方向: ${_res.orientation}\n图片格式: ${_res.type}`;
+              },
+              fail: (err) => {
+                uni.showModal({
+                  title: "获取图片信息失败",
+                  content: JSON.stringify(err),
+                  showCancel: false
+                });
               }
             });
           }
@@ -61,13 +69,29 @@
       uni.getImageInfo({
         src: this.relativeImagePath,
         success: (res) => {
+          console.log("getImageInfo success", JSON.stringify(res));
           this.absoluteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
+        },
+        fail: (err) => {
+          uni.showModal({
+            title: "获取图片信息失败",
+            content: JSON.stringify(err),
+            showCancel: false
+          });
         }
       });
       uni.getImageInfo({
         src: this.remoteImagePath,
         success: (res) => {
+          console.log("getImageInfo success", JSON.stringify(res));
           this.remoteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
+        },
+        fail: (err) => {
+          uni.showModal({
+            title: "获取图片信息失败",
+            content: JSON.stringify(err),
+            showCancel: false
+          });
         }
       });
     }

pages/API/get-video-info/get-video-info.uvue

@@ -31,12 +31,20 @@
       chooseVideo() {
         uni.chooseVideo({
           compressed: false,
-          success: (_res) => {
-            this.absoluteVideoPath = _res.tempFilePath;
-            uni.getVideoInfo({
-              src: _res.tempFilePath,
           success: (res) => {
-                this.absoluteVideoInfo = `视频画面方向: ${res.orientation}\n视频格式: ${res.type}\n视频长度: ${res.duration}s\n视频大小: ${Math.ceil(res.size / 1024)}kB\n视频宽度: ${res.width}\n视频高度: ${res.height}\n视频帧率: ${res.fps}fps\n视频码率: ${res.bitrate}kbps`;
+            this.absoluteVideoPath = res.tempFilePath;
+            uni.getVideoInfo({
+              src: res.tempFilePath,
+              success: (_res) => {
+                console.log("getVideoInfo success", JSON.stringify(res));
+                this.absoluteVideoInfo = `视频画面方向: ${_res.orientation}\n视频格式: ${_res.type}\n视频长度: ${_res.duration}s\n视频大小: ${Math.ceil(_res.size / 1024)}kB\n视频宽度: ${_res.width}\n视频高度: ${_res.height}\n视频帧率: ${_res.fps}fps\n视频码率: ${_res.bitrate}kbps`;
+              },
+              fail: (err) => {
+                uni.showModal({
+                  title: "获取视频信息失败",
+                  content: JSON.stringify(err),
+                  showCancel: false
+                });
               }
             });
           }

pages/API/save-image-to-photos-album/save-image-to-photos-album.uvue

@@ -23,16 +23,18 @@
       saveImage() {
         uni.saveImageToPhotosAlbum({
           filePath: "/static/uni.png",
-          success() {
+          success: (res) => {
+            console.log("saveImageToPhotosAlbum success", JSON.stringify(res));
             uni.showToast({
               position: "center",
               icon: "none",
               title: "图片保存成功，请到手机相册查看"
             })
           },
-          fail(e) {
+          fail: (err) => {
             uni.showModal({
-              content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
+              title: "保存图片到相册失败",
+              content: JSON.stringify(err),
               showCancel: false
             });
           }

pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue

@@ -25,15 +25,17 @@
         uni.saveVideoToPhotosAlbum({
           filePath: this.src,
           success: (_) => {
+            console.log("saveVideoToPhotosAlbum success");
             uni.showToast({
               position: "center",
               icon: "none",
               title: "视频保存成功，请到手机相册查看"
             });
           },
-          fail: (e) => {
+          fail: (err) => {
             uni.showModal({
-              content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
+              title: "保存视频到相册失败",
+              content: JSON.stringify(err),
               showCancel: false
             });
           }

pages/tabBar/API.uvue

@@ -359,10 +359,10 @@
               },
               // #endif
               // #ifdef APP
-              // {
-              //   name: "拍摄视频或从相册中选择视频",
-              //   url: 'choose-video'
-              // },
+              {
+                name: "拍摄视频或从相册中选择视频",
+                url: 'choose-video'
+              },
               {
                 name: "保存视频到相册",
                 url: 'save-video-to-photos-album'
@@ -373,10 +373,10 @@
                 name: "获取视频信息",
                 url: 'get-video-info'
               },
-              // {
-              //   name: "压缩视频",
-              //   url: 'compress-video'
-              // },
+              {
+                name: "压缩视频",
+                url: 'compress-video'
+              },
               // #endif
               /* {
                 name: "图片选择和拍照",