uniapp开发微信小程序-实现授权、拍照、录像、录音上传相关文件_uniapp微信小程序实现录屏

先看效果图

一、授权
1、用户拒绝或未授权时调用inquiriesEmpower方法
uni.showModal为弹出确认弹窗，点击确定调用uni.openSetting跳转设置页面，点击取消可自行处理

const inquiriesEmpower = (auth = "scope.record") => {
  return new Promise((resolve, reject) => {
    uni.getSetting({
      success(res) {
        if (!res.authSetting[auth]) {
          uni.showModal({
            content: "获取授权失败，是否重新授权？",
            success: (res) => {
              if (res.confirm) {
                uni.openSetting({
                  success(res) {
                    console.log(res.authSetting);
                  },
                });
              } else if (res.cancel) {
                reject("用户点击取消");
              }
            },
          });
        }
      },
    });
  });
};
// 授权按钮
const toInquiriesEmpower = async () => {
  try {
    await inquiriesEmpower();
  } catch (err) {
    console.log(err);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

二、拍照
uni.chooseImage拍摄或从手机相册中选图片，返回图片的临时文件路径

// 拍照和相册
const takePicture = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"], //从相册选择
    success: (res) => {
      const { tempFilePaths } = res;
      console.log(tempFilePaths);
    },
  });
};
1
2
3
4
5
6
7
8
9
10
11
12

三、录像和相册
uni.chooseVideo拍摄视频或从手机相册中选视频，返回视频的临时文件路径，sourceType: [‘camera’]控制为相机录制

// 录像和相册
const takeVideoPicture = () => {
  uni.chooseVideo({
   	compressed: false, //是否压缩所选的视频源文件，默认值为 true
    sourceType: ["album", "camera"],
    success: (res) => {
      const { tempFilePath } = res;
      console.log(tempFilePath);
    },
  });
};
1
2
3
4
5
6
7
8
9
10
11

四、录音
uni.getRecorderManager() 创建录音管理器，uni.createInnerAudioContext()创建并返回内部 audio 上下文，具体如下：

const playAudioId = ref(0); //播放中的id标识
const playStatus = ref(0); //录音播放状态 0:未播放 1:正在播放
//创建一个录音管理器
const recorderManager = uni.getRecorderManager();
//创建一个播放器
let audioContext = uni.createInnerAudioContext();
//录音开始
const startRecord = async () => {
  try {
    await inquiriesEmpower("scope.record");
    const options = {
      duration: 60000, // 默认值 60000（1 分钟）
      sampleRate: 16000, // 采样率
      numberOfChannels: 1, // 录音通道数
      encodeBitRate: 96000, // 编码码率
      format: "mp3", // 音频格式，有效值 aac/mp3
      frameSize: 10, // 指定帧大小，单位 KB
    };
    recorderManager.start(options);
  } catch (err) {
    console.log(err);
  }
};

//录音结束
const endRecord = () => {
  recorderManager.stop();
  recorderManager.onStop(function (res) {
    const { tempFilePath } = res;
    const fileName = new Date().getTime();
    // 向预览数组里添加 -- 自行修改
    const tempArr = {
      id: fileName,
      url: tempFilePath,
      type: "audio",
    };
  });
};

// 播放录音
const playAudio = (item) => {
  if (playStatus.value === 1 && playAudioId.value != item.id) { 
    uni.showToast({
      title: "请先暂停当前播放...",
      icon: "none",
    });
    return;
  }
  if (playStatus.value == 0) {
    playMusic(item);
  } else {
    stopMusic(item);
  }
};
//播放音乐
const playMusic = (item) => {
  audioContext = uni.createInnerAudioContext();
  audioContext.src = item.url;
  audioContext.play();
  //直接播放
  audioContext.onPlay((res) => {
    //暂停之后点击播放继续播放
    uni.showToast({
      title: "播放中...",
      icon: "none",
    });
    updateStatus(item, 1); //更新播放音频的状态
    //此处省略 -自行设置定时器获取，当前音频播放的时间/当前播放音频总时长
    //audioContext.duration/audioContext.currentTime
    //示例代码：
    // intervalID.value = setInterval(() => {
    //   const currentTime = audioContext.currentTime || 0; //当前音频播放的时间
    //   const druationTime = audioContext.duration || 0; //当前播放音频总时长
    //   item.tiemAll = formatTime(druationTime); // 格式化总时长 如：00:26
    //   item.currentTime = formatTime(currentTime); // 格式化当前时长 如：00:12
    //   // 播放完成清除定时器
    //   if (audioContext.duration && item.currentTime) {
    //     clearInterval(intervalID.value);
    //   }
    // }, intervalTime.value);
  });

  //播放结束重制播放
  audioContext.onEnded((end) => {
    updateStatus(item, 0); //更新播放音频的状态
  });
};
// 暂停音乐
const stopMusic = (item) => {
  audioContext.pause();
  audioContext.onPause((res) => {
    uni.showToast({
      title: "暂停播放",
      icon: "none",
    });
  });
  updateStatus(item, 0);
};

// 更新播放音频的状态
const updateStatus = (item, falg) => {
  item.play = falg;
  playStatus.value = falg;
  playAudioId.value = item.id;
};

// 格式化时间的函数，将秒转换为分:秒格式
const formatTime = (num) => {
  num = num?.toFixed(0);
  let second = num % 60;
  if (second < 10) second = "0" + second;
  let min = Math.floor(num / 60);
  if (min < 10) min = "0" + min;
  return min + ":" + second;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115